Shopify Image URL Builder

Builds Shopify's image_url width, crop and format parameters as Liquid, or rewrites an existing CDN URL.

Your details

Image

Output

Image object

Size and crop

Width

0 to leave out. Up to 5760 px.

Height

0 to leave out.

Crop

pad_color

Pads instead of cropping when the shape differs.

format

Tag

Wrap in image_tag (adds srcset)

srcset widths

sizes

Alt text

Your image_url code

{%- # URL only -%}
{{ product | image_url: width: 800, height: 800, crop: 'center' }}

{%- # As an <img> with srcset, width and height -%}
{{ product | image_url: width: 800, height: 800, crop: 'center' | image_tag: sizes: '(min-width: 750px) 50vw, 100vw', loading: 'lazy' }}

On your storefront this becomes a URL like //your-store.com/cdn/shop/files/image.jpg?crop=center&height=800&v=1716400000&width=800

What image_url does

image_url is Shopify's filter for resizing and cropping any image object (a product, a variant, a section's image setting and so on) without you generating separate file sizes yourself. Shopify's CDN does the resizing on request and caches the result.

Parameter	What it does
width, height	Target size in pixels. At least one is required; both together crops or pads to that shape. Up to 5760 px.
crop	center, top, bottom, left, right, or region for an exact rectangle (with crop_left/top/width/height).
pad_color	Pads instead of cropping when the shape differs, filling the gap with this color.
format	Shopify can only convert PNG to jpg or pjpg, and jpg to pjpg. Leave it on automatic and Shopify serves WebP or AVIF itself to browsers that support them.

Using it in a theme

01
Pick your image object
Choose what you're resizing: the product's featured image, a variant image, a section or block's image setting, or something else. Section and block images can be blank, so wrap them in an {% if %} check, which the generated code includes automatically.
02
Set width and height
For a fixed card size (like a product grid), set both and pick a crop position. For a banner that should never crop, leave height at 0 and only set width.
03
Wrap it in image_tag
Turn on Wrap in image_tag to also get a full <img> element with width, height, alt text and a default srcset, not just the URL.

Common mistakes

Setting format manually. Shopify already serves WebP or AVIF automatically to browsers that support them when format is left on automatic; forcing jpg or pjpg turns that off.
Requesting a size the source doesn't have. Shopify won't enlarge beyond the image's original upload, so a small source image just returns at its own size.
Forgetting the blank check on section or block images, which throws a Liquid error on a section where the merchant hasn't picked an image yet.

Questions people ask

What's the difference between image_url and image_tag?

image_url returns just the resized image's URL as a string. image_tag wraps that in a full <img> element, adding width, height, alt text and a default srcset for you.

What's the maximum size I can request?

5760 px for width and height, per Shopify's own filter documentation. Requesting more than that, or more than the image's original size, doesn't enlarge it.

Can I convert an image format with image_url?

Only in one direction: Shopify can convert PNG to jpg or pjpg, and jpg to pjpg. It can't convert to WebP or AVIF on request; those are served automatically by Shopify's CDN when you leave format on automatic.

How do I crop to an exact rectangle instead of a position?

Set crop to region and fill in crop_left, crop_top, crop_width and crop_height, all in pixels from the top-left of the original image.

Last reviewed 30 September 2026.

Sources: Shopify.dev: image_url filter · Shopify.dev: image_tag filter

Your details

What image_url does

Using it in a theme

Pick your image object

Set width and height

Wrap it in image_tag