Required width
w = s × d
A 390 px slot at density 3 needs 1,170 px: the 1280w variant is chosen.
Responsive image generator
Generate PNG, JPEG, or WebP variants locally and get responsive HTML markup ready to integrate.
- Clipboard
- Batch processing
- Export
Your files are processed locally in your browser and are never sent to our servers.
Add a PNG, JPEG, or WebP image. Every variant is generated locally in your browser.
Drop your file here
Recommended size: up to 25 MB
Need more editing options?
Use multiple editing tools in one workspace, with your open file and its current edits.
Open the full editorWas this tool useful?
How does this tool work?
A single large image slows phones down, a single small one looks blurry on a Retina screen. This generator creates several widths of the same image in WebP, JPEG or PNG, then writes the HTML picture markup with srcset and sizes: the browser then downloads the file that best fits the screen and the layout. Everything is computed in your browser.
Import a PNG, JPEG or WebP image of up to 25 MB. Tick the widths you want among 320, 480, 640, 768, 1,024, 1,280, 1,600 and 1,920 px (the first six are ticked by default) or enter custom widths separated by commas. The height always follows the original's proportions.
Choose the formats (WebP and JPEG by default, PNG as an option) and the JPEG/WebP quality, from 40 to 100% (82% by default). Widths larger than the original are skipped unless you allow upscaling. Each variant is named name-width.extension, for example summer-beach-640.webp: the name is lowercased, without accents or spaces.
The generated code contains a picture element: one source tag per modern format (WebP first) and an img fallback in JPEG, or in PNG without JPEG, whose src points to the largest variant. The sizes attribute uses what you typed, and loading="lazy" and decoding="async" are added. Download all variants, then copy the code.
How to use this tool
Import the image
Add the largest, sharpest version you have.
Set the variants
Choose widths, formats, quality and the sizes attribute of your layout.
Download and embed
Get the files, copy the code and fill in the alt attribute.
Which width does the browser download?
The browser multiplies the width given by sizes by the screen's pixel density, then usually picks the smallest srcset variant that reaches that result.
- w
- required image width in pixels
- s
- display width given by sizes, in CSS pixels
- d
- screen pixel density (devicePixelRatio)
Use cases
An article's hero image
Serve 320 px to phones and 1,280 px to large screens from a single photo.
Move a site to WebP
Offer WebP to browsers that support it while keeping a JPEG fallback.
Improve LCP
Reduce the weight of a page's most visible image to speed up its display.
Examples
2,400 × 1,600 px photo with default settings
Six widths × two formats. The code puts the WebP source first and an img summer-beach-1280.jpg with its JPEG srcset as the fallback.
Input
Summer beach.jpg, widths 320 to 1,280, WebP + JPEG, quality 82%Result
12 files, from summer-beach-320.webp (320 × 213) to summer-beach-1280.jpg (1,280 × 853)Which file does the browser pick?
On a density 1 computer, the 768 px slot takes the 768w variant; at density 2 it would need 1,536 px: tick 1,600 px to cover it.
Input
sizes="(max-width: 768px) 100vw, 768px"Result
390 px phone at density 3: 1,170 px → 1280w variantTips and best practices
- Write a sizes attribute that matches the layout: with 100vw on an image shown at 600 px, the browser downloads a file that is too heavy.
- Include a variant about twice the maximum display width for high-density screens.
- The code contains alt="": replace it with a description, except for a purely decorative image.
- Don't use loading="lazy" on the main image visible on load: remove it so LCP is not delayed.
Sources and references
- WHATWG, HTML Living Standard — Images and responsive images (opens in a new tab)Page in English
Frequently asked questions
What is the sizes attribute for?
It states the image's display width depending on the screen. With srcset, the browser works out which file to download before it even knows the layout.
Why were some widths not generated?
They exceed the original's width. Upscaling adds no detail; enable the option only if you need it.
Why WebP and JPEG together?
WebP is lighter at equal quality; the JPEG in the img tag is the fallback for browsers or tools that cannot read WebP.
Are the files bundled in a ZIP?
No, each variant is downloaded separately; your browser may ask you to allow multiple downloads.
Does the quality apply to PNG?
No. PNG is lossless: the quality slider only affects JPEG and WebP.
Is my image uploaded to a server?
No. Resizing and encoding happen in your browser.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Resize an image by setting its exact width and height before downloading the result.
Images & graphicsFeaturedUse this tool
Lighten an image by setting its quality or aiming for a size in KB, with the final size shown before download.
Images & graphicsFeaturedUse this tool
Convert an image to PNG, JPEG, or WebP and adjust output quality before download.
Images & graphicsFeaturedUse this tool
Read next
GuideFormatsBeginner
PNG, JPEG, WebP, or AVIF: Which Image Format Should You Choose?
Choose the right image format for photos, screenshots, transparent graphics, and interfaces without sacrificing quality or performance unnecessarily.
31 August 202618 min
TutorialBest practicesBeginner
How to Compress an Image Without Unnecessary Quality Loss
Reduce image file size with appropriate dimensions, format, and controlled quality while avoiding unnecessary visible degradation.
31 August 202619 min
GuideBest practicesIntermediate
Responsive Images: Understanding srcset and sizes
Understand srcset, sizes, width and density descriptors, picture, art direction, and how browsers choose the right responsive image candidate.
31 August 202613 min
NewsFormatsIntermediate
WebP, AVIF, JPEG XL: which image formats should you choose in 2026?
WebP, AVIF and JPEG XL have different strengths. Compare compatibility, compression, transparency, HDR and fallback strategies in 2026.
30 August 20264 min