Eコマース 画像最適化 2026：高速化、WebP導入と売上向上

最終更新日: June 28, 2026

eコマースの画像における基準は容赦がありません。製品を売り出すだけでなく、スマートフォンで1秒足らずに読み込まれなければなりません。私は今年、いくつかのストアの画像パイプラインを最適化しましたが、パターンは常に同じです。ヒーロー写真はページ上で最大の要素であり、それがページの遅さの原因となっていることがほとんどです。

簡単な回答：2026年におけるeコマース画像最適化に必要なものは？

製品ごとに高解像度のマスターファイルを1つ用意し、ページが実際に表示するサイズでWebPバージョンをエクスポートします。圧縮する前にリサイズを行い、製品名を記載したalt textを記述し、ファーストビューの下にある要素はすべて遅延読み込み（lazy-load）させます。そして、ラップトップではなく、実際のスマートフォンでPageSpeed Insightsを使って結果を測定してください。

この作業全体は、5つの反復可能なステップに分けられます。

1. 製品ごとにシャープで均一な照明のマスターファイルをキャプチャする。
2. ページがレンダリングする最大の幅にリサイズする。
3. 品質80から82でWebPに圧縮し、JPEGは必要なチャンネルのみに残す。
4. 製品名と目に見えるディテールを記載したalt textを追加する。
5. パブリッシュし、スマートフォンでライブページを開き、高速に読み込まれることを確認する。

キャプチャの半分（照明、角度、背景、一貫性）については、eコマース製品写真撮影で解説しています。この記事は2026年の配信側の側面です：フォーマット、レスポンシブマークアップ、遅延読み込み、alt text、Core Web Vitals、およびCDNについてです。

画像の重さがストアがそもそも読み込まれるかどうかを決定する理由は？

一般的な製品ページでは、画像がブラウザがダウンロードするバイト数の60%から80%を占めます。私は、ヒーロー画像がカメラからそのままの2.4 MBのJPEGであったShopifyクライアントを測定したところ、JavaScriptが実行される前にページ全体で6.1 MBが送信されていました。

最も早くできる修正は、画面が表示できないピクセルを送り出すのをやめることです。375 px幅のサムネイルを表示するスマートフォンには、6000 pxのオリジナルは必要ありません。レンダリングする最大の幅にリサイズし、その後に圧縮を行う—この順序が重要です。先に圧縮してしまうと、捨てることになるメガピクセルを保持できなくなります。

重さを大幅に減らすための習慣をいくつか紹介します：

• 製品ごとにマスターファイルを1つ用意し、カメラのオリジナルをページ上に絶対に使用しない。
• 表示幅に合わせてリサイズしてから、圧縮を行う。
• WebPに変換し、JPEGは必要なチャンネルのみ残す。
• ファーストビューの下にあるすべてを遅延読み込みさせ、ヒーロー画像を最初にロードさせる。

2026年、どの画像フォーマットで配信すべきですか？

2026年において、独自のストアフロントのデフォルトはWebPです。同じ視覚品質であればJPEGよりもサイズが小さく、現在では主要なすべてのブラウザでサポートされています。AVIFはさらに小さいですが、エンコードに時間がかかり、古いCMSテーマでは不安定なため、私はこれをベースラインではなく進歩的な強化（progressive enhancement）として扱います。

マーケットプレイスは依然として厄介な要求をしてきます。AmazonとGoogle Shoppingのフィードは、特定のサイズでのJPEGまたはPNGを期待しており、一部ではWebPを完全に拒否します。WebPと一緒に、チャネルごとにJPEGエクスポートも保持してください。GoogleのMerchant Center product image specificationには正確なサイズ、比率、背景ルールが記載されており、フィードの不承認は通常、埋め込まれた透かしや間違ったサイズに起因します。

生地が安っぽく見えるようになる手前でどれだけ小さくなれるかを決める圧縮のトレードオフについては、画像を品質を失わずに圧縮する方法を参照してください。

レスポンシブ画像と遅延読み込みはCore Web Vitalsをどのように保護しますか？

メインの商品写真はほぼ常にLargest Contentful Paint (LCP) 要素であり、これがストアの速度スコアにおける最大のレバーとなります。私はあるクライアントのヒーロー画像を2.4 MBのJPEGから表示幅の140 KBのWebPに変更し、モバイルのLCPが3.8 sから1.5 sに低下するのを確認しました。

LCPとCumulative Layout Shift (CLS)を最も改善させる習慣は以下の3つです：

• srcsetを通じて、実際に表示されるサイズを提供する。
• レイアウトがジャンプしないよう、明示的なwidthとheightを設定する。
• ファーストビューの下にある要素は遅延読み込みさせ、ヒーロー画像は高いフェッチ優先度（high fetch priority）で即時ロードさせる。

