レスポンシブ画像と遅延読み込み
image_tagのwidths / sizesで正しいsrcsetを出し、LCP画像とそれ以外で読み込み戦略を分けられる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、image_tagのwidths / sizesで正しいsrcsetを出し、ファーストビューの画像とそれ以外で読み込み方を分けられるようになります。
受託では、既存テーマのimg_urlをimage_urlに置き換える作業が定番の改修で、速度スコアに最も効く部分です。
image_urlとimage_tagとは
画像のURLを作るフィルタと、<img>タグを出すフィルタです。{{ image | image_url: width: 1500 | image_tag: widths: '375, 750, 1100, 1500', sizes: '(min-width: 990px) 50vw, 100vw', loading: 'lazy' }}のようにつなげて使います。image_urlはwidthかheightが必須です（最大5760px）。
リサイズとWebP / AVIFへの変換は、Shopify CDNが担います。
sizesはなぜ大事か
sizesは、その画像がレイアウト上で占める幅をブラウザに伝える属性です。
実際のレイアウト幅に合わせると、srcsetから適切なサイズが選ばれ、転送量が半分になることもあります。100vwのままだと、2カラムでも全幅のサイズが配信され、転送量が倍になります。
ファーストビューの画像はどう扱うか
LCP（ページの主要な画像が表示されるまでの速さの指標）に効く1枚は、loading: 'eager'とfetchpriority: 'high'にします。
必要ならpreload: trueも付けます。forloop.firstやsection.indexで「最初の1枚だけeager」にします。
それ以外はloading: 'lazy'で後回しにします。
発展：レイアウトシフトと非推奨のimg_url
image_tagはwidth / heightを自動で付けます。
さらにCSSのaspect-ratioとプレースホルダーで領域を先に確保しておくと、表示がずれません。
古いimg_urlは動きますが非推奨です。
サイズ指定が'800x'の文字列で、srcsetを出せません。
新しく書かず、見つけたら置き換えます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。