写真をWebPとAVIFにオンライン変換：サイトを高速化しSEOを改善する

当スタジオでは毎日サイトやマーケットプレイス向けに画像を準備しており、正しいフォーマットが読み込み速度をどれだけ変えるかを目にしています。この記事では余計な話抜きに、WebPとAVIFとは何か、どちらをいつ使うか、SEOにどう影響するか、そして写真を1分でオンライン変換する方法を説明します。

典型的なサイトでは、画像がページ全体の重さの50〜70%を占めます。スクリプトでもフォントでもなく、まさに画像が通信量と読み込み時間を押し下げます。他社のプロジェクトを最適化するとき、最初に見るのは写真がどのフォーマットで置かれているかです。そしてほぼ必ずそこにあるのは、お馴染みのJPEG、もっと悪ければ2〜3メガバイトの重いPNGです。現代のフォーマットWebPとAVIFはこの問題を根本から解決します。同じ画像を見せながら、重さは1.5〜2倍軽くなります。軽さは読み込みの速さ、ユーザー行動指標の改善、そして検索エンジンでの順位向上を意味します。以下では順を追って解説します。新フォーマットが具体的にどれだけ軽いか、Core Web VitalsとSEOにどう影響するか、どのブラウザが対応するか、いつ何を使うか、そしてPhotoshopもコマンドラインもなしにどう変換するか。ただ結果が欲しければ、すぐに写真をWebPとAVIFにオンライン変換して、あとで読み進めることもできます。

現代のフォーマットで、WebPより30%軽く、JPGより2〜3倍軽い。画質は同じです。

ウェブ用は60〜70、印刷や高精細な写真なら80〜90。

WebPは2010年に登場したGoogleのフォーマットです。動画コーデックVP8の圧縮アルゴリズムを用い、非可逆（JPEGの代わり）と可逆（PNGの代わり）の両方で動きます。主な特性は、視覚的に同じ画質でWebPファイルは平均してJPEGより25〜35%軽く、PNGより25〜30%軽いことです。おまけにWebPは透明（アルファチャンネル）とアニメーションに対応し、GIFの代わりにもなり、しかも容量で何倍も勝ります。

AVIFはより新しく、動画コーデックAV1をベースにしたオープンで無料のフォーマットです。WebPよりアグレッシブに圧縮し、同じ写真でAVIFはJPEGより40〜50%軽いファイルを、時にはそれ以上を出します。AVIFはグラデーション（空、ぼけた背景、肌）をよく保ち、特有の四角いアーティファクトをほとんど出さず、拡張ダイナミックレンジ（HDR、10〜12ビットの色）に対応します。その代償として、AVIFのエンコードは遅く、古いデバイスやブラウザは理解しません。

分かりやすいよう、当社の実務からの典型的な数字を挙げます。1200×1200ピクセルの商品写真。

• JPEG画質85は約280〜350KB。
• 同じ視覚品質のWebPは180〜230KB、約30%の節約。
• AVIFは130〜170KB、45〜55%の節約。

30〜40枚のこうした画像があるカタログページでは、差はキロバイトからメガバイトに変わり、モバイル回線のユーザーはそれをすぐ体感します。重要な注意点。節約は内容次第です。複雑で細部の多い写真（布の質感、葉）では効果が小さく、逆に平坦な塗りとグラデーションの単純な画像では70%に達することもあります。だから平均的な約束を信じず、自分の実ファイルをコンバーターに通して容量を比べることを常にお勧めします。これはWebPとAVIFへの変換ツールで1分でできます。JPEGをアップロードし、両フォーマットを得て、それぞれの容量を自分で確かめられます。フォーマット間のより一般的な変換が要ればフォーマット変換が別にあり、容量の厳しい制限には写真圧縮が向きます。

サイト速度は抽象的な快適さでなく、直接のランキング要因です。検索エンジンはページがどれだけ速く安定して読み込まれるかを考慮します。GoogleはこれをCore Web Vitalsという指標群に定式化しており、画像はそのほぼすべてに影響します。