<img
  src="backpack-1200.webp"
  srcset="backpack-600.webp 600w, backpack-1200.webp 1200w, backpack-2000.webp 2000w"
  sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 2000px"
  width="1200"
  height="1200"
  loading="eager"
  fetchpriority="high"
  alt="Olive canvas backpack with brown leather straps, front view">

web.devでは、Fast load timesガイドに完全な画像が記載されており、PageSpeed Insightsで実際のデバイスの結果を確認できます。パブリッシュした後、ローカルプレビューではなくライブの製品ページをテストしてください—CDNキャッシュやサードパーティースクリプトによって数値は変わります。

製品のalt textは具体的に何を書くべきですか？

Alt textは、スクリーンリーダーと画像クローラーが受け取る唯一のシグナルであるため、製品の場合はアイテム名と購入者が気にするディテールを一つ記載する必要があります。具体的かつ、それ以上は書かないようにしてください。

• 良い例：「Olive green canvas backpack with brown leather straps, front view.」
• 弱い例：「backpack, bag, rucksack, travel bag, best backpack.」
• 空の例：「product photo」、「image」、または「IMG_4471」のような生のファイル名。

ファイル名も同じように命名してください：olive-canvas-backpack-front.webpは、画像検索においてIMG_4471.webpよりも優位です。SKUが数百に及ぶ場合は、製品タイトルと角度を組み合わせてalt textを作成し、カタログ全体で一貫性を保ってください。

詳細を崩さずにカタログ全体を一括最適化するにはどうすればよいですか？

写真を一つずつ手作業で行うべきではありません。私は、マスターファイル1つ、固定のエクスポートサイズセット、そしてリサイズ、WebP変換、リネームを行うバッチステップを単一のパスで実行します。バッチをパブリッシュする前に、5つの製品を100%ズームで目視確認してください。

アスペクト比が不規則な場合やチャネル固有のクロップがある場合は、リサイザーとコンバーターを介してバッチ処理を行うことで、4:5のShopifyヒーロー画像と1:1のAmazonショットが、再撮影するのではなく、同じマスターファイルから生成されます。

実際にストアで測定した結果は？

今年作業した320製品のShopifyストアからの具体的な数値です。写真もカタログも同じですが、変更されたのは画像パイプラインだけです。

リバウンド率の低下がすべて画像によるものだと主張しているわけではありません。私は変数を一つずつ変更し、出荷されたストアは同じだったので、速度の向上こそが最も明確な説明となります。LCPが速くなる傾向はコンバージョンを改善しますが、数値はご自身で測定したストアでのみ確定できます。

ストアチームのための週次チェックリスト

最適化は一度きりのものではありません。画像は経年劣化します。新製品がフルカメラサイズで入荷したり、マーケティングバッジがヒーローに焼き付けられたり、バリアントが異なるクロップで撮影されたりすることがあります。売れ筋商品については毎週これを確認してください：

• カメラオリジナルサイズのファイルがないか、ヒーロー画像を再確認する。
• すべての画像がWebPであり、目標の重さ以下であることを確認する。
• レイアウトがシフトしないよう、widthとheightが設定されていることを検証する。
• 最新の10製品についてalt textを目視チェックする。
• 製品ページをスマートフォンで開き、PageSpeedテストを実行する。
• 透かしや販促バッジが焼き付けられたヒーローは却下する。

CDN側—つまり画像がキャッシュされ、オンザフライでリサイズされ、購入者に近いエッジから配信される部分—については、the image CDN guideがセットアップ手順を解説しています。仕様、速度、売上を結びつけるより広い視点については、eコマース画像最適化ガイドがこの記事の2026年版の補完資料となります。

正直な注意点として、web.devおよびすべての最新ブラウザは2026年にWebPをサポートしていますが、少数のレガシーなアプリ内チェックアウトビューや古い組み込みデバイスは依然としてJPEGにフォールバックします。JPEGフォールバックを削除する前に、実際の顧客のデバイス構成に対してテストを行うか、購入しようとした瞬間にヒーロー画像が壊れているのを見る可能性があります。

画像クレジット

• ラップトップでオンラインで服を購入している人。テーブルの上に財布がある — photo by Andrea Piacquadio on Pexels
• ラップトップでオンラインの靴店コレクションを閲覧している手 — photo by Monstera on Pexels
• ラップトップでオンラインストアのTシャツオプションを指差す人 — photo by Monstera on Pexels
• スマートフォンに読み込み画面を表示している手 — photo by Shahariar Rabbi on Pexels