次世代の画像フォーマット?「WebP」とは

「WebP(ウェッピー)」という言葉を聞いたことはありますか?
もしかしたら、まだ聞きなじみがない方が多いかもしれません。

それでは、「JPEG(ジェイペグ)」や「PNG(ピング)」という言葉は聞いたことがありますか?
きっとこれらは、ご存知の方も多いでしょう。

実は「WebP」も、「JPEG」や「PNG」と同じ画像のフォーマットなんです。

「WebP」は、サイトの表示速度の向上を目的として制作された「Webサイトのための画像フォーマット」になります。
ほかの画像フォーマットである「JPEG」や「PNG」は、Web以外に印刷物にも使います。
WebPは印刷物で使う色味にはなりませんが、Webサイトを見やすくするための工夫がされた画像フォーマットなんです。

今回はこの次世代の画像フォーマットと呼ばれる「WebP」についてご紹介していきます。

「JPEG」や「PNG」と何が違うの?

「JPEG」や「PNG」と何が違うの?

1.データ量が軽い

WebPの特徴の一つは、そのデータ量の軽さです。
画質はそのままに、PNGと比べると約26%、JPEGと比べると約25~34%、データサイズが圧縮されると言われています。

引用:
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
https://developers.google.com/speed/webp

2.透過もアニメーションもできる

  • 画像の背景を透過をするなら「PNG」
  • アニメーションをするなら「GIF」または「APNG」

など、従来はフォーマットを使い分けていましたが、「WebP」では透過もアニメーションも対応しているので、使い分ける必要がなくなります。

「WebP」がなぜ次世代フォーマットと呼ばれているの?

5Gがはじまり、高速通信が進むこの時代において、そこまでデータ量を軽くする必要があるのだろうか?そう思う方もいるかもしれません。
ではなぜ「WebP」のような次世代の画像フォーマットが重要になってくるのでしょう。

1.高解像度への対応

ひとつはモニターの高解像度化が進むにつれて、それに対応するためWebで使用する画像サイズも大きくなってきていること。
ファイルサイズが大きくなればサーバーの負荷も増え、サーバーコストもかかってくるので、できるだけサイズを抑えた画像を使用する必要が出てきました。

2.「Core Web Vital」への対応

さらには、Googleが2021年6月中旬に開始した指標である「Core Web Vital」への対応を考えていかなければいけない点です。
「Core Web Vital」とは、サーチエンジンで検索したときに、目に留まりやすい位置にサイトを表示するようにする「SEO」の評価基準の一部になります。従来のSEOに加えて、新しい評価基準にも対応する必要が出てきました。
これにより、読み込みパフォーマンスを最適化させる重要性が出てきました。

実際にGoogleのPageSpeed InsightsでWebサイトを測ると、改善できる項目として「次世代フォーマットでの画像の配信」が出てきます。

スクリーンショット:次世代フォーマットでの画像の配信

「WebP」の問題点

ここまで見ると、「すぐにWebPにしなければ」と思うかもしれません。
しかし「WebP」にも問題点はあります。

問題点

【問題点1】IEには対応していない

IEでは表示できない画像フォーマットになります。
(しかしIEはサポート終了も近く、こちらはさしたる問題点ではないかもしれません)

【問題点2】アプリケーションの対応が追い付いていない

主要デザインソフトである、Photoshop、Illustrator、XDではまだ標準でWebPへ書き出す機能がありません。
※Photoshopでは「WebPShop」というプラグインを使うことでWebPの読み書きができるようになります。劣化しない形で書き出すためにはレイヤーを整える必要があるため、手間がかかってしまいます。

以上の問題が解決できれば、いよいよ「WebP」形式へシフトしていく時期がくるかもしれません。

大きな画面で綺麗に画像表示させつつ、Core Web Vital対策にも効果がある「WebP」
気になる方は、いつでもムーンファクトリーにご相談ください。

「WebP」に関連するサービスはこちら

https://www.moonfactory.co.jp/solutions/seo.html