LCP（Largest Contentful Paint）は、表示領域で最大の要素が描画される時間です。多くのサイトでこの要素はまさに画像です。メインバナー、商品写真、記事のカバー。このファイルが軽いほど早く描画されます。LCP画像のJPEGをAVIFに替えると、モバイルで0.5〜1.5秒を削ることがしばしばです。Googleは2.5秒までのLCPを良好とみなし、メイン写真を現代フォーマットに変えることでページを赤ゾーンから緑ゾーンへ引き上げるケースが多いです。

CLS（Cumulative Layout Shift）は読み込み中のレイアウトのズレです。画像のフォーマット自体はCLSに影響しませんが、関連する習慣が重要です。imgタグには常にwidthとheight属性を指定し、ブラウザが場所を事前に確保できるようにします。軽いAVIFは早く読み込まれ、コンテンツが早く落ち着き、ズレが減ります。

INPと全体の応答性は間接的に得をします。読み込むバイトが少ないほどネットワークとCPUの負荷が減り、特に低価格スマホで効きます。

これがSEOで実際に何をもたらすか。

• ページがCore Web Vitalsの緑ゾーンに入り、モバイル検索のランキングにプラス。
• 直帰率が下がる。人が読み込み前に遅いページを離れないため。
• インデックスが良くなる。クロールバジェットの中でロボットが軽いサイトを回りやすいため。
• コンバージョンが上がる。調査によれば読み込みの100msごとに売上が目に見えて削られるため。

別途、よくある失敗を挙げます。WebPを入れても、ファーストビュー以下の画像の遅延読み込み（loading="lazy"）と、メインのLCP画像のfetchpriority="high"を忘れる人がいます。フォーマットとこれらの属性は連携して働きます。そしてもう一つ。アーティファクトが目に見えるまで圧縮しないこと。過剰最適化は遅い読み込みに劣らず商品への信頼を損ないます。

ウェブマスターの主な疑問は、一部の訪問者でサイトが壊れないか、です。2026年時点の事実で答えます。

WebPは現行の全ブラウザが対応します。Chrome、Firefox、Safari（バージョン14、つまり2020年から）、Edge、Opera、そしてAndroidとiOSのモバイルブラウザ。グローバルなカバー率は97%を超えます。実際上、WebPは気にせず全員に配れ、非対応ユーザーに出会うリスクは最小です。

AVIFはより新しいですが、すでに広く対応されています。ChromeとEdgeは2020年から、Firefoxは2021年から、Safariはバージョン16（2022年）から。グローバルなカバー率は約93〜95%で伸び続けています。AVIF非対応はごく古いバージョンのブラウザと、旧式システムに留まる一部の企業環境だけです。

対応の問題を完全に解消する正しいアプローチは、複数のソースを持つpictureタグです。ブラウザが理解できる最初のフォーマットを自分で選び、何も新しいものに対応しなければJPEGにフォールバックします。意味としてはこうです。

• まずブラウザにAVIFのsourceが提示される。
• 理解しなければWebPのsourceが提示される。
• それも理解しなければ、予備として通常のJPEGのimgが読み込まれる。

この方式なら、現代のブラウザは最も軽いフォーマットを受け取り、古いものは馴染みのJPEGを見て何も壊れません。これはゴールドスタンダードで、1%の観客も大切な商用サイトにはまさにこれをお勧めします。

別途、自社サーバーから配るのでなくアップロードするプラットフォームやサービスについて。こちらはより厳格です。

• マーケットプレイスの商品ページはJPEGとPNGを受け入れ、WebPとAVIFはアップロードできません。これらのフォーマットは自社サイト用で、マーケットプレイス用ではありません。
• 各種公的ポータルも指定の解像度と容量のJPEGかPNGを求めます。
• SNSとメッセンジャーはアップロードを自分で再圧縮するので、AVIFを渡す意味はありません。

結論は単純。WebPとAVIFは自社サイト、ランディング、ブログのためのツールです。マーケットプレイスと公的ポータルには必要なサイズのJPEGを残します。

いくつか方法があり、最速から最も複雑な順に、落とし穴も併せて解説します。

方法1、オンラインコンバーター（大半の人にお勧め）。 ソフトのインストールもコンソールの知識も不要な最速の道です。手順。

