How are the srcset URLs named?

Each width appends a - w suffix before the file extension, e.g. photo-640w.jpg.

What is the sizes attribute for?

It tells the browser how much space the image occupies so it can pick the right source.

Srcset Generator

Build a responsive img tag with srcset and sizes.

Base image URLWidths (px)Sizes attributeAlt text

Output

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Enter a base image URL and target widths to generate a responsive <img> tag with srcset and sizes attributes.

How to use

Enter the base image URL.
List the widths you want, separated by commas.
Copy the generated responsive img tag.

Frequently asked questions

How are the srcset URLs named?: Each width appends a -<width>w suffix before the file extension, e.g. photo-640w.jpg.
What is the sizes attribute for?: It tells the browser how much space the image occupies so it can pick the right source.

Related tools

Meta Tag Generator
Open Graph Preview
Viewport Meta Generator