画像とURLのフィルタ
image_url / image_tagと各種URLフィルタを使い、正しい画像とリンクを出力できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、image_url / image_tagとURL系のフィルタで、正しい画像とリンクを出せるようになります。
受託では、古いテーマに残るimg_urlの置き換えや、/cartと直書きされたURLの修正が、改修でよく出てきます。
画像はどう出すか
product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy'が基本の形です。image_urlがCDN（画像を配信する仕組み）のURLを作り、image_tagが<img>を組み立てます。
srcset（画面幅に合わせた画像の候補）は、既定で自動生成されます（image_urlのwidthを上限とした既定の幅セット）。
候補の幅を自分で決めたいときだけ、widthsを渡します。
img_urlは使わない
古いテーマや記事に残っている、非推奨のフィルタです。
動きますが、Theme Check（テーマの検査ツール）が警告します（DeprecatedFilter）。
改修のときに、`image_url`と`image_tag`へ置き換えます。
URLはroutesから取る
routes.root_url / routes.cart_url / routes.search_url / routes.account_urlを使います。
`/cart`と直書きすると、多言語のサブフォルダ（`/en/cart`）で壊れます。
CSSやJSは、'theme.css' | asset_url | stylesheet_tag、'app.js' | asset_url | script_tagで読み込みます。
CDNのURLに、キャッシュ用のバージョンが付きます。
この演習環境
image_url / image_tagはダミーの実装で、URLの形と属性の組み立てを再現しています。
本物のCDNは、画像を実際にリサイズして配信します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。