About the Responsive Image Resizer & srcset Generator
Responsive images let phones download a small file while large screens get a sharper one. This image resizer creates several widths of your image in the browser, lets you download each size, and writes the matching HTML: an img element with srcset and sizes, or a picture element if you prefer.
Using this srcset generator means you do not have to calculate file names and widths by hand. Choose widths that match how the image is displayed in your layout, for example full width on mobile and a half-width column on desktop, and set the sizes attribute to describe that. Keep width and height attributes so the browser can reserve space and avoid layout shift. All resizing happens on your device; nothing is uploaded.
How to use it
- Add an image and choose the widths you need.
- Set the sizes value that matches your layout.
- Download each resized image.
- Copy the generated srcset or picture HTML into your page.
Frequently asked questions
What widths should I include in srcset?
Pick widths that cover the sizes your layout actually uses, including higher-density screens. A common approach for a full-width image is a range such as 480, 768, 1024, 1440 and 1920 pixels. Avoid creating sizes larger than the original image.
What does the sizes attribute do?
Sizes tells the browser how wide the image will be shown at different screen widths, for example 100vw on mobile and 50vw on larger screens. Together with srcset, the browser uses it to choose the most suitable file before the layout is calculated.
When should I use picture instead of img srcset?
Use img with srcset when you only need different sizes of the same image. Use picture when you need different formats with fallbacks, such as AVIF and WebP with a JPG fallback, or a different crop for mobile and desktop.