高速ストアを実現するShopify向け画像最適化ガイド

Last updated: June 28, 2026

Shopifyの画像最適化は、主にワークフローの問題です。ストアオーナーが大きな製品写真をアップロードし、テーマがレイアウトが必要とする以上のピクセルを要求し、その結果、モバイルでサイトフロントがコストを払わされます。解決策は、「ソースファイル」「テーマのリクエスト」「公開されたCDN URL」の順に修正することです。

本ガイドでは、Shopifyストア内の製品ページ、コレクショングリッド、ヒーローイメージ、およびエディトリアル画像に焦点を当てています。根拠のない変換主張を避け、ライブメディアを置き換える前に実行できるチェック項目を提供します。

クイックアンサー：Shopifyの画像を最適化するにはどうすればよいですか？

Shopifyがレンダリングする最大のサイズでもシャープに見える最小の画像を使用してください。ほとんどの製品写真については、クリーンなマスターから始め、ストアレイアウトに合わせてクロップし、最大の実表示幅にリサイズした後、品質80〜85程度のWebP候補をエクスポートすることから始めてください。画像を置き換える前に、スマートフォンで結果を確認することが重要です。

ShopifyはCDNとLiquidの画像フィルターを通じて画像URLを提供できます。重要なのは、単に巨大なファイルをアップロードしてブラウザが安価に縮小することを期待するのではなく、テーマ側で適切な幅を要求することです。Shopifyのimage_urlフィルターは、Liquid内で幅と高さのパラメータをサポートしており、これは開発者がテーマ内のレスポンシブ画像マークアップに使用すべきフックとなります。

簡単なストア監査を行うには、まず以下の4箇所を確認してください：

1. 製品ページのメイン画像。
2. コレクショングリッドのスムネイル。
3. ホームページヒーローまたはバナー画像。
4. Shopifyのストアフロント内のブログおよびガイド画像。
5. アプリによって挿入されたギャラリー、レビュー、またはアップセル画像。

これらの画像のいずれかがLargest Contentful Paint要素である場合は、個別に扱ってください。最初に表示されるヒーロー画像や製品画像を遅延ロード（lazy-load）にせず、早期に発見可能にし、正しい寸法を提供してください。

Shopifyストアはどのような画像サイズを使用すべきですか？

すべてのテーマに対応する単一のShopify画像サイズはありません。2カラムのデスクトップレイアウトで720 CSS pixelsに表示される製品画像は、Retina対応のスマートフォンでのフル幅ヒーローとは異なるファイルが必要です。レンダリングされるスロットから開始し、高密度スクリーンに必要なピクセル数を確保してください。

この記事のために実用的なターゲットを設定するため、2400 pxの製品スタイルソースからローカルWebPエクスポートを測定しました。正確なバイト数は、ジュエリー、アパレル、コスメティックス、エレクトロニクス、フード写真によって変わりますが、パターンは変わりません。リサイズを行う方が、小さな品質スライダーの変更よりも多くの節約になります。

これらはルールではなく、出発点として扱ってください。白い背景のTシャツ画像は130 KBでクリーンに見えるかもしれません。しかし、ブラッシュ加工された金属や小さなマーキング、影があるアップルウォッチの写真は、同じ幅でも300 KBを必要とする場合があります。

製品画像が圧縮前に一貫性がない場合は、まずクロップを修正してください。ecommerce image guideでは、製品のフレーミング、背景の一貫性、視覚的な信頼シグナルについて解説しています。クロップが正しければ、image compression ratio guideを使用して、元のバイト数、最終バイト数、および目に見える品質の結果を記録してください。

ShopifyのCDNは画像最適化をどのように変えますか？

ShopifyのCDNは配信を助けますが、健全なソースファイルとテーママークアップの必要性をなくすものではありません。5000 pxのアップロードでも、テーマがサイズの大きなバリアントを要求したり、レスポンシブなsrcsetの選択を省略したりすると、遅いページが作成される可能性があります。

image_urlフィルターに関するShopifyの公式Liquidドキュメントは、テーマが変換された画像幅と高さを要求できることを示しています。これは、コレクションカードが600 pxの画像しか必要ないのに、より大きなアセットを受け取ってしまう場合に利用すべきレバーです。

また、Shopifyのヘルプドキュメントには、product media typesを含むサポートされている製品メディアタイプが文書化されています。メディア制限や受け入れられるフォーマットは変更される可能性があるため、一括インポートプロセスを構築する前に現在のShopifyドキュメントを確認してください。

このテーマ側の順序を使用してください：

1. 作業フォルダ内の元の製品写真をクリーンで非圧縮な状態で保持する。
2. 他のツールからの再エクスポートではなく、合理的なマスターファイルをShopifyにアップロードする。
3. テーマ内で、各レイアウトが実際に必要とする幅を要求する。
4. レイアウトがシフトしないように、widthとheight属性を追加する。
5. モバイルとデスクトップ用の実用的なステップを含むsrcsetを構築する。
6. ビューポートの下にある製品グリッド画像を遅延ロードさせる。
7. LCPを引き起こす可能性が高い場合、最初に目に見える製品またはヒーロー画像はすぐに読み込ませる（eager）。
8. 最終的なCDN URLがHTTP 200を返すことを確認する。

