Responsive image generator
Crop a photo to any shape, then export resized WebP, AVIF, JPEG or PNG files at once with ready-to-paste<picture>/srcset HTML - nothing is uploaded, it all runs on your device.
Source
Crop shape
Output widths
Formats
Markup
Advanced options
About responsive images
A responsive image isn't just one file scaled down by the browser - it's a set of differently-sized files, with the browser choosing whichever one best fits the visitor's actual screen. A phone downloads a phone-sized file, a widescreen monitor downloads a larger one, instead of everyone downloading the same oversized original. The <picture> element and srcset/sizes attributes are the standard way to offer that choice, along with modern formats like WebP and AVIF that compress noticeably smaller than JPEG at the same visual quality.
This tool builds both halves of that at once: crop your photo to the shape you need, export it at several widths and formats, and get the matching HTML in one step - work that's normally done with a separate image editor and a fair bit of manual file naming.
It's also a direct fix for two of Google PageSpeed Insights' and Lighthouse's most common warnings: "serve images in next-gen formats" (checking AVIF or WebP above addresses this) and "properly size images" (the responsive width set addresses this, instead of one oversized file scaled down by CSS).
Frequently asked questions
How do I fix PageSpeed's "serve images in next-gen formats" warning?
That warning means an image is being served as JPEG or PNG when a smaller format would look the same - check AVIF and/or WebP above, generate, and swap the resulting code into your page. The same output also fixes the separate "properly size images" warning, since it gives you correctly-sized files for different screen widths instead of one large image being scaled down in the browser.
Does this upload my photo anywhere?
No - cropping and compressing both happen on your own device. The photo never leaves it, and the finished files only go anywhere when you choose to download them.
Which format should I actually use?
Include WebP at minimum - it's supported by every current browser and is noticeably smaller than JPEG at the same quality. Add AVIF too if you don't mind the extra export time; it compresses even better still. Keep JPEG or PNG checked as the fallback for the rare older browser that supports neither.
What does the "sizes" attribute actually do?
It tells the browser how wide the image will actually be drawn on the page at different viewport widths, before it has to guess from the layout. The default, 100vw, means "always the full viewport width" - correct for a full-width banner, but if your image only ever appears at, say, half the viewport width on desktop, a more accurate value (e.g. (min-width: 800px) 50vw, 100vw) lets the browser pick a smaller file there. The "How wide will this image display?" dropdown above the field fills this in for the common cases - pick "Custom" there to write the syntax yourself if your layout's breakpoint isn't the 800px guess it uses.
Why are some of my chosen widths missing from the output?
A width gets skipped if it's larger than your source photo can actually provide at the current crop and zoom - generating it would mean upscaling and blurring the image, not a genuine extra size. Zoom out in the crop frame (or start with a higher-resolution photo) to unlock larger widths.