Resize images by pixels or percentage with fit, fill and exact modes — one image or many at once.
Open toolWebsite Image Optimizer
Generate responsive, web-ready image sizes and a matching <picture> snippet for fast-loading pages.
Loading tool…
How to use Website Optimizer
- Upload a single high-resolution image.
- Choose a use case, the widths, format and quality.
- Generate the sizes and copy the HTML snippet.
- Download everything (including the snippet) as a ZIP.
About this tool
The Website Image Optimizer generates several responsive widths (and optional 2x versions) in WebP or JPG, then produces a ready-to-paste <picture>/srcset snippet whose filenames match the files you download.
Recommended settings
- WebP with quality ~80 is an excellent default for web delivery.
- Include 2x versions so images stay crisp on high-DPR screens.
Supported formats
Input: JPEG, PNG, WEBP, AVIF, GIF, BMP. Output: WEBP, JPEG.
Quality & file size
Lossy formats (JPEG, WebP, AVIF) trade detail for smaller files as you lower the quality; PNG stays lossless regardless of the slider. The tool always shows the original and result sizes so you can judge the trade-off, and it never recommends a result that is larger than your original as an “optimisation”.
Privacy
Every image is decoded, transformed and re-encoded entirely in your browser using the Canvas API and a Web Worker. Files are never uploaded, are not stored in localStorage, and are cleared from memory when you remove them or close the page.
Common issues & limitations
- Upscaling beyond the source width is skipped to avoid soft images.
- This tool processes one source image at a time.
- All processing happens on your device; nothing is uploaded, so very large batches are limited by your available memory.
Frequently asked questions
What does this tool output?
It produces multiple widths (e.g. 480, 768, 1200 px) in WebP or JPG plus a ready-to-paste <picture>/srcset snippet whose filenames match the downloaded files.
Does the HTML match the files?
Yes. The generated snippet always references the exact filenames produced in the ZIP, so you can drop them straight into your project.
Are my images uploaded to a server?
No. Every image is decoded, processed and encoded entirely inside your browser using the Canvas API. The files never leave your device and are discarded when you close the page.