Responsive image generator
To make responsive images, drop one image here. You get every width in WebP and AVIF, plus the <picture> markup with srcset and sizes.
Widths (px)
Formats
Widths larger than the original are skipped: enlarging only adds blur and bytes. Add alt text to the copied HTML.
How did this tool do?
Responsive images: widths, formats and the picture element
A responsive image is one picture saved at several widths, so a phone downloads a 480 px file and a large screen a 1920 px one. The browser picks from the srcset list using the sizes attribute, which says how wide the image is shown at each screen width. Getting this right is one of the easiest ways to make a page load faster.
Pick the widths the image is actually displayed at, times two for high-density screens. Widths larger than the original are skipped, since enlarging only adds blur and bytes. For formats, AVIF is the smallest, WebP is nearly as small and works in every current browser, and JPG is the fallback for anything older; the generated <picture> element lists them in that order so each browser takes the first it supports.
The ZIP holds every file, named name-width.format, plus picture.html with the markup. Set the folder the files will live in, add your own alt text, and paste it into your page. The width and height attributes are filled in so the browser can reserve space and the layout doesn't jump while the image loads.
Where you'll meet it
Blog images
Three widths for a content column, in AVIF and WebP.
Hero images
Full-width images from 640 to 2560 px.
Core Web Vitals
Smaller downloads and no layout shift on load.
How to use it
- 01Drop one image.
- 02Tick the widths and formats you want, and set the path the files will live at.
- 03Download the ZIP and paste the generated <picture> HTML into your page.
Responsive images, answered
Which widths should I pick?
Cover the widths the image actually displays at, times two for high-density screens. A full-width hero needs 640 to 2560; a blog image in an 800 px column needs 400, 800 and 1600.
Why AVIF and WebP with a JPG fallback?
Browsers take the first format they support from the <picture> sources: AVIF is the smallest, WebP nearly as small and universal, and the JPG covers anything older.
Are my images uploaded?
No. Everything happens in your browser, so your images never leave your device.