• WebPとAVIFへの変換ツールを開く。
• そこへ写真か写真フォルダをドラッグする。
• フォーマット（両方同時も可）と画質レベルを選ぶ。
• 結果をダウンロードし、元素材と容量を比べる。

これは1分未満で済み、記事やランディング用に十数枚の画像を準備するときに向きます。ファイルはブラウザ上で処理され、オリジナルはどこへも送られません。

方法2、サイト構築ツール。 CMSや静的ジェネレーターを使っているなら、たいていWebPとAVIFを自分で配りpictureタグを差し込むプラグインやモジュールがあります。数千の画像を持つ大規模サイトには正しい道で、アップロード時に自動で変換されます。

方法3、コマンドライン。 開発者にはcwebpやavifencといったユーティリティがあり、スクリプトでバッチ変換します。強力ですが、技術と設定の時間が要ります。

続いて、いつも見かけるよくある失敗。

• すでに圧縮されたJPEGからの変換。 元素材が過圧縮なら、WebPはアーティファクトを取り除かず固定するだけです。できるだけ高画質のオリジナルを使いましょう。
• 容量のための低すぎる画質。 画質60以下は汚れとねむさを出し、特にテキストやロゴで顕著です。写真の最適域は75〜85。
• 透明なPNGのJPEGへの置換。 JPEGは透明を扱えず、背景が白くなります。透明画像には可逆のWebPかAVIFを使いましょう。
• フォールバックの欠如。 pictureタグなしでAVIFだけを置くと、一部のユーザーに画像の穴が空きます。
• メタデータの見落とし。 EXIFは余計な容量を引きずり、時に位置情報を晒します。公開前にデータは掃除すべきで、そのためのEXIF除去があります。

課題がフォーマットより広ければ、当社のセットには隣接ツールがあります。必要な比率への写真トリミング、著作権保護の透かし、元素材が小さいときの解像度拡大です。

オンラインコンバーターは課題の9割を片づけます。十数枚の写真をWebPに変え、バナーを圧縮し、記事用の画像を準備する。しかし当社に任せたほうが得なケースもあります。第一に大規模カタログ。数百〜数千の商品写真があり、単に変換するだけでなく背景の切り抜き、グリッドへの整列、影の追加、インフォグラフィックが要るとき。ここでは1クリックの速さより、品質を落とさない手作業のパイプラインが重要で、当社は写真の切り抜きとマーケットプレイス向けインフォグラフィックを統一感を持ってライン全体に施します。第二に難しい元素材。白飛び、濁り、悪い光でスマホ撮影されたカットで、変換前に色とシャープさを引き出さねばならず、そうしないと軽いフォーマットが不良を固定するだけになるとき。第三に、量産で安定した結果が要り、pictureタグ、フォールバック、画質設定に取り組む時間がないとき。当社がそれを引き受け、あなたのサイト向けの完成セットを渡します。

まとめましょう。WebPはJPEGより約25〜35%、AVIFは40〜50%軽く、どちらもほぼ全ブラウザがすでに対応します。画像を現代フォーマットに変えることはLCPと他のCore Web Vitalsを直接改善し、検索順位を助け、直帰を減らし、コンバージョンを上げます。自社サイトにはAVIF、WebP、JPEGの連鎖を持つpictureを使い、軽さと互換性の両方を得ます。マーケットプレイスと公的ポータルには必要な容量のJPEGを残します。画質を犠牲に最小サイズを追わず、画質を75〜85の域に保ち、EXIFを掃除しましょう。そして何より、先延ばししないこと。効果は今すぐ確かめられます。写真をWebPとAVIFのコンバーターにアップロードすれば、1分でページがどれだけ軽くなるか分かります。

画像を変換するだけでは足りず、全員のところでサイトが開くよう接続することが重要です。現代のアプローチは複数のソースを持つpictureタグです。ブラウザが理解できる最も軽いフォーマットを自分で選び、新しいものを理解しなければ予備のJPEGを取ります。方式は単純で、まずAVIFのsource、次にWebPのsource、最後に信頼できる予備として通常のJPEGのimgを指定します。

