--- title: "Responsive Image Generator – srcset Sizes and Picture HTML" description: "Turn one picture into every width a srcset needs, in AVIF, WebP and JPEG, plus the picture element to paste. Faster pages, sharp on every screen. Free." url: "https://imagecompressor.si/responsive-image-generator" lang: "en" --- # Generate responsive images and srcset HTML One upload gives you each width in modern formats, and the HTML that lets the browser pick the right one. ## How it works 1. **Add your images** Drag and drop, paste, or pick files. They upload over an encrypted connection. 2. **Pick a quality or a target size** Use the quality slider, or tell it exactly how many KB or MB you need. 3. **Download** Save each file, or grab them all at once as a ZIP. A single large picture is either too heavy for a phone or too blurry on a wide screen. Responsive images solve this by offering the browser several widths in a srcset, so a phone downloads a small file and a 4K monitor a large one. Doing that by hand means resizing and exporting the same picture a dozen times and then writing the HTML without a typo. Here you choose the widths, from 320 to 2,560 pixels, and the formats: AVIF and WebP for browsers that read them, JPEG as the fallback everyone reads. The picture element appears as you change the settings, with the folder, the sizes attribute and the alt text you type, and with width and height set so the page does not jump while it loads. Download a ZIP with every file and the HTML. Widths larger than your picture are never made: enlarging would only add weight without detail. The picture is processed on our server and deleted once the ZIP is made. ## Choosing widths Pick widths that match how wide the picture is shown. A full-width hero needs the whole range; a picture in a column that is never wider than 600 pixels needs 320, 640 and 1,280 for sharp screens. More widths mean the browser wastes less, at the cost of more files to upload. ## The sizes attribute sizes tells the browser how wide the picture will be on the page before it has laid the page out, so it can choose a file early. 100vw means the full width of the window. For a picture in a two-column layout, something like (min-width: 800px) 50vw, 100vw is more accurate and saves bytes on large screens. ## Why AVIF and WebP first Both are much smaller than JPEG at the same visual quality, often half the size or less. Browsers that read them take the first source they understand; older ones skip the sources and use the img's JPEG. The order in the HTML is from smallest to most compatible. ## Putting the files on your site Upload all the files to the folder you typed, paste the HTML where the picture belongs, and write a real alt text that describes it. If your site uses a framework with its own image component, the widths and formats from the ZIP still apply; use them in its configuration instead of the HTML. Before publishing, test the page on a phone and a computer and check that the right size loads. ## Frequently asked questions ### Do I need all three formats? No. WebP and JPEG cover every browser; AVIF adds the smallest files where it is read. ### Why are some widths missing? Widths larger than your picture are skipped, and its own width is added as the largest. ### Does it keep transparency? Yes. AVIF and WebP keep it, and the fallback becomes PNG instead of JPEG. ### Is lazy loading right for every picture? Not for the main picture at the top of the page: remove loading="lazy" there so it shows at once. ### Is my picture stored? No. It is resized on our server and the upload is wiped once the ZIP is returned. ### Can I use this from a build step? Yes: POST /api/v1/responsive-images takes the same settings and returns the same ZIP. ### What does the width and height in the HTML do? They tell the browser the picture's shape before it loads, so the text around it does not move when it appears. ## Related tools - [Convert JPG to WebP](https://imagecompressor.si/jpg-to-webp): Get smaller files than JPEG at the same visual quality. - [Convert PNG to AVIF](https://imagecompressor.si/png-to-avif): Keep the transparency, lose most of the file size. - [Optimize every image on a website](https://imagecompressor.si/website-optimizer): Enter an address, a sitemap or a list of pages. Each page is analysed on its own, and you get optimized files in a ZIP with a map of what replaces what.