画像・動画の最適化
画像を適切なサイズ・形式・優先度で配信し、LCPとCLSを改善できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、画像を適切なサイズ・形式・優先度で出し、LCP（表示の速さ）とCLS（レイアウトのずれ）を改善できるようになります。
受託では、速度改善で最も効くのが画像で、直すのはタグの書き方だけなので、効果を説明しやすい作業です。
image_urlで幅を指定するとは
元画像をそのまま出さず、image_urlフィルタで幅を指定します。
ShopifyのCDN（画像を配信するサーバー）が、WebP / AVIFへの変換とリサイズを自動で行います。widthかheightの指定が必須です。
widthsとsizesで何が変わるか
image_tagにwidthsを渡すと、srcset（画面幅ごとの画像候補）が生成されます。sizesは、実際の表示幅に合わせます。sizes="100vw"のまま放置すると、最大サイズの画像を配信してしまいます。
読み込みの優先度はどう決めるか
ファーストビュー（最初に見える範囲）のLCP画像は、loading: 'eager'とfetchpriority: 'high'にします。
それ以外はloading: 'lazy'です。
全部lazyにすると、LCPが悪化します。
CLS対策と動画の扱い
画像の領域は、width / height属性かaspect-ratioで先に確保します。image_tagは、width / heightを自動で付けてくれます。image.aspect_ratioも使えます。
自動再生の背景動画には、ポスター画像（再生前に見せる静止画）を必ず置きます。
モバイルでは、静止画に切り替える判断もあります。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。