簡単な答え: Shopifyでの画像SEOは、キーワードの問題ではなく、主に速度の問題です。商品写真はページ上で最大の要素であり、通常はLargest Contentful Paint（LCP）要素です。そのため、画像ファイルサイズ、ピクセル寸法、読み込み優先度がファイル名よりもランキングに影響を与えます。最長辺を2048ピクセルでアップロードし、最初の画像を約200KB以下に抑え、幅と高さを設定し、折りたたみ以下のみ遅延読み込みし、ShopifyのCDNがリサイズされたWebPバリアントを提供するようにします。このガイドでは、サイズ、ファイルサイズ、解像度、リサイズ、フォーマットをカバーします。altテキストについては商品画像のaltテキストを、共有プレビューについてはソーシャルシェア画像を参照してください。

Shopifyは独自のCDNを通じて画像を提供し、レスポンシブなバリアントを自動生成します。これにより、多くの一般的な画像SEOアドバイスはここでは適用されません。残るのは短いリストで、そのほとんどは重さと寸法に関するものです。

なぜ画像がShopifyのCore Web Vitalsを支配するのか

通常の製品ページでは、ヒーロー画像がLCP要素です。これはビューポート内で最大のものであり、Googleが計測するものです。描画に3.5秒かかると、テーマの他の部分がどれだけ速くてもページはLCPに失敗します。

遅くなる原因は2つあります。ファイルが表示されるスペースよりも大きいこと、そして優先されていないことです。2400ピクセルの画像が800ピクセルで表示されると、バイトの3/4が無駄になります。Shopifyのimage_urlフィルターに幅パラメータを使用するとこれを修正できますが、リッチテキストフィールド、ブログ本文、カスタムセクションに挿入された画像は通常これを完全にバイパスします。

画像サイズ、ファイルサイズ、解像度は異なるもの

ほとんどの画像アドバイスはこれらを混同するため失敗します。

  • 画像サイズはピクセル寸法です — 2048 × 2048。画像のシャープさと表示可能な大きさを決定します。
  • ファイルサイズはディスク上のバイト数です — 180 KB。画像のダウンロードにかかる時間を決定します。寸法、フォーマット、圧縮、写真の詳細度に依存します。
  • **解像度（DPI）**は印刷指示です。ブラウザは無視します。1600ピクセルの画像が72 DPIでも300 DPIでも同じウェブ画像です。「ウェブ用に72 DPIで保存する」ルールはメタデータ以外何も変えません。

ピクセルと並んで重要なのはデバイスピクセル比です。2×スクリーンのスマートフォンは、実際のピクセルで約2倍のCSS幅を必要とします。400ピクセル幅の製品カードは、そのデバイスで800ピクセルの画像を、1×モニターでは400ピクセルの画像を必要とします。これがsrcsetとsizesの役割です — テーマはShopifyが生成できるバリアントをリストし、ブラウザが適合するものを選びます。Shopifyのimage_tagフィルターを基にしたテーマはこれを自動的に出力しますが、カスタムセクションの手書きのimgタグは全員に1つのサイズを提供します。

配置ごとの画像ファイルサイズ目標

「画像を100 KB以下に保つ」という単一のルールは、サムネイルには緩すぎ、フル幅バナーには厳しすぎます。配置ごとに作業します:

配置 一般的な表示幅 作業ファイルサイズ目標 理由
ホームページヒーロー / フル幅バナー 1600–2000 px ≤ 200 KB (WebP), ≤ 300 KB (JPEG) ホームページでほぼ常にLCP要素
最初の製品画像（ギャラリーリード） 800–1200 px ≤ 200 KB 製品ページのLCP要素
追加のギャラリー画像 800–1200 px ≤ 100–150 KB インタラクション時または遅延読み込み時に読み込まれる
コレクショングリッドカード 300–500 px ≤ 50 KB ページごとに数十個; 合計が問題
ブログインライン画像 700–900 px ≤ 100 KB 通常テーマのバリアントロジックをバイパス
ロゴ、アイコン、バッジ ≤ 300 px ≤ 10 KB, 可能ならSVG すべてのページで繰り返される

これらは作業目標であり、法律ではありません。詳細な生地のクローズアップは、同じ寸法で白背景の製品よりも多くのバイトを必要とします。重要なのは、ページ上の最初の画像がLCP予算をクリアするかどうかです。

フォーマット: JPEG、PNG、WebPとShopifyがしてくれること

  • JPEGは写真用です。エクスポート品質75–82は、製品写真が目に見えて変わらなくなるが、ファイルが縮小し続ける範囲です。
  • PNGは透明性が必要なフラットグラフィックのみ — ロゴ、バッジ、硬いエッジのイラスト。PNG写真は同じJPEGの5倍のサイズになることがよくあります。
  • WebPは同じ視覚品質でJPEGやPNGよりも小さく、ShopifyのCDNはそれを受け入れるブラウザに自動的にWebPを提供します。アップロード前に変換することは、ストアフロントでは何も得られません。役立つのは、オーバーサイズのオリジナルをWebPバージョンに置き換えるアプリが、Shopifyが生成するすべてのバリアントを縮小することです。
  • SVGはロゴやアイコン用です: 解像度に依存せず、通常は数キロバイトです。

Shopify用の画像リサイズ: どこで行うか

リサイズする場所は3つあり、互換性はありません。

アップロード前（新しい画像に推奨）。 最長辺を2048ピクセルにリサイズし、圧縮します。任意の画像エディタや無料のウェブ圧縮ツールでこれを行い、Shopifyが保持するオリジナルがすでにスリムになります。コレクショングリッドが均一に保たれるように、同じサイズとアスペクト比で一度に全撮影をバッチエクスポートします。

