WebPとAVIFにオンラインで変換：画像を軽く、サイトを速く、SEOを改善

私たちが監査するほぼすべてのサイトで、ページの中でいちばん重いのは画像です。多くの場合、総容量の50〜70パーセントを占め、スクリプト・フォント・CSSを合わせたものよりずっと重くなります。だからこそ画像フォーマットは、存在する中で最も安上がりでリスクの低い高速化です。レイアウトもコードもデザインも触らず、ネットワークを流れるバイト数だけを変えるからです。私たちはgdefoto、商品撮影とレタッチのスタジオで、毎日オンラインショップ向けに最適化した画像を公開しています。このガイドでは、クライアントや開発者に説明しているとおりにWebPとAVIFを見ていきます。実際に何なのか、JPEGやPNGと比べてどれだけ容量を節約するか、それがどうページの高速化とCore Web Vitalsの改善につながるか、2026年のブラウザ対応はどこまで来ているか、そしてどちらのフォーマットが勝つ具体的なケースは何か。結果だけ欲しいなら、WebPとAVIFにオンラインで変換して一分で軽いサイトに直行できます。その判断の背景を理解したいなら、読み進めてください。

WebPとAVIFは、老朽化したJPEGとPNGを置き換えるために作られた、現代的な次世代の画像フォーマットです。JPEGは1992年、PNGは1996年のもので、どちらも今日の動画コーデックで当たり前になっている圧縮の数学より前のものです。WebPとAVIFはその数学を借りているので、同じ画像をはるかに少ないバイト数に収めます。

WebPは2010年にGoogleが公開しました。動画コーデックVP8、のちにVP9から派生しています。可逆・非可逆の両方の圧縮、透過（PNGのようなアルファチャンネル）、アニメーション（GIFのように）に対応します。実際には、見た目が同じ画質でJPEGより25〜35パーセント軽いWebPファイルをよく見ますし、透過つきの同じグラフィックならPNGよりはるかに軽く、多くの場合60〜80パーセント軽くなります。

AVIFは2019年に登場し、動画コーデックAV1の上に構築されています。二つのうちより攻めたフォーマットです。AVIFは広色域、HDR、10ビット・12ビットの色深度、透過、アニメーションに対応します。写真コンテンツでは、AVIFはJPEGより30〜50パーセント小さく測れることが多く、しばしば同等のWebPよりさらに20パーセント小さくなります。JPEGがブロックやノイズを出す肌のトーン、グラデーション、平坦な色面でもディテールを保ちます。

私たちが扱う実ファイルの数値をいくつか。1500×1500ピクセルの商品写真は、品質85のJPEGで約420KB、WebPで約280KB、AVIFで約190KBになり、買い手がわずかな違いにも気づきません。40枚の画像がある商品ページなら、これは16MBのページと7MBのページの差です。

ここでウェブ担当者がよくやる失敗:

• すでに圧縮済みのJPEGを変換して魔法を期待する。高品質の元画像からエンコードするときに最大の効果が出ます。すでにディテールを失ったファイルからでは出ません。
• 品質を100に上げる。AVIFとWebPは品質75〜85で優秀です。100を強いるとファイルが膨らみ、利点が消えます。
• 写真にPNGを使う。PNGは平坦なグラフィックと透過のためのもので、写真には向きません。その写真をWebPやAVIFに移すのが、たいていのサイトで最大の単独の節約になります。

軽い画像は単なる贅沢ではありません。Googleは、Core Web Vitalsを通じてページを実際の読み込み性能で部分的にランク付けし、画像は最も重要な指標に直結しています。WebPやAVIFへの移行は、そのどれもの針を動かします。

Largest Contentful Paint（LCP）は、たいていメイン画像か注目商品の画像です。Googleが最も重く見る指標で、目標は2.5秒未満です。LCPは最も大きい可視要素が読み込み終わる時点を測るので、その画像を420KBから190KBに減らせば、中程度のモバイル回線で丸一秒以上を削れます。私たちの前後比較テストでは、フォーマット変換だけで、LCPが「改善が必要」の帯から「良好」の帯へ移るのが普通です。

