商品画像はオンラインで商品を触ることに最も近い体験です。購買決定を促しますが、同時に商品ページのページ速度を最も低下させる要因でもあります。画像は商品ページの総容量の50〜70%を占めることが多いです。
モバイルショッパーは現在ECトラフィックの70%以上を占めています。モバイル接続は4G/5Gでもブロードバンドより不安定です。
速度以外にも、画像最適化はGoogleのCore Web Vitals、特にLCP(最大コンテンツの描画)に直接影響します。
| 推奨サイズ | 2048×2048 px(正方形、1:1) |
| 最大ファイルサイズ | 1枚あたり20 MB |
| 対応フォーマット | JPEG、PNG、GIF、WebP |
| 推奨フォーマット | WebP(自動変換)またはJPEG 80% |
| ズーム有効化の最小値 | 最長辺1000 px以上 |
| 推奨サイズ | 2000×2000 px(正方形) |
| 最大ファイルサイズ | 10 MB |
| 背景要件 | メイン画像は純白背景(RGB 255,255,255) |
| 対応フォーマット | JPEG、PNG、TIFF、GIF |
| 推奨サイズ | 最短辺2000 px |
| 対応アスペクト比 | 5:4がリスト表示で最も良い |
| 最大ファイルサイズ | 1枚あたり1 MB |
| 対応フォーマット | JPEG、PNG、GIF、WebP |
| 推奨サイズ | 800〜2000 px(テーマによる) |
| 固定ファイルサイズ制限なし | ホスティングサーバーで設定(通常2〜8 MB) |
| 対応フォーマット | JPEG、PNG、WebP、GIF |
| 画像タイプ | 最適フォーマット | 理由 |
|---|---|---|
| 商品写真(白背景) | JPEG 80〜85% | 最小サイズ、汎用的なサポート |
| 透過背景の商品 | PNGまたはWebP | 切り抜き用アルファチャンネル |
| ライフスタイル/シーン写真 | JPEGまたはWebP | 良好な色再現;WebPは30%小さい |
| インフォグラフィック/テキスト重ね | PNGまたはWebP | テキストエッジが鮮明;JPEGアーティファクトを回避 |
| アニメーションデモ | WebPまたは動画 | GIFより大幅に小さい;長いクリップは動画 |
新しいリストやコレクション向けに10〜50枚の商品写真を準備する場合:
スクロール下の商品画像すべてに loading="lazy" を追加してください。
透過背景のない商品写真には、品質80〜85%のJPEGが最も安全なデフォルトです。WebPはページ速度で優れており(同品質で30%小さい)、Shopifyは完全サポートしています。
Amazonはズームを有効にするために最長辺1000 px以上が必要です。正方形画像の推奨サイズは2000×2000 pxです。ファイルサイズは10 MB未満に保ってください。
Googleの調査では、モバイルのページ読み込みが1秒遅れるとコンバージョンが最大20%低下する可能性があることが示されています。画像は通常ページ容量の50〜60%を占めます。