Shopify内、テーマによる。 Shopifyのバリアントは配信レイヤーです: テーマが幅を要求し、CDNがそのサイズを返します。これは自動的で正しいですが、寸法を縮小するだけです — 重くてノイズの多いオリジナルは、クリーンなものよりも重いバリアントを生成します。

オリジナルを書き換えるアプリによる。 これは、再アップロードせずにカタログ内の画像を修正する唯一の方法です。RankEngineのAutopilotには、オーバーサイズの製品画像をWebPに変換し、Admin API（productCreateMedia、productDeleteMedia）を通じてオリジナルを置き換える自動画像圧縮ルールがあり、アクティビティログには変換前後のサイズが記録されます — Autopilotルールの設定を参照してください。手動で再アップロードすることにはコストがあります: 画像URLが変更され、古いファイルへのリンクやキャッシュされた参照が壊れます。

パフォーマンスと品質のトレードオフ、正直に言うと

圧縮ガイドは目に見える損失がないことを約束する傾向があります。正直なバージョン: 損失はあります。問題は、画像が表示されるサイズで購入者がそれを見分けられるかどうかです。実際の製品ページで100%で結果を確認し、エディタのズームプレビューではなく、スマートフォンで確認してください。スムーズなグラデーションのバンディング、硬いエッジのハロー、ぼやけた生地のテクスチャが3つの兆候です。それらが見える場合、品質を5ポイント上げて再エクスポートします。82から60へのゲインはバイトでは小さく、アーティファクトでは大きいので、有用な範囲は狭いです。

実際に行うこと

最長辺を2048ピクセルでアップロード。 Shopifyはオリジナルから小さなバリアントを生成するため、より大きなアップロードはストレージを無駄にし、何も改善しません。小さなアップロードはズームビューがぼやけます。

ShopifyにWebPを提供させる。 ブラウザのAcceptヘッダーに基づいて自動的に行います。アップロード前に手動で変換することは何も得られず、JPEGフォールバックを失います。

幅と高さの属性を設定。 寸法が欠けていると、画像の読み込み時にレイアウトシフトが発生し、直接的なCLSペナルティになります。image_tagを使用するテーマはこれを無料で取得しますが、カスタムセクションの手書きのimgタグは通常取得しません。

折りたたみ以下のすべてを遅延読み込みし、上のものはしない。 ヒーロー画像に遅延属性を付けると、LCP要素が遅れ、スコアが悪化します。最初の画像は高いフェッチ優先度を持つべきです。

画像位置 読み込み戦略 理由
折りたたみ上（ヒーロー / LCP要素） fetchpriority="high", 遅延読み込みなし 遅延読み込みは最大の可視ペイント要素を後に移動し、スコアを悪化させます
折りたたみ上（他の画像） Eager（デフォルト） 可視画像は遅延されるべきではありません
折りたたみ下 loading="lazy" オフスクリーン画像は遅延され、初期ページの重さを減らし、LCP要素の帯域幅を解放します

ソースがカメラファイルの場合、アップロード前に圧縮。 Shopifyの処理は積極的ではありません。6 MBのDSLR JPEGは900 KBのバリアントになります。同じ画像を圧縮ツールで処理すると、200 KBになり、目に見える違いはありません。

ファイル名とaltテキスト: 正直なバージョン

ファイル名は弱いシグナルです。IMG_4821.jpgをblue-merino-scarf.jpgにリネームすることは、アップロード時に行う価値がありますが、バルク再アップロードプロジェクトの価値はありません — 再アップロードは既存の画像URLとそれへのリンクを壊します。

Altテキストは、主にアクセシビリティとGoogle Imagesのために重要です。商品画像のaltテキストで適切にカバーされています。無料のaltテキストジェネレーターは、ブラウザで1つの画像ずつ書きます。

測定する価値のある唯一のこと

PageSpeed Insightsで製品ページを実行し、2つの数字だけを見ます: LCP要素（画像名が表示されます）とそのサイズです。LCP要素が200 KBを超える画像であれば、それがプロジェクト全体です。

その他すべて — ファイル名、サイトマップ、EXIFデータ — は、2秒かかる画像のペイントに比べれば誤差です。

カタログ全体での実行

ページごとのバージョンは簡単です。カタログバージョンはそうではありません: 800製品の中でオーバーサイズの画像はサブセットであり、通常は最も古いものか、サプライヤーフィードからインポートされたバッチです。

RankEngineの速度監査は、URLごとのLCPを報告し、問題のある画像を名前で示し、その画像ツールはカタログ全体でオーバーサイズのファイルと欠落した寸法をフラグし、圧縮とaltテキストルールは、各変更がストアに対して検証され、ログから元に戻せる状態で、日々のAutopilot実行でそれらを修正します。

次の画像バッチのためのチェックリスト

  1. コレクション内のすべての画像のアスペクト比を同じにする。
  2. 最長辺を2048ピクセルで、JPEG品質75–82（またはWebP）でエクスポート。
  3. ページ上の最初の画像を200 KB以下に、グリッドサムネイルを50 KB以下に。
  4. アップロードする場合は説明的なファイル名にする; リネームのためだけに再アップロードしない。
  5. キーワードではなく、製品のために書かれたaltテキスト。
  6. 公開後: PageSpeed Insightsで1つの製品ページを確認 — LCP要素とそのサイズを確認。

関連