Webサイトの画像はWebP（ウェッピー）形式を中心に設定しよう！

みなさん、Webサイトの画像形式はどのように設定していますか？

jpg（ジェイペグ）やpng（ピング）一発設定だったりしますよね、、、？

私の仕事環境では納期が厳しくて余裕がなかったり、そこまで求められてないことが多いので今まで大きめの画像（jpg）を設定しておいて一応高解像度ディスプレイにも対応、という感じでこなしていたのですが、先日納品したサイトの表示が遅すぎるということで、とうとう「WebP（ウェッピー）」方式の画像を採用することにしました。（ちなみに私は最初「ウェブピー」と呼んでました、、、）

今更と言われるのは承知の上ですが、他の画像形式とも比較しながらWebP方式を採用するメリットと、Webサイトにおける画像の最適化の重要性語っていきたいと思います。

なぜWebサイトの画像の最適化が必要なのか？

先日納品したサイトの表示について確認するため、「PageSpeed Insights」というサイトで分析してみたところ、、、以下のようになりました。

このWebサイトはローディングアニメーションやページが切り替わるたびにスライドカーテンのエフェクトをかけたり、swiper（スライドショー）を至る所に使っていることもあり、表示速度のパフォーマンスが低いですね、、、

Webサイトの表示が遅くなる原因

アニメーションなどをたくさん盛り込むとパフォーマンスが悪くなることが多いのですが、Webサイトの表示速度に多大な影響を与えるのは画像です。

画像はWebサイトを構成する様々なファイルの中でも大きな容量を占めており、その読み込みに時間がかかるとWebサイトの表示も遅くなってしまいます。

Webサイトの表示速度を上げるには画像ファイルを小さくすることが必要

Webサイトの表示速度を上げるには、以下の対策が必要だということになります。

• 必要以上に大きなサイズの画像を使用しない
• 圧縮率を高めても画質を担保できる形式の画像を使用する
• 上記の方法で画像ファイルの容量を減らし、読み込み速度を上げる

画像ファイルの形式

ではWebサイトで使われる画像データはどんな形式になっているのでしょうか？

現在で広く使われている画像形式には以下のものがあり、その形式は拡張子（.jpg、.pngなど）で表されます。

それぞれ見ていきましょう。

GIF（.gif）形式の概要と特徴

GIF形式の正式名称は「Graphics Interchange Format」といい、1987年に米国のCompuServeという米国のパソコン通信会社から発表されました。

256色までのカラー表示、アニメーション表示（複数フレームを時間指定で再生）、簡易な透過処理（一色のみ透明化）ができるため、単純な色の図表、イラスト、アイコンなどの表示に最適な形式として広く利用されてきました。

JPEG（.jpg/.jpeg）形式の概要と特徴

JPEG形式は、1992年に写真などの複雑な画像を高圧縮で保存するために開発され、その名は開発グループである「Joint Photographic Experts Group」から命名されました。当時、カラー写真を電子的に扱うことが増え、その画像サイズの大きすぎたため、効率的な圧縮形式が求められた背景から誕生しました。

JPEGは非可逆方式（ロス圧縮）という方式で、圧縮率は高いのですが、元のデータの一部を削除して容量を減らしており、編集や保存を繰り返すと画質が劣化してしまうという特徴があります。

JPEGはフルカラー（約1,677万色）の表現が可能なため、デジタルカメラで撮影した写真の保存やWebサイトの写真、商品画像など、写真系の画像を保存する方式としてはいまだに標準といえます。

PNG（.png）形式の概要と特徴

PNG形式の正式名称は「Portable Network Graphics」といい、1996年に登場しました。

大きな特徴はJPEGと違い可逆圧縮（ロスレス圧縮）であることと、透過処理に対応していることです。

データの一部を削除してしまうJPEG形式と異なり、復元が可能ですが、その分圧縮率はJPEGと比べると劣ります。特に写真など複雑な画像ではファイル容量が大きくなってしまいます。逆にイラストやロゴなど、線や色味がはっきりしている画像は圧縮ノイズが出にくいため、JPEGよりも適しています。

また、GIFは一色のみ透明化が可能でしたが、PNGは1ピクセルに対して8bitから16bitの透過情報を持つことができるため、半透明の表現も可能です。

SVG（.svg）形式の概要と特徴

SVGは「Scalable Vector Graphics」の略称であり、2001年にリリースされました。

各主要ブラウザが本格的にサポートを開始したのはHTML5の登場と同時期の2011年頃です。

実はSVGは他の画像ファイルの形式というよりは、描画のルールが記述されたファイルであり、中身はテキストデータであるという点が特殊です。AdobeのIllustratorなどで作成できる「ベクター画像」の保存形式として適しており、解像度に依存せず拡大でき、軽量でもあるため、Webサイトのロゴやアイコンとしてよく利用されています。

しかし、中身がテキストデータであるため、その中に悪意のあるプログラムを埋め込まれるというリスクがあるので、取り扱いには注意が必要です。

WebP（.webp）形式の概要と特徴

WebP（ウェッピー）は画像圧縮の新たなスタンダードを目指してGoogleが2010年に開発した形式です。

WebPは高い圧縮率を誇り、同等画質のJPEGと比較して25%〜35%程度ファイルサイズが小さくなります。