Cumulative Layout Shift（CLS）は視覚的な安定性に関わり、目標は0.1未満です。より速く読み込まれる軽い画像を、明示的な幅と高さの属性と組み合わせれば、写真が現れたときにコンテンツが飛ぶのを防げます。フォーマット変更は間接的に効きます。読み込みが速いほど、レイアウトが再調整する時間が短くなるからです。

Interaction to Next Paint（INP）も恩恵を受けます。巨大な画像のデコードとダウンロードに費やす時間が減れば、メインスレッドがタップやクリックに応じる余裕が生まれるからです。

Vitalsのほかにも、SEOとビジネスへの副次効果があります。ページ容量が減れば直帰率が下がり、Googleは読み込み時間が三秒を超えると直帰の確率が急上昇することを示す調査を公表しています。軽い画像は帯域の請求とCDNのコストも抑えます。データ量が限られたモバイルの買い手にとって、7MBのページと16MBのページは、購入と戻るボタンの差です。

私たちが実践している実用的なルール:

• 対応するブラウザには次世代フォーマットを配信し、picture要素と複数のsourceタグでJPEGを予備として使う。
• 折り返しより下の画像にはloading="lazy"を付ける。ただしLCP画像には決して付けない。すぐ読み込むべきだからです。
• メイン画像にはfetchpriority="high"を加え、ブラウザが最初にダウンロードするようにする。
• CLSを守るため、常に幅と高さを指定する。

もし商品写真が、最適化の前にきれいな縁取りや白背景も必要とするなら、私たちの背景除去サービスはフォーマット変換と自然にかみ合います。

いちばんよく聞く反論は「古いブラウザで壊れないか」です。2026年にはこの心配はほぼ過去のものですが、二つのフォーマットは成熟度の段階が異なり、正しい選択は読者層とツール次第です。

WebPの対応はほぼ普遍的です。Chrome、Firefox、Edge、Safari、そして現代のモバイルブラウザはすべて何年も前から対応しています。SafariはバージョンでWebPを2020年に追加しました。世界の対応率は96パーセントを余裕で超えます。実際、今日ではWebPを全員に配信でき、ごく古いブラウザだけが取りこぼします。

AVIFの対応は堅実で、着実に増えています。ChromeとFirefoxは2020年、2021年から対応しています。SafariはAVIFを2022年のバージョン16で追加し、その完全な対応は後続バージョンで成熟していきました。世界の対応率はすでに90パーセントの中〜下あたりです。ごく一部の古いSafariやレガシー環境がまだ持っていません。

だから安全な標準は、両方を配信してブラウザに選ばせることです。picture要素で、まずAVIF、次にWebP、最後に予備のJPEGを並べます。ブラウザは理解できる最初のフォーマットを取るので、現代のブラウザはAVIF、少し古いものはWebP、それ以外はすべてJPEGを受け取ります。誰も壊れた画像を見ません。

それぞれをいつ使うか:

• AVIFを使うのは、1キロバイトが物を言う写真コンテンツです。大きなメインバナー、密度の高い商品ギャラリー、数十枚の画像があるマーケットプレイスのカード。最小のファイルと最良のグラデーションを与えます。
• WebPを使うのは、ほぼ普遍的な到達範囲を持つ単一フォーマットとより単純なツールが欲しいとき、あるいは幅広い互換性が必要な透過つきグラフィックのときです。さらにAVIFよりエンコードが速く、非常に大きなバッチでは重要になります。
• JPEGはpicture要素の予備としてだけ残し、配信するメインフォーマットには決してしない。

知っておくとよい点が一つ。AVIFのエンコードはWebPより遅く、CPUを多く使います。数枚なら気づきませんが、数千枚ならそれを効率よくさばくツールが要ります。私たちの無料コンバーターでWebPとAVIFにオンラインで変換すれば、何もインストールせず、コマンドラインのエンコーダーと格闘せずに、両方のフォーマットが手に入ります。