見出し画像

Shopifyテーマ Chapter 11 画像の出力の仕方いろいろ

Yuya M

このチャプターではテーマ上でどのように画像を表示するかをみていきます。

Shopifyでは画像をアップロードすると自動的にShopfiyのCDN(コンテンツデリバリーネットワーク)上に画像が保管されます。
そして下記のようなオブジェクトが画像CDNのリンクを含んでいます。

  • article

  • collection

  • image

  • line_item

  • product

  • variant

そしてLiquidではこれらのオブジェクトに含まれる画像URLを出力し、テーマ上で画像として表示させる際には image_urlとimage_tagのフィルターを組み合わせて使います。

画像出力の基本形

まず簡単な例を見てみます。

{{ product | image_url: width 300 | image_tag }}

上記の例ではproduct のオブジェクトからまず image_urlのフィルターを使ってURLを抜き出し、そしてimage_tagのフィルターで画像として表示させるためのHTMLタグとして出力します。

上記のLiquidコードでは下記のようなHTMLタグが出力されます。

<img src="//cdn.shopify.com/s/files/1/0561/7470/2123/products/image-sample.jpg?v=1654828801&amp;width=300" alt="Image Sample" width="300" height="200">

width と height

デフォルトではwidthとheightは画像URLのアスペクト比率を基準に追加されます。ですが、widthを image_tagのパラメーターとして自分で書き加えることもできます。

{{ product | image_url: width: 400 | image_tag: width: 300 }}

もしくは指定しないようにするためには下記の様にnilのパラメーターを加えます。

{{ product | image_url: width: 400 | image_tag: width: nil }}

同じ様に高さを指定することも、また指定しないようにすることもできます。

ずっと昔CSSが一般的になる前はHTMLのimageタグには widthとheightを書き込むのが一般的でした。そして、CSSが一般的なものになってからは画像のサイズはCSSで調整するためwidthとheightは書かないのが基本となってきました。
しかし、MacのRetina ディスプレイのような解像度が2倍、または3倍のものがでてきてから、CSSのピクセルサイズと実際に表示される画像のピクセルサイズが異なるようになってから少し事情が変わってきました。
CSSで100pxと指定しても、例えば二倍の解像度のディスプレイでは実際には200px分の二倍の密度の画像が表示できるようになったからです。
密度が高いほど画像はより解像度高くなりきれいに見えます。
それに伴い、HTMLの画像タグによる出力にwidthを追加しておくことによりCSSのピクセルサイズと異なる画像の出力を行うことが主流となりつつあります。(すでになっている。)

sizesのHTMLアトリビュートを加える。

sizesのパラメーターを記述し、画面サイズにより出力される際のサイズを細かく設定することもできます。

srcsetのサイズの指定

デフォルトで imageタグのsrcsetは画像URLによって定義される最大値を自動的に割り当てられますが、自分で指定することもできます。

{{ product | image_url: width: 600 | image_tag: widths: '200, 300, 400' }}

altのテキスト

altのテキストを上書きすることもできます。

{{ product | image_url: width 200 | image_tag: alt: 'Sample Image' }}

Classの指定や他のHTMLアトリビュート

classの指定なども可能です。

{{ product | image_url: width: 200 | image_tag: class: 'custom-class', loading: 'lazy' }}

下記のように出力されます。

<img src="shopify-cdn-url" alt="Sample Image" width="200" height"200" class="custom-class" loading="lazy">

以前つかわれていたimg_url とimg_tagのフィルターはdeprecated (サポート対象外・廃止予定)だぞう。以下は過去のテーマのため残しておきます。

まずimg_urlフィルターをみていきます。このフィルターを使うと画像のURLが返ってくることになります。ただそれにはサイズのパラメーターを指定する必要があります。またこのフィルターは下記のような画像を持つオブジェクトに対して有効です。

  • product

  • variant

  • line item

  • collection

  • article

  • image

下記の例をみてください。