その上アニメーションや透過表現が可能で、可逆、不可逆圧縮療法に対応しているという、JPEG/PNG/GIFのすべてに置き換わることのできるフォーマットです。

さらにJPEGやPNGよりも大幅にファイルサイズを小さくできるという理想的な形式と言えます。

AVIF（.avif）

AVIF（エーブイアイエフ）はほとんどWebPと同じメリットを持ちながら、さらに圧縮率を高めた次世代の標準と目される形式です。

「AV1 Image File Format」の略称で、AV1コーデックベースの圧縮方式で非可逆圧縮が主ですが、可逆圧縮も可能です。WebPと比べてノイズも少ないことが多いようです。

WebPよりAVIFのほうがいい？

WebPもAVIFも2025年現在、主要なモダンブラウザがすべて対応していますので、全部AVIFでいいんじゃない？

そんな気がしてしまいます。

実はブラウザが対応していても、そのファイルをアップロードしたサーバーでその形式をサポートされていなければ表示されません。

デフォルトで対応していないサーバーでも.htaccessでMIMEタイプを追加するという方法が取れる場合などはやりようがあるのですが、サーバーを直接さわれず、データのみ納本するといった場合にはAVIFが適用されるかどうか確実ではなく、フォールバック（代替策）としてWebPやJPEGにも対応できるようにコーディングして、それぞれのファイルを用意しておかなければなりません。

サーバーのサポート状況としてはWebPの方がエックスサーバーなど主要なレンタルサーバーにおいて標準で対応していますし、ブラウザの対応状況もAVIFより早かったので、ブラウザのアップデートを積極的に行っていないユーザーの環境でも適用される可能性が高く、より使いやすい形式といえます。

しかし、サーバーのサポート状況は今後強化されてAVIFが画像の保存形式として主要なものなっていくと考えられますので、予算やリソースに余裕があるのであればAVIFも用意しておくといいでしょう。

WebP画像をWebサイトに実装する方法

それでは、実際にWebサイトにWebPを導入していく方法を確認していきましょう。

WebP画像を用意する

AdobeのPhotoshop画像データを開いて、ファイルメニューから「コピーを保存」を選択し、「WebP」形式を選択すればWebP画像を作成することができます。

しかし何枚もの画像をWebPで保存したい場合は、一括変換してくれるWebサービスを使うと簡単で楽です。

Googleが提供している「Squoosh」や、「サルワカ道具箱」といったサービスを使用すればJPEGやPNGノファイルヲまとめてドラッグ＆ドロップするだけで簡単に変換することができます。

特に「Squoosh」は圧縮率の細かい設定ができるので、画質とファイルサイズのバランスを徹底的にチューニングしたい方に向いています。

「サルワカ道具箱」はドラッグ＆ドロップするだけである程度いい感じの圧縮率でWebPに変換してくれますので、細かいことを考えずにWebPに変換したい人にオススメです。

実際に「サルワカ道具箱」を利用して見たところ、大幅にファイルサイズを圧縮することができました。

80%〜90%ほどの削減になっています。これほどファイルサイズが減っても、画質的に気になるところはなかったです。

この画像に差し替えればかなりサイトのパフォーマンスは良くなりそう、、、！

それではWebP画像を実装していきましょう！

WebPを実装する場合はpictureタグで出し分ける

実際にコーディングする際は、WebPをメインにしつつも、もしWebPに対応していない古いブラウザやサポートされていないサーバーでWebサイトを運用する場合など、万が一WebPが表示されなかった時のために旧来のJPEGやPNGも設定しておくのが安全です。

そのため、＜picture＞タグを利用して出し分けます。以下のような感じです。

<picture>
   <source srcset="assets/images/sample.webp" type="image/webp">
   <source srcset="assets/images/sample.jpg" type="image/jpeg">
   <img src="assets/images/sample.jpg" alt="サンプル画像" width="300" height="200">
</picture>

こうしておくことで、まずはWebPが優先的に表示されますが、WebPを表示できない環境の場合、JPEG画像が表示されることになります。

もし余裕がある場合は、AVIF形式の画像も用意して、＜picture＞タグ内の一番上にAVIFを読み込むsrcsetを設定しておけばベストです。要件の内容などにもよると思いますが、余裕があれば設定しておくといいでしょう。

画像をWebPにして結果どうなったか？

最初にご紹介したWebサイトにWebP形式の画像を採用して、サイトのパフォーマンスはどうなったでしょうか？

「PageSpeed Insights」で再度確認してみました。

SP版はあまり変わってませんね、、、まあ総じてSP版の判定は結構厳しいのですが、実際にスマートフォンで閲覧した時の速さはかなり改善された印象でした。

PC版は数値的にもかなり良くなっています。実際のブラウザでキャッシュの残っていない状態の初期表示速度もかなり速くなってストレスなく閲覧できるようになりました！

画像の最適化はやはりWebサイトを制作する上で必須であると再確認することができました。

Webサイトの画像はWebPを中心に。余裕があればAVIFも。

写真などの画像を電子データとして扱い初めて以降、様々な形式で扱われてきましたが、現状のWebサイト運営においてはWebPを中心にフォールバックとしてJPEGやPNGを設定しておき、余裕があれば第一候補としてAVIFも設定しておくのが最適解、だと思います。

画像の最適化はWebサイトの表示速度を向上させ、SEOにも影響を与える大きな要素ですので、Webサイト制作の際は必ず行いましょう！