EspañolResponsive image generator (srcset and sizes)
Pick the image, the widths and how it appears on the page. Phones download the small version and large screens the bigger one, with nothing for you to do.
How to useThe right photo for every screen
Available in: 
Responsive image generator (srcset and sizes): what it is for
Responsive images make phones download a small photo and large screens a bigger one, which makes the site faster without losing sharpness. That takes several sizes of the same photo and code with srcset and sizes.
Upload the image, choose the widths, format and quality, and download every version in a .zip. The code comes ready with srcset, sizes matching where the image sits on the page, width and height so the layout doesn't shift, loading=lazy or fetchpriority=high (with preload) for the main image, and optionally <picture> with a JPG fallback. Everything runs on your device.
How to use
- Pick the image.
- Set the widths, format and where it appears.
- Download the .zip and copy the code.
When to use it
- Product photos in online stores.
- Hero image on landing pages.
- Galleries and blogs.
Frequently asked questions
What do srcset and sizes do?
srcset lists versions of the same image with the width of each (for example 640w, 1280w). sizes tells how much space the image takes on screen. With both, the browser picks the smallest version that stays sharp on that screen, and phones don't download a 2000 px photo.
Why width and height on the tag?
With width and height, the browser reserves the image's space before it loads, so the text doesn't jump down when the photo appears. This improves CLS, one of Google's Core Web Vitals metrics.
When should I use loading=lazy?
On images further down the page. The main image, visible as soon as the page opens, should never be lazy: it gets fetchpriority=high to load as early as possible.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.