Responsive image srcset generator with picture, AVIF and WebP

Give a file name pattern such as /images/hero-{w}.jpg and a list of widths and get an img with srcset and sizes, or a picture element that offers AVIF and WebP first and falls back to your original format.

Live demo · real result from this tool

Press Generate to create a result.

Processed on your device — nothing is uploaded.

How to use the srcset generator

  1. Enter the File name pattern ({w} = width), for example /images/hero-{w}.jpg.
  2. List the Widths you have files for, separated by commas or spaces.
  3. Write the sizes value and the Alt text.
  4. Enter the Intrinsic width and Intrinsic height so the browser can reserve space. Use 0 to leave them out.
  5. Keep <picture> with AVIF and WebP sources ticked if you have those files, and Lazy-load for images below the first screen.
  6. Copy the code.

What it does and when to use it

A phone and a 4K monitor should not download the same image. With srcset you list the same picture at several widths, using the w unit, and with sizes you say how wide it will be displayed. The browser combines that with the screen’s size and pixel density and fetches the smallest file that still looks sharp. A picture element goes further and lets the browser choose a newer, smaller format: AVIF first, then WebP, then the original JPEG or PNG.

Use this tool for hero banners, article images and product photos that appear at different sizes across devices. For a single image with no variants, the HTML Image Tag Generator is simpler. To make the resized files, use the Image Resizer and then the Image Compressor.

How it works

The widths are cleaned up first: duplicates and non-numbers are removed and the list is sorted from small to large. For each width, {w} in the pattern is replaced, giving entries such as /images/hero-480.jpg 480w. For the AVIF and WebP sources, the extension at the end of the pattern is swapped for .avif or .webp, so your files must follow the same naming. The img gets alt, the intrinsic size and, when ticked, loading="lazy" decoding="async". The code is built in your browser.

Worked examples

Plain img, default settings without picture. The srcset lists all five widths: /images/hero-480.jpg 480w, /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w, /images/hero-1600.jpg 1600w, /images/hero-2400.jpg 2400w. The plain src is /images/hero-800.jpg, the first width of at least 800.

With picture. The same settings give two sources before the img:

<source type="image/avif" srcset="/images/hero-480.avif 480w, /images/hero-800.avif 800w, …" sizes="(max-width: 700px) 100vw, 700px">
<source type="image/webp" srcset="/images/hero-480.webp 480w, /images/hero-800.webp 800w, …" sizes="(max-width: 700px) 100vw, 700px">

Messy widths. Pattern /img/card-{w}.png with widths 600 300 600 gives srcset="/img/card-300.png 300w, /img/card-600.png 600w": sorted, with the duplicate removed.

No placeholder. A pattern without {w}, such as /img/card.png, returns the message “Put {w} in the file name pattern where the width goes, for example photo-{w}.jpg.”

Limits and tips

  • Every file listed must exist. A missing width shows as a broken image only on the devices that pick it.
  • Do not lazy-load the main image at the top of the page; untick Lazy-load for it.
  • The pattern’s extension must be at the very end, without a query string, for the AVIF and WebP names to be correct.

Frequently asked questions

Does this tool resize my images?
No. It writes the HTML only. You need the image files at each width, named by the pattern, and in AVIF and WebP if you keep the picture option on. An image resizer or your build tool can make them.
How do I write the sizes attribute?
Describe how wide the image is shown, from the most specific condition to the default. "(max-width: 700px) 100vw, 700px" means full screen width on screens up to 700 pixels and 700 CSS pixels otherwise. If sizes is wrong, the browser may download a file that is too large or too small.
Which widths should I list?
Cover the smallest and largest size the image is really shown at, including high-density screens. An image shown at most 700 pixels wide needs up to about 1400 pixels for a 2x display. Steps of a few hundred pixels are usually enough; more files give finer choices but take longer to produce.
Why does the picture element repeat the img?
The img inside picture is required. It carries the alt text, size and loading attributes, and it is the fallback for browsers that support neither AVIF nor WebP. The source elements only offer alternative files.
Which file is used as the plain src?
The first width of 800 pixels or more, or the largest width if all are smaller. Very old browsers that ignore srcset load that file.

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close