Image Optimization for SEO: Complete Guide — pic0.ai

3年前、クライアントのオーガニックトラフィックが一晩で47%も減少するのを見ました。その原因は？善意の開発者がサイトのリデザイン中に、最適化されたすべての画像を高解像度のバージョンに置き換えたからです。代替テキストの更新もなし。圧縮もなし。レイジーローディングもなし。美しく、大きく、SEOを殺す画像が彼らのCore Web Vitalsを打撃し、ランキングを急降下させました。

私はマーカス・チェンです。過去11年間、サイトパフォーマンス最適化を専門とするテクニカルSEOコンサルタントとして働いてきました。300以上のウェブサイトを監査してきましたが、私は絶対的な確信を持って言えます：画像最適化は現代SEOで最も過小評価されているランキング要因です。誰もがバックリンクやキーワード密度に執着する一方で、画像は通常のウェブページで平均21MBを占めています—これはHTTP Archiveデータによると、総ページ重量の約50%です。

画像とSEOの関係は、ファイルサイズだけではありません。それはユーザー体験、クロール効率、アクセシビリティ、そして yes、画像検索結果での直接的なランキングに関することでもあります。Google Imagesはすべてのウェブ検索の22.6%を占めていますが、ほとんどのビジネスは画像最適化を考慮に入れません。これは大きな機会損失であり、このガイドではその機会を最大限に活用する方法をお見せします。

なぜ2026年に画像最適化がこれまで以上に重要なのか

率直に言わせてください：Googleのアルゴリズムはこの3年間で劇的に進化しました。ページエクスペリエンスのアップデート、Core Web Vitals、そしてモバイルファーストインデックスへの重点の増加は、画像がランキングに与える影響を根本的に変えました。2013年にSEOを始めた頃は、コンテンツが十分に強ければ膨大な画像でも問題なかったのですが、その時代は終わりました。

データが私たちに何を教えているか見てみましょう。Google自身の調査によると、モバイルユーザーの53%が3秒以上読み込みに時間がかかるサイトを放棄します。画像が遅い読み込み時間の主な原因です。最近150のeコマースサイトを分析したところ、適切に最適化された画像はLargest Contentful Paint (LCP)を平均2.3秒改善しました。これは、バウンスとコンバージョンの違いです。

しかし、速度は唯一の要因ではありません。画像検索は正当なトラフィックチャンネルになっています。あるクライアントはホームデコール分野で、Google Imagesから34%のオーガニックトラフィックを得ています。彼らは12,000以上の画像特有のクエリでランクを獲得し、3.2%でコンバージョンする有資格のトラフィックを促しています—これはテキスト検索のコンバージョン率よりも高いです。これは偶然の結果ではなく、体系的な画像最適化を通じて実現されました。

アクセシビリティの観点も同様に重要であり、しばしば見過ごされがちです。記述的な代替テキストを備えた適切に最適化された画像は、検索エンジンがあなたのコンテンツを理解するのを助けるだけでなく、視覚障害を持つ22億人の人々があなたのサイトを利用できるようにします。Googleは明示的にアクセシビリティがランキング要因であり、代替テキストはアクセシブルなウェブデザインの基本要素であると述べています。

次に、クロール予算の考慮があります。ページ数が数千ある大規模なサイトを運営している場合、1KBの無駄も許されません。Googleはサイトに有限のクロール予算を割り当てており、もしGooglebotが巨大で最適化されていない画像のダウンロードに時間を費やしていると、重要なコンテンツページをクロールしていないことになります。私はエンタープライズサイトが適切な画像最適化プロトコルを実装することで、クロール効率を40%向上させるのを見たことがあります。

画像ファイル形式の理解：技術的基盤

フォーマットについて語りましょう。正しいものを選ぶことは他のすべての基盤となります。私は数百のユースケースで全ての主要な画像フォーマットをテストしましたが、WebPやAVIFのような現代のフォーマットの導入により、景色は大きく変わりました。

"Google Imagesはすべてのウェブ検索の22.6%を占めていますが、ほとんどのビジネスは画像最適化を考慮に入れません。これは大きな機会損失です。"

JPEGは写真や複雑な多色画像のワークホースとして残っています。ロスのある圧縮を使用しており、つまり、ファイルサイズを小さくするためにいくらかの品質を犠牲にします。私のテストでは、80%品質で圧縮されたJPEGは、ほとんどのユーザーにとって元のものと視覚的に区別がつきませんが、ファイルサイズは60-70%小さくなることができます。私は通常、商品写真、ヒーロー画像、および良好な色深度を必要とするあらゆる写真コンテンツにJPEGを推奨します。

