Why image weight still matters
Images are usually the heaviest thing on a page and very often the Largest Contentful Paint element, the single metric Google weighs most in Core Web Vitals. A 4 MB hero photo straight off a phone can take several seconds on a mobile connection. The same photo resized to 1920 pixels wide and saved as WebP at quality 80 is often under 250 KB and looks identical on screen.
A sensible workflow
1. Resize first
Compression settings matter far less than pixel dimensions. Nobody needs a 6000 pixel photo in a 1200 pixel content column. As a rule of thumb, export full-width heroes at 1920 to 2400 pixels wide, content images at about twice their displayed CSS width for retina screens, and thumbnails at 400 to 800 pixels.
2. Choose the format
- WebP: the everyday choice. Supported by every current browser, handles transparency, and is typically 25 to 35 percent smaller than JPEG at similar quality.
- AVIF: smaller again, especially on photos with smooth gradients, but slower to encode. This tool enables it only when your browser can encode it.
- JPEG: for email, older CMS platforms and anywhere that rejects modern formats.
- PNG: lossless. Use it for screenshots with text, UI mockups and flat graphics, not photos. The quality slider has no effect on PNG.
3. Check the result
Drag the comparison divider across faces, skies and edges with text. Banding in skies and blotchy skin are the first signs of over-compression. If the output is larger than the original, the tool flags it: keep the original file in that case.
Serving modern formats with a fallback
If you want AVIF savings without leaving older browsers behind, export the image twice and let the browser pick the best one it supports:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Garden terrace at dusk"
width="1920" height="1080" fetchpriority="high">
</picture>
Keep the width and height attributes so the browser reserves space and avoids layout shift. Add loading="lazy" to images below the fold, but never to the hero.
Privacy and metadata
Photos from phones carry EXIF data that can include the exact GPS location where they were taken. Re-encoding through a canvas drops all of it, which is good for privacy and saves a few kilobytes. If you need to keep copyright metadata, add it back in your photo editor after compressing.
Frequently asked questions
Are my images uploaded anywhere?
No. Decoding, resizing and encoding all happen in your browser using the canvas API. The files never leave your device, so it is safe for client work and unreleased product shots.
Should I use WebP or AVIF?
WebP is the safe default: every current browser supports it and it is typically 25 to 35 percent smaller than JPEG. AVIF is often smaller again, but encoding is slower and older Safari versions cannot display it. Many sites serve AVIF with a WebP fallback.
Why is the AVIF button disabled?
Your browser can display AVIF but cannot encode it from a canvas. Chrome and Edge support AVIF encoding. On Safari or Firefox, use WebP or switch browsers for AVIF output.
What quality setting should I use?
Start at 75 to 82 for photos. Below about 60, artifacts start to show around edges and text. Use the comparison slider at full size to check faces, skies and fine detail before you commit.