Image Filters

image_tag

Render a complete <img> tag with an optimized src, an automatic responsive srcset, and sensible defaults for alt, width, and height.

{{ product.featured_image | image_tag: '650x',
  widths: '375, 650, 980, 1300, 1920',
  sizes: '(max-width: 767px) 100vw, 50vw',
  class: 'product-card__image',
  loading: 'lazy'
}}

For a 1920×1280 image with the alt text “Example Tee”, this outputs:

<img
  src="https://cdn.fourthwall.com/.../650x/image.jpg"
  alt="Example Tee"
  srcset="https://cdn.fourthwall.com/.../375x/image.jpg 375w,
    https://cdn.fourthwall.com/.../650x/image.jpg 650w,
    https://cdn.fourthwall.com/.../980x/image.jpg 980w,
    https://cdn.fourthwall.com/.../1300x/image.jpg 1300w,
    https://cdn.fourthwall.com/.../1920x/image.jpg 1920w"
  width="1920"
  height="1280"
  sizes="(max-width: 767px) 100vw, 50vw"
  class="product-card__image"
  loading="lazy"
>

The alt, width, and height attributes were not passed in — they come from the image itself. The srcset contains one entry per value in widths.

Size argument

The optional first argument sets the size used for the src URL. It accepts a size shortcut ('large', 'jumbo', …) or a custom size:

Format	Example	Meaning
`WxH`	`'400x300'`	400px wide, 300px tall
`Wx`	`'1024x'`	1024px wide, height scales automatically
`xH`	`'x600'`	600px tall, width scales automatically

You can omit the size argument entirely and pass only named options.

Options

Option	Description
`widths`	Comma-separated string (or array) of pixel widths used to build the `srcset`, e.g. `'375, 768, 1024, 1440, 1920'`. Widths larger than the image’s natural width are skipped automatically.
`sizes`	Rendered as the `sizes` attribute. Use together with `widths`.
`alt`	Overrides the alt text. Defaults to the image’s own alt text (or an empty string).
`crop`	Crop gravity when resizing: `top`, `center`, `bottom`, `left`, `right`.
`scale`	Pixel density multiplier: `2` or `3`.
`format`	Output format: `jpg`, `gif`, `png`, `webp`, `avif`.
`quality`	Compression quality, `0`–`100`.
`blur`	Blur intensity, `0`–`100`.

crop, scale, format, quality, and blur apply to the src URL and every srcset URL. Any other named option — class, loading, style, id, data_*, and so on — is rendered as an HTML attribute. Underscores in attribute names become hyphens (data_index: '1' renders as data-index="1"), a true value renders as a boolean attribute, and false/nil values are omitted.

Automatic behavior

width and height attributes are set from the image’s natural dimensions when available, preventing layout shift.
If the image has a focal point configured, an object-position style is added so crops stay centered on the subject (merged with any style you pass).
All attribute values are HTML-escaped.
If the image is empty, nothing is rendered.

Usage examples

<!-- Simple product image -->
{{ product.featured_image | image_tag: 'large', alt: product.title, loading: 'lazy' }}

<!-- Responsive image with srcset and sizes -->
{{ section.settings.image | image_tag: '1024x',
  widths: '375, 768, 1024, 1440, 1920',
  sizes: '(max-width: 767px) 100vw, 50vw',
  class: 'image-with-text__image',
  loading: 'lazy'
}}

<!-- Building the class dynamically -->
{% liquid
  assign image_class = 'image-with-text__image'
  if section.settings.show_full_width
    assign image_class = image_class | append: ' image-with-text__image--full-width'
  endif
%}
{{ section.settings.image | image_tag: '1024x',
  widths: '375, 768, 1024, 1440, 1920',
  sizes: '(max-width: 767px) 100vw, 50vw',
  class: image_class,
  loading: 'lazy'
}}

img_url

Generate an optimized image URL. Use this when you need just the URL — for example in a CSS background-image — rather than a full <img> tag.

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

It accepts the same size argument as image_tag: a size shortcut from the table below or a custom size ('400x300', '1024x', 'x600'), plus the same URL options (crop, scale, format, quality, blur).

Available sizes

Shortcode	Size (px)
`pico`	96
`icon`	128
`thumb`	160
`small`	220
`medium`	320
`large`	480
`grande`	600
`display`	720
`jumbo`	1024
`master`	1440
`desktop`	1920
`ultra`	3000

Usage examples

<!-- Thumbnail -->
{{ product.featured_image | img_url: 'thumb' }}

<!-- Custom width -->
{{ product.featured_image | img_url: '650x' }}

<!-- WebP at reduced quality -->
{{ product.featured_image | img_url: 'large', format: 'webp', quality: 80 }}

<!-- Background image -->
<div style="background-image: url('{{ product.featured_image | img_url: 'desktop' }}')"></div>

Responsive images

For responsive <img> tags, prefer image_tag with widths and sizes — it builds the srcset for you. If you need manual control, you can still assemble one with img_url:

<img
  src="{{ product.featured_image | img_url: 'jumbo' }}"
  srcset="
    {{ product.featured_image | img_url: 'small' }} 220w,
    {{ product.featured_image | img_url: 'medium' }} 320w,
    {{ product.featured_image | img_url: 'large' }} 480w,
    {{ product.featured_image | img_url: 'jumbo' }} 1024w,
    {{ product.featured_image | img_url: 'master' }} 1440w
  "
  sizes="(max-width: 767px) 100vw, 50vw"
  alt="{{ product.title }}"
  loading="lazy"
>

Getting Started

API

Products

Webhooks

Streaming

Storefront

Shop APIs

Apps

Channel API

Embedded Sections

HTML Sections

AI

Resources

image_tag

Size argument

Options

Automatic behavior

Usage examples

img_url

Available sizes

Usage examples

Responsive images

​image_tag

​Size argument

​Options

​Automatic behavior

​Usage examples

​img_url

​Available sizes

​Usage examples

​Responsive images

image_tag

Size argument

Options

Automatic behavior

Usage examples

img_url

Available sizes

Usage examples

Responsive images