Eコマース商品ページの画像を最適化する方法 | Bulk Image Compressor
商品画像は物を売ります。買い物客が細部をはっきり見えなければ、購入しません。しかし、画像が大きすぎてページの読み込みが遅いと、画像の読み込みが完了する前に離脱してしまいます。このバランスを正しく取ることは、オンラインストアのためにできる最も実用的なことの1つです。
良いニュースは、品質と速度のどちらかを選ぶ必要がないことです。適切な圧縮設定とフォーマットを使えば、商品写真は画面上で鮮明に見えながら、どのデバイスでも高速に読み込まれます。
商品画像のサイズが重要な理由
典型的な商品ページには4〜8枚の画像があります：メイン写真、いくつかのアングル、詳細ショット、商品を使用している様子のライフスタイル画像。それぞれがカメラマンからの非圧縮4MBファイルの場合、ページあたり16〜32MBの画像になります。
商品ページの遅さは直接売上に影響します。Deloitteの調査によると、モバイルサイトの速度が0.1秒向上すると、小売サイトのコンバージョンが8.4%増加しました。Eコマースのページ速度における最大の要因は、ほとんどの場合画像です。
モバイル要因もあります。ほとんどのオンラインショッピングはスマートフォンで行われます。商品画像は高速Wi-Fiだけでなく、低速な携帯電話回線でも素早く読み込まれる必要があります。
白背景写真 vs ライフスタイル写真
これら2つのタイプの商品画像は、圧縮特性が異なります。
白背景の商品写真 は、Amazon、eBay、およびほとんどの商品一覧ページで見られるものです。通常、中央に商品があり、クリーンな白い背景があります。これらの画像は、広い範囲の無地の白がほとんどデータを必要としないため、非常によく圧縮されます。多くの場合、75〜80%のJPEG品質で圧縮しても、ほとんど違いは見えません。
ライフスタイル写真 は、実際の環境で商品を示しています。キッチンカウンターのコーヒーマグ、屋外のモデルが着用するジャケット、都市の歩道の靴。これらの画像は、さまざまな背景、テクスチャ、照明により、より視覚的な複雑さを持っています。詳細を維持するために、80〜85%程度のやや高い品質設定が必要です。
どちらのタイプもオリジナルよりも大幅に小さくなります。5MBの白背景商品ショットは、通常200〜400KBに圧縮されます。6MBのライフスタイル写真は300〜600KBに圧縮されます。
プラットフォームの要件と推奨事項
Eコマースプラットフォームごとに独自の画像ガイドラインがあります。主要なものの仕様は次のとおりです：
Shopify は2048 x 2048ピクセルの画像を推奨しています。最大ファイルサイズは20MBですが、画像をそれよりはるかに小さく保つことを強く推奨しています。Shopifyは自動圧縮を実行し、ブラウザがサポートしている場合はWebPを配信しますが、最適化された画像から始めるとより良い結果が得られます。
WooCommerce は独自のホスティングで実行されるため、厳格な制限はありません。つまり、画像の最適化は完全にあなたの責任です。デフォルトのサムネイルサイズはカタログ用が600 x 600、商品ページ用がフル画像サイズです。アップロード前にリサイズと圧縮を行う必要があります。
Amazon はズーム機能のために長辺に最低1000ピクセルを要求し、2000ピクセルを推奨しています。最大ファイルサイズは10MBです。メイン画像は純粋な白い背景（RGB 255, 255, 255）でなければなりません。Amazonは自社側で画像を圧縮しますが、すでに最適化された画像をアップロードすることで、最終結果をより細かく制御できます。
Etsy は短辺に2000ピクセルを推奨しています。最大1MBのファイルを受け付けます。Etsyの制限は比較的小さいため、アップロード前にほぼ確実に圧縮する必要があります。
推奨寸法とファイルサイズ
ほとんどのEコマースプラットフォームでは、実用的な目標は次のとおりです：
| 画像タイプ | 寸法 | 目標ファイルサイズ |
|---|---|---|
| メイン商品写真 | 2000 x 2000px | 200〜400KB |
| 別アングル写真 | 2000 x 2000px | 200〜400KB |
| 詳細/ズーム写真 | 2000 x 2000px | 250〜500KB |
| ライフスタイル写真 | 2000 x 1333px | 300〜600KB |
| サムネイル | 600 x 600px | 30〜60KB |
これらのサイズは、ページを高速に保ちながらズーム機能に十分な解像度を提供します。商品ページあたりの総画像読み込み量は、理想的には2MB未満に抑えるべきです。
適切なフォーマットの選択
JPEG は商品写真の標準です。写真をうまく処理し、どこでもサポートされています。デフォルトとして使用します。
WebP は、同じ視覚品質でJPEGより約25〜35%優れた圧縮を提供します。プラットフォームがサポートしている場合（Shopifyは自動的に、WooCommerceはプラグインが必要）、WebPは堅実なアップグレードです。フォーマットの詳細な比較については、JPEG vs PNG vs WebPガイドをご覧ください。
PNG は、商品画像に透過性が必要な場合にのみ必要です。たとえば、背景をまったく表示せずに商品を表示する必要がある場合、PNGはその透過性を保持します。そうでなければ、ファイルサイズがはるかに大きいため、商品写真にはPNGを避けてください。
商品カタログのバッチ処理
数十〜数百の商品があるストアの場合、画像を1枚ずつ圧縮するのは現実的ではありません。200商品で各5枚の画像があるカタログは、1,000枚の画像を処理することを意味します。
ここでバッチ圧縮が時間を節約します。Bulk Image Compressorを使用すると、商品画像のフォルダ全体をドロップして、すべてを一度に圧縮できます。すべてブラウザ内で実行されるため、商品写真が外部サーバーにアップロードされることはありません。これは、未公開の商品や、発売前に共有したくない画像を扱う場合に重要です。
商品カタログに適したワークフローは次のとおりです：
-
最初にリサイズする。 すべての画像を適切な寸法（ほとんどのプラットフォームで2000 x 2000px）にします。2000pxでしか表示されない画像を、6000pxのまま圧縮に送らないでください。
-
タイプ別に分ける。 白背景の写真を1つのバッチに、ライフスタイル写真を別のバッチに入れます。これにより、それぞれに異なる品質設定を使用できます。
-
白背景の写真を75〜80%品質で圧縮する。 クリーンな背景は低い設定でも効率的に圧縮されます。
-
ライフスタイル写真を80〜85%品質で圧縮する。 これらの画像の追加の詳細は、やや高い品質の恩恵を受けます。
-
いくつかの結果をスポットチェックする。 圧縮された画像をいくつか開き、オリジナルと比較します。パッケージのテキストが読み取れ、商品の詳細が明確であることを確認します。詳細については、品質を損なわずにファイルサイズを削減する方法のガイドをご覧ください。
-
プラットフォームにアップロードする。 オリジナルを圧縮バージョンに置き換えます。
収益への影響
商品ページの高速化は、より多くの売上を意味します。それほど直接的です。買い物客が検索結果や広告から商品をクリックしたとき、待つか戻るボタンを押すかの決定をするまでに約2〜3秒しかありません。
最適化された画像は、ホスティングとCDNのコストも削減します。月間50万回の商品ページビューがあり、平均画像ペイロードを1ページあたり8MBから1.5MBに削減した場合、それはテラバイト単位の帯域幅節約です。
商品写真はオンラインストアで最も重要なアセットです。適切に圧縮することで、買い物客が必要とする画質を維持しながら、実際の購入につながる高速な体験を提供できます。
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor