Liquidを使ってassetsフォルダ内の画像を表示する方法と、画像サイズの設定方法をご紹介します。

Liquidで画像を表示する方法

assetsフォルダ内に保存した画像ファイルはassetimgurlタグを使用して、以下のように呼び出すことができます。

<img src="{{ 'main-img.png' | asset_img_url: '250x250' }}" alt="">

上記の場合はassetsフォルダに入っている《main-img.png》の画像をwidth:250px × height:250pxで表示することができます。

画像サイズの指定をする

先ほどのコード内の'250x250'部分を変更することで、様々なサイズを指定することも可能です。
指定用のコードは以下の通りです。

横幅と高さを両方指定する

<img src="{{ 'main-img.png' | asset_img_url: '250x250' }}" alt="">

width×heightで画像のサイズを指定することが出来ます。

横幅のみを指定する

<img src="{{ 'main-img.png' | asset_img_url: '250x' }}" alt="">

widthのみを指定することができます。
上記の場合、heightはautoとなり画像比率に合わせて自動で高さが算出されます。

高さのみを指定する

<img src="{{ 'main-img.png' | asset_img_url: 'x250' }}" alt="">

heightのみを指定することができます。
上記の場合、widthはautoとなり画像比率に合わせて自動で横幅が算出されます。

規定の画像サイズを指定する

Liquidでは、いくつかの規定サイズが用意されています。
サイズを統一したい画像などは規定サイズを使用すると便利です。

pico 16px × 16px

<img src="{{ 'main-img.png' | asset_img_url: 'pico' }}" alt="">

icon 32px × 32px

<img src="{{ 'main-img.png' | asset_img_url: 'icon' }}" alt="">

thumb 50px × 50px

<img src="{{ 'main-img.png' | asset_img_url: 'thumb' }}" alt="">

small 100px × 100px

<img src="{{ 'main-img.png' | asset_img_url: 'small' }}" alt="">

compact 160px × 160px

<img src="{{ 'main-img.png' | asset_img_url: 'compact' }}" alt="">

medium 240px × 240px

<img src="{{ 'main-img.png' | asset_img_url: 'medium' }}" alt="">

large 480px × 480px

<img src="{{ 'main-img.png' | asset_img_url: 'large' }}" alt="">

grande 600px × 600px

<img src="{{ 'main-img.png' | asset_img_url: 'grande' }}" alt="">

original 1024px × 1024px

<img src="{{ 'main-img.png' | asset_img_url: 'original' }}" alt="">

master 実サイズ

<img src="{{ 'main-img.png' | asset_img_url: 'master' }}" alt="">

※assetsファイルに保存したそのままのサイズで表示されます。

画像指定の必要性について

画像は全て実サイズで読み込みをして、CSSなどでサイズを変更・表示することも可能です。
しかし、サイズが大きいと読み込みに時間がかかってしまうため、あらかじめ小さいサイズのみで使用すると分かっている画像についてはサイズを指定しておくのがおすすめです。