How to Optimize Shopify Product Images for Speed and SEO

「商品写真はきれいに撮れたのに、ページの読み込みが遅くてお客さんに見てもらえない」

Shopifyストアを運営していると、こんな悩みにぶつかることがあります。実は、ECサイトにおいてページの重さの半分以上を占めているのが 画像ファイル です。つまり、画像の最適化はストアの表示速度を改善するもっとも効果的な手段といえます。

わたしがストアの速度改善に取り組んだとき、画像のリサイズと圧縮だけでPageSpeed Insightsのスコアが目に見えて改善した経験があります。難しいコードの修正は不要で、今日からすぐに始められる対策ばかりです。

この記事では、Shopifyの 商品画像を最適化して表示速度とSEOを改善する具体的な方法 をまとめました。

出典：Google - Mobile Page Speed Benchmarks、Speed Boostr - Shopify Image Optimization Guide

なぜ商品画像の最適化が重要なのか

画像の最適化が大切な理由は、大きく3つあります。

1. 01

   表示速度が上がり、離脱を防げる

   ページの読み込みが遅いと、お客さんは商品を見る前にストアを離れてしまいます。画像を軽くするだけで体感速度が大きく変わり、離脱率の低下につながります。
2. 02

   SEO評価が改善する

   Googleは Core Web Vitals をランキング要因に組み込んでいます。画像の最適化はLCP（最大コンテンツの表示速度）やCLS（レイアウトのズレ）に直接影響するため、検索順位にも関わってきます。
3. 03

   コンバージョン率が上がる

   画像の最適化によってページ読み込み時間が短縮されると、コンバージョン率が10〜25%改善するというデータもあります。お客さんがストレスなく買い物できる環境は、売上に直結します。

出典：Speed Boostr - Shopify Image Optimization Guide

Shopify商品画像の推奨サイズとフォーマット

まずは、Shopifyでの画像の基本ルールを押さえておきましょう。

WebP（ウェッピー）

Googleが開発した画像フォーマット。JPEGやPNGと比較して、同等の画質でファイルサイズを25〜35%小さくできます。2026年現在、主要ブラウザの95%以上が対応しています。

• 商品画像は 2048 x 2048px（正方形）が推奨サイズ
• ファイルサイズは1枚あたり 300KB以下 を目安にする
• フォーマットはJPEGまたはWebPが最適（写真系の商品画像の場合）
• 背景が透明な画像が必要な場合はPNGを使用する
• アップロード上限は 20MB だが、大きすぎると速度に悪影響

Shopifyは、アップロードされた画像をCDN（コンテンツ配信ネットワーク）経由で自動的に WebPやAVIF形式に変換 して配信してくれます。そのため、JPEGでアップロードしても、対応ブラウザには自動的に軽量なフォーマットで表示されます。

参考：Shopify公式ヘルプ - 画像のアップロード

画像最適化の具体的な手順

では、実際にどのように画像を最適化すればいいのか。手順をまとめます。

1. 1

   画像を適切なサイズにリサイズする

   撮影した写真をそのままアップロードするのはNGです。一眼レフやスマートフォンで撮影した画像は4000〜6000px以上あることが多いので、2048px以内にリサイズしましょう。macOSの「プレビュー」やWindowsの「ペイント」でも簡単にリサイズできます。
2. 2

   画像を圧縮する

   リサイズした画像をさらに圧縮します。JPEGなら品質80〜85%に設定すると、見た目の劣化はほぼなくファイルサイズを大幅に削減できます。無料ツールなら TinyPNG や Squoosh がおすすめです。
3. 3

   ファイル名をわかりやすくする

   「IMG_0123.jpg」のような名前ではなく、「navy-leather-tote-bag.jpg」のように商品を説明する名前に変更しましょう。Googleはファイル名も検索の手がかりにしています。
4. 4

   Shopifyにアップロードしてalt属性を設定する

   商品画像をアップロードしたら、必ず alt属性（代替テキスト）を設定します。管理画面で商品画像をクリックし、「代替テキスト」の欄に画像の内容を具体的に入力してください。

alt属性の書き方のコツ

alt属性は、画像が表示されないときの代替テキストであり、SEOにも重要な要素です。

良いalt属性の例をいくつか紹介します。

参考：Shopify公式ブログ - Image Sizes

おすすめの画像圧縮ツール

画像の圧縮に使える無料・有料のツールを紹介します。

画像最適化のチェックリスト

最後に、商品画像をアップロードする前に確認したいポイントをまとめます。

• 画像サイズを2048px以内にリサイズした
• ファイルサイズが300KB以下になっている
• ファイル名を商品を説明する英語名に変更した
• alt属性に商品の特徴を自然な文章で入力した
• 同じ商品で複数画像がある場合、角度やバリエーションを分けた
• PageSpeed Insightsでスコアを確認した

画像の最適化は、一度やり方を覚えてしまえば日々の運用に組み込める作業です。新しい商品を登録するたびにこのチェックリストを確認する習慣をつければ、ストア全体の表示速度とSEO評価が着実に向上していきます。

「表示速度が遅いかも」と感じたら、まずは商品画像の見直しから始めてみてください。

→ Shopifyで画像最適化を始める（無料体験あり）