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

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

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

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

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

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

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

1.データ量が軽い

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

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」
気になる方は、いつでもムーンファクトリーにご相談ください。