Produce srcset and sizes for an image

Front-end developers use it when one image must stay sharp across screens without forcing every visitor to download the largest file.

Produce srcset and sizes for an image. The result stays in your browser, ready to review, copy and adapt without an account or any transfer of your input.

How to use

Enter the image file name, for example photo.jpg.
Type the maximum displayed width in pixels.
Run the generator to produce the srcset and sizes attributes.
Copy the generated markup into your image element.

Example

A front-end integrator is preparing a banner that must stay sharp on phones and large screens. They enter photo.jpg and a maximum width of 1200 pixels, then generate the attributes. The code is pasted into the template so the browser can choose. They also prepare the image files at the widths suggested by the output.

Input

photo.jpg
1200

Limits and formats

The tool creates markup for one image; it does not resize image files.
The image variants must exist at the widths suggested in the output.
The final choice also depends on the browser and screen density.
Check file paths and names before publishing the markup.
The generated code does not replace visual checks on several devices.

Where processing happens

The details you type are processed inside your browser to build the responsive markup. No image file is uploaded and no information is sent away. You can copy the result as soon as it appears.

Frequently asked questions

Does this tool resize my image?

No, it does not change the image file itself. It only generates srcset and sizes attributes from the name and width you provide. Prepare the different image versions with a separate resizing tool.

Why are several widths listed?

The browser picks the version that best fits the screen and pixel density. Offering several widths helps avoid sending a large file to a small device. The exact values follow the maximum width you entered.

Can I use this for a CSS background image?

The srcset and sizes attributes are for image elements, not CSS backgrounds. For backgrounds, use media queries or adaptive CSS techniques. Match the method to how the image is displayed.