大きな画像が問題であることは多くのEC運営者が知っています。しかし、それを緊急の売上問題として扱う人は少ないです。GoogleとDeloitteの調査が数字を示しています。ページ読み込み時間が100ms増えるごとに、小売サイトのコンバージョン率は約1%低下します。月商100万円のサイトでは、1秒の遅延が年間約12万円の売上損失を意味することがあります——画像だけが原因で。本ガイドでは、ファイルサイズ目標、エクスポート設定、技術的な修正、そして10分以内に問題を発見できる簡易監査について説明します。
研究データ：速度とコンバージョン
ページ速度と売上の関係は十分に実証されています。2019年のGoogleとDeloitteの調査では、37のリテールおよび旅行サイトを分析した結果、モバイルページ速度が0.1秒改善されるとコンバージョン率が平均8%向上することがわかりました。小売サイトでは同じ速度改善により平均注文額が10%改善しました。Core Web Vitalsに関する最新のGoogleデータでは、LCPが「良好」（2.5秒未満）の閾値を満たすページは測定可能なほど高いコンバージョン率を達成することが示されています。
ほとんどの商品ページで読み込みが遅くなる最大の要因は画像です。購入者がメイン画像を通り過ぎてスクロールする前に3MBの未最適化画像を読み込むページは、機会損失を生んでいます。
ファイルサイズ目標：達成すべき数値
普遍的なルールはありませんが、ECサイトの商品ページに関する業界基準は一貫しています：
- メイン商品画像（スクロールなしで見える範囲）：100KB未満が理想的；200KBが許容上限です。200KBを超えると、LCPに測定可能な影響が出ます。
- ギャラリー画像（スクロールが必要な範囲）：それぞれ200KB未満。適切に設定されたサイトでは遅延読み込みされるため、メイン画像ほど重要ではありませんが、ギャラリーの合計重量はページ全体の転送サイズに影響します。
- Web表示画像の絶対最大値：500KB。商品ページに500KBを超える画像を定期的に公開している場合、他のコンバージョン改善作業より先に最適化に取り組むべきです。
これらの目標は、目に見える品質の低下なしに達成できます。当社の画像ウェブ最適化サービスは、大規模なカタログを持つショップのために、これを大量処理します。
フォーマット比較：WebP、JPEG、PNG
フォーマットの選択はファイルサイズに大きく影響します。商品写真における各フォーマットのトレードオフの詳細については、ECサイト向けWebP vs JPEG vs PNGのガイドをご覧ください。ページ速度に関する簡単なまとめ：
- WebPはWeb商品画像に最適です。同等の視覚品質でJPEGより25〜34%小さいファイルを実現し、透過性もサポートします。2020年以降、すべての主要ブラウザがサポートしています。
- JPEGは信頼性の高いフォールバックです。知覚的な読み込みを速くするためにプログレッシブJPEGエンコーディングを使用します。品質設定75〜85は、品質95〜100よりも大幅に小さいファイルサイズで、ほぼ見分けがつかない結果を生み出します。
- PNGは透過性が本当に必要な画像に限定すべきです。写真コンテンツにおいて、PNGファイルは一貫してJPEGより大きくなります。透過性を必要としない商品写真にPNGをアップロードすることは、ECサイトで最もよくあるファイルサイズの間違いの一つです。
Photoshopからの正しいエクスポート方法
Photoshopの「書き出し形式」ダイアログは、出力品質とファイルサイズを完全に制御できます。Web商品画像にはこれらの設定を使用してください：
- フォーマット：JPEG（またはワークフローがサポートする場合はWebP）。写真の商品画像にはPNGを避けてください。
- 品質：Photoshopのスケールで8〜10（80〜100%）が多くのレタッチャーが使用する範囲です。品質8（80%）はWeb表示サイズで品質10（100%）と見分けがつきませんが、ファイルは40〜60%小さくなります。品質8から始め、100%ズームでプレビューを確認してください。
- プログレッシブエンコーディング：JPEGの「プログレッシブ」を有効にしてください。プログレッシブJPEGは残りが読み込まれる間、ほぼ瞬時に低解像度版の画像をレンダリングします。これにより知覚的な読み込み速度が大幅に改善します。
- 解像度：Webには72ppiを使用してください。300dpiの画像を72dpiで表示すると、視覚的なメリットなしにファイルサイズが増加します。
- サイズ：エクスポート前に実際の表示サイズにリサイズしてください。サイトで1500×1500pxで表示される商品画像は、6000×6000px以上の元の撮影解像度ではなく、1500×1500pxでエクスポートすべきです。
してはいけないこと
ECサイトで最もよくあるファイルサイズの間違いは、マーケットプレイスの印刷やフルフィルメントワークフロー用に送る同じファイルをそのままウェブサイトにアップロードすることです。AmazonなどはDPI 300で3000×3000px以上のTIFFファイルを要求します——時にはファイルあたり10〜20MBです。Photoshopなどのレタッチソフトから専用のWeb版を必ずエクスポートしてください。AmazonやID印刷用の納品ファイルをウェブサイトのファイルとして使用しないでください。
Next.js Imageコンポーネントと遅延読み込み
ストアフロントがNext.jsで動作している場合、組み込みのImageコンポーネントが自動的にいくつかのページ速度問題を解決します：
- 自動フォーマット変換：Next.jsはサポートするブラウザに自動的にWebPを配信し、古いブラウザにはJPEGにフォールバックします——手動エクスポートステップなしで。
- 自動リサイズ：画像はレイアウトで定義された表示サイズにリサイズされます。
- 遅延読み込み：ビューポート外の画像は、ユーザーがスクロールするまで読み込まれません。これにより、LCPに影響する初期ページ重量が削減されます。
- 優先読み込み：メイン商品画像に
priorityプロップを追加してプリロードしてください——この画像がLCPスコアを決定し、他のリソースを待たずに読み込まれる必要があります。
Next.jsを使用していない場合、同等の方法はギャラリー画像にHTML属性loading="lazy"を使用し、レイアウトシフトを防ぐために明示的なwidthとheight属性を設定することです。
CDN：画像配信レイテンシをどのように削減するか
コンテンツデリバリーネットワーク（CDN）は、世界中に分散したサーバーに画像のコピーを保存します。シドニーの購入者がロンドンでホストされている商品ページを読み込むと、そのブラウザはヨーロッパへの往復ではなく、オーストラリアのCDNノードから画像を取得します。レイテンシの削減は大きく、国際リクエストでは多くの場合200〜400msです。主要なECプラットフォーム（Shopify、BigCommerce、VercelでホストされたNext.js）はデフォルトで画像のCDN配信を含んでいます。セルフホスト型のWooCommerceやMagentoはそうでないことが多く、CDN（Cloudflare、BunnyCDN、AWS CloudFront）の追加は最も投資対効果の高いパフォーマンス改善の一つです。
Core Web Vitals：LCPと商品画像
GoogleのCore Web Vitalsは、画像パフォーマンスをオーガニック検索ランキングに直接結びつける技術指標です。商品ページで最も関連性が高いのはLargest Contentful Paint（LCP）——ナビゲーションから最大の可視要素がレンダリングを完了するまでの時間です。商品ページでは、その要素はほぼ常にメイン商品画像です。
LCPの閾値：
- 良好：2.5秒未満
- 改善が必要：2.5〜4.0秒
- 不良：4.0秒超
「良好」の範囲にあるページは、Google検索結果でより良い位置付けを受けます。メイン商品画像のサイズが大きすぎることは、ECサイトの商品ページでLCPスコアが悪い最も一般的な原因です。
簡易監査：Chrome DevToolsで画像サイズを確認する方法
Chrome DevToolsを使えば、5分以内に商品ページの画像を監査できます：
- 監査したい商品ページを開き、F12を押してDevToolsを開きます。
- ネットワークタブをクリックし、Ctrl+Shift+Rでページを再読み込みします（キャッシュを無効にしたハードリロード）。
- フィルターバーに
Imgと入力して、画像リクエストのみを表示します。 - サイズ列には実際に転送されたバイト数が表示されます。サイズ降順に並べ替えて最大の画像を見つけます。
- サイズ列で200KBを超える画像はすべて再エクスポートが必要です。メイン商品画像が100KBを超えている場合は、最初に対処すべき項目です。
画像最適化をアウトソースするタイミング
数百または数千のSKUを持つカタログを抱えるショップでは、すべての画像を手動で再エクスポートすることは現実的ではありません。当社の画像ウェブ最適化サービスは商品画像ライブラリのバッチ処理を担当し、WebPおよびJPEGフォーマットで、メタデータを削除し、上記の目標内のファイルサイズで、Webレディファイルを配信します。Google PageSpeed Insightsのスコアが常に「改善が必要」または「不良」の範囲にあり、画像が主な原因として特定されている場合は、無料サンプルバッチのために5枚無料でお試しください。