こうすれば新しいブラウザの訪問者は軽いAVIFを、少し古いブラウザではWebPを、ごく古いものやまれなクライアントではJPEGを見て何も壊れません。元のJPEGは削除しないこと。フォールバックとして必要です。多くのエンジンやプラグインはブラウザに応じてフォーマットを即座に差し替え、WebPを自動で配れます。これは大規模サイトに便利です。肝心なルール。新フォーマットは高速化すべきで、一部の観客で画像表示を壊してはならず、だから予備は必須です。

WebPとAVIFは同じ課題を別の方法で解決します。WebPはJPEGより目に見えて軽く、現行のほぼ全ブラウザが対応し、速くエンコードされる、今日の信頼できる実用的な選択です。AVIFはさらに強く圧縮し、特に滑らかなグラデーションの写真で効き、少ない容量でより良い画質を出しますが、エンコードは遅く、ごく古いブラウザでの対応はやや劣ります。

実務的な選択はこうです。最大の互換性と手軽さが要れば、画質約80%のWebPを取ります。これだけでJPEG比マイナス30〜40%の容量を、目に見える差なしに得られます。極限の速さを追い、少し複雑な設定も厭わないなら、画質約50〜60%のAVIFを最初のソースに加えます。その画質スケールはずれていて、この値でも優れた絵を出します。最適なのはpictureで両フォーマットを配ることで、各ブラウザが扱える最良を受け取ります。容量のために画質をゼロまで絞らないこと。節約がシャープさの喪失に見合わなくなります。

新フォーマットは自社サイトでは優秀ですが、問題を招く場所もあります。マーケットプレイスは商品写真をJPEGとPNGで受け入れ、WebPとAVIFはアップロードで対応しないことが多いので、商品ページはJPEGで準備します。公的サービス、書類、多くの公式フォームもJPEGかPNGを求めます。知人へのメッセンジャーやメールでの写真送付もJPEGのほうが安全で、全員のところでWebPが開くとは限りません。

もう一つの注意点は、その後の編集と印刷です。すべてのエディタや印刷所がAVIFと相性が良いわけではないので、これらの用途には元素材を馴染みのフォーマットで持っておきます。単純なルール。WebPとAVIFは、接続とフォールバックを自分で制御する自社サイトの訪問者への画像配信用、外部システムや人へ渡すものはすべてJPEGかPNGで。そうすれば速さが重要な場所で速さを、互換性が重要な場所で互換性を得られます。

• 予備のJPEGがない。 画像を新フォーマットだけで配り、一部の訪問者で読み込めません。常にpictureでフォールバックを残します。
• マーケットプレイスへのWebPアップロード。 プラットフォームがフォーマットを受け付けず、商品ページが失敗します。マーケットプレイスにはJPEGとPNGだけ。
• 極端な圧縮。 容量のため画質を底まで絞り、アーティファクトが出ます。WebPは約80%の妥当なバランスを保ちます。
• ねむい元素材からの変換。 新フォーマットはすでに損なわれた写真を良くせず、より軽く保つだけです。高画質のオリジナルから変換します。
• 二重圧縮。 過圧縮のJPEGをWebPに移し、アーティファクトの上にアーティファクトを重ねます。最高画質の元素材から進めます。

WebPはJPEGよりどれだけ軽い？

同程度の画質でWebPは通常JPEGより25〜35%軽く、AVIFはさらに軽いです。大規模サイトではこれが読み込みを目に見えて速め、速度指標を改善します。

全ブラウザがWebPを開ける？

Chrome、Firefox、Safari、Edgeの現行版はほぼすべてWebPに対応します。AVIFはごく古い版で対応がやや劣るので、予備のJPEGはやはり必要です。

WebPは検索順位を上げる？

フォーマット自体は直接ランキングしませんが、サイトを速め、速度はランキングと使いやすさの要因です。速いページはよくインデックスされ、訪問者を留めます。

WebPをマーケットプレイスにアップロードできる？

いいえ、マーケットプレイスはJPEGとPNGを求めます。WebPとAVIFは自社サイトで使い、商品ページは対応フォーマットで準備します。

