Srcset Generator

Builds a responsive `srcset` and `sizes` attribute for an image, as HTML or Shopify Liquid, matched to your layout.

Your details

Image

Output

Image URL with {width}

Where your image service puts the width. Shopify: ?width={width}. WordPress resized copies: -{width}x{height}.jpg style names differ per size, so list them by hand.

Widths to offer (px)

Image width (intrinsic)

Used for the width and height attributes, which stop layout shift.

Image height (intrinsic)

Alt text

Layout (for the sizes attribute)

How wide the image displays

Container max width

Desktop breakpoint

Columns on desktop

Columns on mobile

This is the main (above the fold) image

Loads it eagerly with high priority instead of lazily.

Paste this where the image goes in your template

<img
  src="https://cdn.example.com/images/linen-shirt.jpg?width=1100"
  srcset="https://cdn.example.com/images/linen-shirt.jpg?width=375 375w,
          https://cdn.example.com/images/linen-shirt.jpg?width=550 550w,
          https://cdn.example.com/images/linen-shirt.jpg?width=750 750w,
          https://cdn.example.com/images/linen-shirt.jpg?width=1100 1100w,
          https://cdn.example.com/images/linen-shirt.jpg?width=1500 1500w,
          https://cdn.example.com/images/linen-shirt.jpg?width=2200 2200w"
  sizes="(min-width: 1200px) 300px, (min-width: 750px) 25vw, 50vw"
  width="2200"
  height="2750"
  alt="Sand linen shirt, front view"
  loading="lazy"
  decoding="async"
/>

What browsers pick: Phone 390 px @3x needs about 585 px, gets 750w; Tablet 768 px @2x needs about 384 px, gets 550w; Laptop 1440 px @2x needs about 600 px, gets 750w; Desktop 1920 px @1x needs about 300 px, gets 375w.

What srcset and sizes actually do

srcset lists the widths a file is available at. sizes tells the browser how wide the image will actually display at different viewport widths, before it downloads anything. Together they let the browser pick the smallest file that's still sharp enough, without you writing separate markup per breakpoint.

Pick your layout (full width, a max-width container, half-width gallery or a grid with a column count) and the tool writes the matching sizes value for you, since getting that string right by hand is the most common source of images loading larger than they need to.

Example: a 4-column product grid, 2 columns on mobile, 1200 px container

sizes generated: (min-width: 1200px) 300px, (min-width: 750px) 25vw, 50vw
Phone (390 px @3x): needs about 585 px, picks the 750w file
Desktop (1920 px @1x): needs 300 px, picks the 375w or 550w file

The tool lists what each of four common device sizes picks from your width list, and warns if any of them would need a file wider than the largest one you've offered.

Using the code

01
HTML
Paste the <img> tag into your template, with your own image URLs replacing the {width} placeholder wherever your image host supports resizing by URL parameter.
02
Shopify Liquid
Switch Output to Liquid. It builds image_url and image_tag together, so Shopify generates the URLs, width, height and alt text itself; you only supply the widths and layout.
03
The main image on a page
Turn on This is the main (above the fold) image for your largest visible image (a hero banner or the product's featured photo). It switches to eager loading with high priority instead of the default lazy loading, which helps your page's Largest Contentful Paint.

Questions people ask

What's the difference between srcset and sizes?

srcset lists which file widths exist. sizes tells the browser how wide the image will display at different viewport widths, so it can pick the right file from srcset before downloading anything.

Do I need this on Shopify if I use image_tag?

Shopify's image_tag filter builds a default srcset for you, but its default widths and sizes value are generic. Use this tool to generate a sizes value that actually matches your section's layout, and pass your own widths where your layout differs from the default.

Should every image use loading='lazy'?

No. Your largest above-the-fold image (usually a hero banner or a product's main photo) should load eagerly with high priority instead, since lazy-loading it can delay your page's Largest Contentful Paint.

Why does the tool warn some screens will get a soft image?

If a device's calculated display width, times its pixel density, is larger than your biggest listed width, the browser has to use your largest file anyway and it'll look slightly less sharp on that screen. Add a wider width to your list if your original photo is large enough.

Last reviewed 30 September 2026.

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

Your details

What srcset and sizes actually do

Using the code

HTML

Shopify Liquid

The main image on a page

Questions people ask

What's the difference between srcset and sizes?

Do I need this on Shopify if I use image_tag?

Should every image use loading='lazy'?

Why does the tool warn some screens will get a soft image?

Related tools

Want this builtinto your store?