Optimize Images to WebP / AVIF
A developer-focused image optimizer: drop in your assets, compress to WebP or AVIF, see exactly how many
bytes you saved per file, and copy ready-made <picture> snippets with fallbacks.
Everything is processed in your browser — nothing is uploaded.
No images yet. Drop JPG, PNG, WebP, AVIF or TIFF files above to optimize them.
How it works
Images are usually the heaviest part of a web page, and the format they're saved in matters more than almost any other optimization. A JPEG exported from a camera at quality 95 can often be re-encoded as WebP at quality 80 — visually identical, half the bytes. This tool exists to make that conversion mechanical: drop assets in, pick settings, get optimized files plus the HTML to serve them correctly.
Each file is decoded in your browser, optionally downscaled to your max width (aspect ratio preserved — images are never stretched), then re-encoded to WebP or AVIF at your chosen quality. The report per file shows before size, after size and percentage saved, so you can make informed trade-offs instead of guessing. Batch mode plus ZIP download covers whole asset folders; per-file downloads cover one-offs.
The <picture> snippet is the part most optimizers skip. Serving a .webp
file directly works in modern browsers, but the robust pattern is a <picture> element
listing AVIF first, then WebP, with your original file as the <img> fallback — the
browser picks the first format it understands. Each snippet references the converted filename
(photo.webp or photo.avif) alongside your original as the fallback; host all
three side by side and paste the markup. The Copy button uses the clipboard API with a legacy fallback,
and the snippet includes loading="lazy" and an alt placeholder you should
replace with a real description.
Practical guidance on settings: for photographs, WebP at 75–85% is the web's workhorse range; AVIF at 60–70% often matches it at notably smaller sizes but encodes slower (you'll feel it on big batches). Set max width to the largest size the image will actually display — 1600px covers most full-width hero images, and downscaling a 6000px original before encoding is frequently the biggest single saving. Two honest caveats: AVIF encoding support varies by browser (if it fails, the error says so — retry in Chrome, Edge or Firefox), and re-encoding an already-optimized WebP as AVIF yields diminishing returns; always optimize from the highest-quality source you have.
Frequently asked questions
What does the <picture> snippet do?
It serves modern formats with automatic fallback: browsers that understand AVIF get the AVIF, others fall back to WebP, and ancient browsers get your original file. You get the smallest possible download for every visitor with zero broken images.
Should I choose WebP or AVIF output?
AVIF compresses better — often 20–30% smaller than WebP at the same quality — but encodes slower and isn’t supported by very old browsers. WebP is the safe default; AVIF is the maximum-savings option. The snippet can reference both.
What quality setting should I use?
For photos, 75–85% WebP quality is the sweet spot most of the web uses — visually clean at a fraction of the original size. Thumbnails can go lower (60–70%); hero images deserve 85–90%. Trust your eyes: compare the before/after at 100% zoom.
What does “max width” do?
It downscales images wider than the value you set, keeping the aspect ratio. Most web images never need to be wider than 1600–2000px — resizing a 6000px camera photo before encoding is often the single biggest saving.
Are my images uploaded?
No. Encoding, resizing and snippet generation all happen locally in your browser. Your images are processed in your browser — nothing is uploaded to any server.