【イラスト付き】.webpとは？画像を効率よく表示しよう！

ピンクちゃん教えてー

.webpってなに？？

.webpとは、Googleが開発した次世代画像フォーマットのことよ

圧縮率が高くて画像サイズが軽い上にSEO対策にも効果があるから、Webサイト制作で注目されているのよ

2010年にGoogleから公式発表されて、どんどん広がっているわよ

ちなみに読み方はウェッピーというわ

.webpと従来の画像形式がどう違うか説明していくわね

それぞれ特徴があるから適したものを採用していきたいわよね

.jpegは、.webpと同じくデータ量が軽くて.webpよりも表現できる色の数が多いけど、透過処理はできないわよ

Webサイトのように画像をたくさん使う場合には.jpegは向いていないわね

SNSのように写真を単体で投稿する場合には.jpegは有効な画像形式なのよ！

.pngはデータ容量が大きいけど、透過処理ができるし表現できる色の数が多い上に画質の劣化が少ないのよ

データ容量の圧縮に成功すれば、Webサイト制作の際にも使える画像形式ね

.gifはアニメーションに使用できるのが最大の特徴よ

最大256色しか対応していないから他の画像形式に比べて表現できる色の数は少なくて画質も荒いのよね

画質を求めず画像を動かしたいときには基本的にGIFが使われるわよ

.webpはGoogleに発表されてから、大きくWebサイト制作の領域で注目されるくらいメリットがあるのよ

具体的にどんなメリットがあるか説明するわね

.webpを使うと画像のファイルサイズを軽量化できるのよ

あまり画質を悪くせず圧縮できるから、デザイン性も失われないのがうれしいわね

.webpと.jpegを比較しても、25%以上画像サイズを軽くすることができるのよ

.webpを使うと画像サイズが軽くなるから、Webサイトの表示スピードもあがるわよ

表示が遅いWebサイトはユーザビリティが悪いし、離脱率も高くていいことがないのよね

表示スピードが改善されるとUXが高まって、売上アップやファン獲得も期待できるのよ

.webpを採用してWebサイトの表示スピードが改善されるとSEO対策にも効果があるわ

Googleはページの表示スピードを1つの評価指標としているから、速度が速いWebサイトは掲載順位が上がることが多いのよ

逆に表示スピードが遅いWebサイトは掲載順位が落ちる可能性が高いから、.webpの利用が推奨されているのよ

.webpを使うとメリットも大きいけど、デメリットもあるのよ

どんなデメリットがあるか説明していくわね

.webpはJavaScriptとの相性が悪くて、使用判定が出ないこともあるのよ

ブラウザによって差異はあるけど、JavaScriptがたくさん組み込まれたWebサイトでは.webpは使いづらい画像形式になるわ

無理やり埋め込むこともできるけど、開発コストもかかってしまうからおすすめできないのよ

.webpはどんどん広まっているけど、まだ対応されていないブラウザもあるのよ

とはいっても、Google ChromeやFireFoxやSafariなど、主要なブラウザはすでに対応されているわ

今後も対応するブラウザは増えていくはずよ！

画像や写真を.webpに変換する方法を2種類紹介するわよ

意外と簡単に実践できるから、ぜひ挑戦してみてちょうだいね

PhotoshopのプラグインWebPShopを使うと.pngや.jpegの画像形式を.webpに変換することができるわよ

Photoshop単体では.webpは扱えなくて、WebPShopのインストールが必要な点だけ注意してね

WebPShopを入れれば、Photoshop上で.webp形式の画像を開いたり編集したりすることができるのよ

ブログやWebサイト制作で人気のCMS、Wordpressでも.webpを扱えるプラグインWebP Converter for Mediaがあるわよ

.webpに対応しているブラウザか判断してくれて、.webpが使える場合は.webp形式で、.webpが使えない場合は.jpegか.png形式で表示してくれるのよ

プラグイン導入前にアップロードしていた画像も一括で変換してくれるから開発工数がかなり抑えられるわよね！

最後に.webpについてまとめておくわよ

表示速度が改善されるといいわね