PNGは、透明度やシャープなエッジを必要とする画像のためのスタンダードです—ロゴ、アイコン、スクリーンショット、テキストのあるグラフィックなどです。PNGはロスレス圧縮を使用しているためファイルサイズは大きくなりますが、品質は完璧に保持されます。私は制限された色の単純なグラフィックにはPNG-8を使用し（PNG-24と比較してファイルサイズを最大70%削減できる）、完全な色深度が必要な場合はPNG-24を使用します。

WebPは私が最も楽しみにしているフォーマットです。Googleによって開発され、ロスのある圧縮とロスレス圧縮の両方、さらに透明度とアニメーションをサポートします。私の比較テストでは、WebP画像は通常、同等のJPEGよりも25-35%小さく、PNGよりも26%小さく、品質の損失はありません。ただし、注意点があります。ブラウザのサポートは96%ですが、普遍的ではありません。後で説明するフォールバック戦略が必要です。

AVIFは最新のフォーマットで、WebPよりもさらに優れた圧縮を提供します—私のテストでは、同じ品質レベルで約20%小さいです。特に高解像度画像には印象的です。しかし、ブラウザのサポートはまだ限られており（2024年初頭時点で約86%）、エンコード時間は大幅に長くなります。私は、追加の圧縮が本当に重要な高トラフィックページでAVIFを推奨しますが、常にWebPとJPEGのフォールバックを用意します。

SVGはロゴ、アイコン、および単純なイラストに特に言及されるべきです。ベクターフォーマットとして、SVGは無限にスケール可能で、品質の損失がなく、通常は小さなファイルサイズです。私はインターフェース要素に可能な限りSVGを使用します。あるクライアントは、340KBのアイコンスプライトシートをPNGからSVGに変更し、89KBにすることで、すべての画面サイズにわたって完璧なスケーラビリティを実現しました。

実際に機能する圧縮戦略

圧縮は多くの人が間違える部分です。彼らは圧縮をまったく行わないか、圧縮しすぎて画像がひどく見える状態になります。何年ものテストを経て、私は品質とファイルサイズのバランスを取る体系的なアプローチを開発しました。

ロスのある圧縮（JPEG、WebP）については、私は80/20ルールに従います：品質80%に圧縮することで、通常はファイルサイズを60-70%削減でき、目に見える品質の損失は最小限です。80%未満では、特にグラデーションや細かい詳細がある領域で、目立つアーチファクトを見るようになります。80%を超えると、視覚的品質の減少に対してファイルサイズが増加することになります。私はImageOptim、Squoosh、またはpic0.aiなどのツールを使って、この品質レベルで画像をバッチ処理します。

PNGのロスレス圧縮は譲れません。pngquantやOptiPNGなどのツールは、カラーパレットを最適化し、不要なメタデータを削除することにより、PNGファイルのサイズを40-70%削減できます。私は展開前にすべてのPNGをロスレス圧縮します。あるeコマースクライアントは、平均890KBの3400の製品画像を持っていました。ロスレスPNG圧縮の後、平均は340KBにまで減少し—品質への影響はゼロで62%削減されました。

レスポンシブ画像には異なる戦略が必要です。私は異なる解像度でそれぞれの画像の複数のバージョンを作成し、ユーザーのデバイスとビューポートに基づいて適切なサイズを提供します。モバイルユーザーは2400pxの幅のヒーロー画像を必要としません。私は通常、320px、640px、960px、1280px、1920px、および2560pxの幅でバージョンを作成し、その後srcset属性を使用してブラウザに選ばせます。これだけで、モバイルデバイス上で画像のペイロードを70-80%削減できます。

メタデータの削除は、しばしば見過ごされがちな最適化です。EXIFデータ、カラープロファイル、その他のメタデータは、各画像に10-30KBを追加することがあります。特にこのデータが必要でない限り（ウェブ画像には珍しい）、削除するべきです。私はExifToolやImageMagickなどのツールを使用して、メタデータをバッチで削除します。5000の画像を含むサイトでは、合計ページ重量で50-150MBを節約できることがあります。

プログレッシブJPEGは、UXの最適化で、知覚されるパフォーマンスにも役立ちます。ベースラインJPEGが上から下へ読み込まれるのに対して、プログレッシブJPEGは複数のパスで読み込まれ、早い段階で低品質バージョンを表示し、その後徐々にシャープになります。実際の読み込み時間が似ていても、ページは速く感じられます。私は10KBを超えるJPEGをすべてプログレッシブフォーマットに変換します。