{{ product.featured_image | img_url: '100x100' }}

この例ではimg_urlフィルターを使い 100x100のサイズを指定しています。この値はShopifyに画像をアップロードした際にShopifyによって自動的に作り出されたサイズです。

この場合画像は100x100ピクセルより大きくなることはありません。
もし正方形のサイズをアップロードした場合は、この指定サイズのまま変更されます。
しかし、オリジナルの画像が正方形でないく長方形であれば、Shopifyはその形に従い長い方の辺を100ピクセルとしてサイズ変更します。
基本的には画像のクロップを行わない限り、もとの形(アスペクト比率)を維持したまま、サイズ変更が行われます。

また縦や横だけのサイズを指定する方法もあります。サイズのパラメーターで後述。

新しいパラメーター

サイズ

では基本のパラメーターであるサイズからみてみます。

{{ product.featured_image | img_url: '450x450' }}

この場合、縦と高さが450ピクセルで指定されます。
ただし正方形でない画像は長い方の辺が基準で出力されます。下記の写真は正方形でないため、長い方の辺が450ピクセルとなり出力されます。

横幅のほうが長い画像なので長い辺基準で出力される

逆に高さだけを指定することもできます。'x450'と高さだけを書きます。

{{ product.featured_image | img_url: 'x450'}}

先程と同じ横長の画像を使用した場合、下記のように先程より大きい画像が出力されます。

高さを指定した例

このように｢1辺｣だけを指定した場合、Shopifyは他の辺はオリジナルサイズに合わせて、オリジナルのアスペクト日(縦横比)をキープしたまま画像サイズを計算します。

Crop(切り抜き)

正方形で指定通りのサイズで出力したい場合は、正方形のオリジナル画像を予め用意しておくのも一つの方法です。
ですが、Liquidコードを使って画像を切り抜いた状態で出力することも可能です。

下記のコードのようにcropのパラメーターを追加します。

{{ product.featured_image | img_url: '450x450', crop:'center' }}

  • top

  • center

  • bottom

  • left 

  • right

と切り抜く位置を指定します。

中央の位置を基準に450ピクセルx450ピクセルの正方形にクロップ

スケール 大きさ

縦横のサイズ比率のように大きさも指定することができます。
下記のコードのようにscaleのパラメーターを使用し、指定できるオプションは 

  • 2

  • 3

です。

{{ product.featured_image | img_url: '450x450', crop: 'center, scale:2 }}
倍の大きさ

*画像を載せましたがnoteだと大きさ固定されるので参考程度に

フォーマット

最後のパラメーターにフォーマットを加えることができます。フォーマットは画像のタイプで下記のオプションが使えます。

  • jpg

  • pjpg

{{ product.featured_image | img_url: '450x450', crop: 'center, scale: 2, format:'pjpg'}}

このような指定により画像はプログレッシブJPGとしてレンダリングされます。

Progressive JPG:画像が読み込まれる時上から下へ順番に画像が読み込まれるのでなく、まずはフルサイズの画像が読み込まれて、次第にクオリティが上がっていくタイプの画像フォーマット


Shopifyのシステムでは下記の変換に対応しているようです。

  • PNG から JPG

  • PNG から PJPG

  • JPG からPJPG

キャッシュ

リクエストされた画像が生成されたときについて。Shopifyに画像をアップロードしたとき、生成された画像はShopify CDN(Content Delivery Network)上にキャッシュされ利用可能になります。そのため、テンプレートがレンダリングされるたびに画像生成が行われ、読み込み速度が遅くなるという心配はありません。

まとめ

画像を出力するコードを記述するときに、あたらしいパラメーターを使えば、テンプレートにて画像をレスポンシブにすることが可能になります。HTMLの<picture>要素を使う、もしくはsrcsetやsizesを使う場合にも、これで適切な画像サイズや解像度を提供できるようになります。


この記事が気に入ったらサポートをしてみませんか？