ネットショップにとって読み込み速度は直接のお金です。待ち時間が1秒増えるごとにコンバージョンが下がり直帰が上がり、弱い回線のモバイル訪問者はただ離れます。画像は通常ページの重さの大半を占めるため、カタログのWebPやAVIFへの変換が最も目立つ速度向上を生みます。より軽い画像は速く読み込まれ、購入者の通信量を節約し、サーバー負荷を下げます。これはセールのピーク時に重要です。

これは自社ショップのサイトで、予備JPEGつきの自動WebP配信で導入し、画像が全員のところで開くようにします。混同しないことが重要です。話はまさに自社サイトのことで、写真を従来どおりJPEGでアップロードするマーケットプレイスの商品ページのことではありません。つまり同じ商品を、自社ショップの訪問者には速さのため軽いWebPで、マーケットプレイスには互換性のためJPEGで渡します。この二重基準は正常で、両世界の良いとこ取りを与えます。速い自社サイトと、プラットフォームに受理される商品ページです。

WebPを設定するだけでは足りず、ブラウザが本当に軽いバージョンを受け取っていて古いJPEGでないことを確かめるべきです。これはブラウザの開発者ツールで簡単に確認できます。ページを開き、F12を押し、Networkタブに移り、ページを更新して読み込まれた画像を見ます。タイプの列かファイル名にjpegでなくwebpかavifと表示されるはずです。まだJPEGなら、フォーマットの差し替えが効いておらず設定を直す必要があります。

2つ目の目安は同じタブでのファイルサイズです。WebP版は元のJPEGより目に見えて軽いはずです。速度チェックのサービスにページを通すのも役立ちます。画像をより現代的なフォーマットで配れる場合を直接指摘し、潜在的な節約を示します。配信は対応次第なので複数のブラウザで確認し、新フォーマット非対応のブラウザで予備のJPEGが正しく読み込まれることを必ず確かめます。この確認は数分で済み、変換の作業全体が本当にサイトを速めていて死に荷になっていないことを保証します。

新フォーマットは写真を軽く圧縮するだけでなく、それ以上のことができ、用途を広げます。WebPもAVIFもPNGと同じく透明に対応するので、ロゴや透明背景の画像をWebPで配り、透明と軽さを同時に得られます。JPEGではこれはできません。サイトにとってこれは、以前は重いPNGで持っていた透明部分のあるグラフィックさえ、整った縁とどんな背景にも合う下地を保ったまま軽量化できることを意味します。

WebPはアニメーションもでき、旧式のGIFフォーマットのより軽い代替として働きます。アニメーションWebPはより良い画質と滑らかさで、数倍軽いです。これはサイトの小さなアニメーションバナーやアイコンに役立ちます。同時に予備を忘れないことが重要です。観客の一部が古いブラウザにいる可能性がある場所では、アニメーションと透明にもフォールバック、静止画ならPNGか別の対応フォーマットを残します。総じて、軽さ、透明、アニメーションを1つのフォーマットに束ねることが、WebPをウェブグラフィックの万能ツールにし、AVIFはそこにより強い写真圧縮を加えます。

WebPとAVIFへの一斉移行は、一部の訪問者で画像表示を壊さないよう慎重に進めるべきです。小さく始めましょう。1つのページテンプレートか1セクションを取り、予備JPEGつきのWebP配信を設定し、ブラウザのツールで軽いバージョンが本当に読み込まれ、古いブラウザで正しくJPEGが差し込まれることを確かめます。すべて動くと確認できて初めて、アプローチをサイト全体に広げます。元のJPEGは保存しておきましょう。フォールバックとして、また別のフォーマットやサイズで画像を再生成する必要が出たときの基礎として必要です。

大規模サイトでは各画像の手動変換は非現実的なので、通常はWebP版を自動生成し対応ブラウザに配り、残りにはJPEGを残すモジュールやプラグインを接続します。これは手作業をなくし、従来どおりJPEGをアップロードし続けるコンテンツ担当者にとって移行を透明にします。導入後は主要ページを速度チェックのサービスに通し、画像の重さが落ち読み込み指標が改善したことを確認します。予備フォーマットを必須とする段階的な移行が、誰かの訪問者から画像が消えるリスクなしに、速度の恩恵をすべてもたらします。