CDNはその答えの一部であり、全体ではありません。購入者が製品ページを開き、最初の画像が遅れて到着した場合、ファイルが高速なエッジロケーションから来たとしても、ストアは依然として遅く感じられます。

WebPをShopifyにアップロードすべきですか、それともテーマに任せるべきですか？

ワークフローですでにクリーンなWebPファイルを生成している場合は、Shopifyがそのユースケースで受け入れ、かつテーマが正しく処理する場合にWebPをアップロードしてください。チームがShopifyの画像変換機能に依存している場合、より重要な仕事は、適切な生成された幅を要求し、テーママークアップがクロール可能であることを維持することです。

ほとんどのストアにとって、実用的な決定は画像の役割によって異なります：

Googleの画像SEOドキュメントでは、サポートされている画像フォーマット、説明的なaltテキスト、およびGoogle Images best practicesにおけるクロール可能な画像要素の使用を推奨しています。これはShopifyストアにとって重要です。なぜなら、製品画像はスピードアセットであると同時に検索アセットでもあるからです。

モダンなフォーマット間で判断する場合、スライダーの数値ではなく視覚的な品質を比較してください。WebPの品質82とAVIFの品質55は同等の制御ではありません。AVIF vs WebP comparisonでは、どの形式がどこで勝り、互換性やエンコード時間が決定を変えるかを説明しています。

ライブ製品画像を置き換える前に何を確認すべきですか？

カタログ全体を盲目的に最適化しないでください。まず20枚の代表的な画像を選んでください：明るい製品ショット、暗い製品ショット、クローズアップディテール、モデル写真、透過背景アセット、およびラベル付きの画像など。それらを圧縮し、実際のテーマでレビューしてから、残りのバッチに設定を適用してください。

何かを上書きする前に、この視覚的なチェックを実行してください：

1. オリジナル画像と最適化された画像を、買い手が目にするサイズで開く。
2. 製品のエッジ、生地の質感、肌の色調、影、ラベルを確認する。
3. テーマがズームをサポートしている場合は、製品画像を拡大して確認する。
4. 透過エッジがフリンジ（房状の縁）を拾っていないことを確認する。
5. モバイルファーストでチェックし、特に製品詳細ページで注意を払う。
6. 画像が読み込めなかったと仮定してaltテキストを読む。
7. 画像URLが安定しており、HTTP 200を返すことを確認する。
8. 再エクスポートする必要がある場合に備えて、元のマスターファイルはShopifyの外に保管しておく。

バッチ処理の場合、圧縮の前にリサイズを行ってください。batch resize guideは製品画像のフォルダに対してより安全な順序を提供し、complete image optimization checklistは最終的な公開前のチェックリストとして役立ちます。

Shopifyの画像はCore Web Vitalsにどのように影響しますか？

画像はしばしばLargest Contentful Paintに影響を与えます。なぜなら、最初に目に見える製品写真やホームページヒーローが通常、ファーストビューで最大の視覚要素だからです。この画像を圧縮することは役立ちますが、発見可能性と優先度も重要です。

optimizing Largest Contentful Paintに関するweb.devのガイドでは、LCPになりそうなリソースを早期に発見可能にし、適切な場所で優先度のヒントを使用することを推奨しています。Shopifyの用語では、最初の製品画像がクライアントサイドJavaScriptの背後に隠されたり、アプリが初期化された後でのみロードされたり、ビューポートの下にあるサムネイルのように扱われたりしてはいけない、ということです。

テーマをレビューする際は、以下のCore Web Vitals表を使用してください：

アプリはこれを複雑にすることがあります。ウィジェット、おすすめスライダー、ページビルダーなどは、テーマの通常の画像コンポーネントの外側に画像を挿入することがあります。ページがロードされた後、Liquidテンプレートだけでなく、ネットワークパネルを検査してください。

実用的なShopifyの画像ワークフロー

製品を追加したり、コレクションを更新したりするたびに、同じ手順を使用してください。完璧な品質の数字を追い求めるよりも、一貫性が重要です。

1. 変更していないマスターファイルをShopifyの外のフォルダに保存する。
2. 各製品をストアで合意されたフレーミングに合わせてクロップする。
3. 最大の実店舗幅でテストセットをエクスポートする。
4. 製品写真にはWebP q85、q82、およびq78を試す。
5. 実際のPDPとグリッドサイズで比較する。
6. 製品の詳細を保護できる最小のバージョンを選択する。
7. 最適化された画像ワークフローをアップロードするか接続する。
8. ページがまだサイズの大きなファイルを要求している場合は、テーマのimage_url幅を更新する。
9. LCP、レイアウトシフト、およびコレクションページの読み込みを確認する。
10. 次の製品バッチのために設定を記録する。

修正できるものが一つしかない場合、モバイルでファーストビューに表示される製品ページ画像から始めるべきです。その画像が第一印象、速度、視覚的な信頼性に影響を与えるからです。その後、コレクショングリッドとエディトリアル画像をトラフィックの降順で進めてください。

ファイルサイズに関する厳格な目標を持つストアでは、compress images without losing qualityを補助ワークフローとして使用してください。重要なのは、圧縮を、ストアがすでに遅い状態になってから行う一度限りのクリーンアップではなく、繰り返しの可能な公開ステップにすることです。