JPG to WebP: How It Works
WebP produces files 25–35% smaller than JPEG at equivalent visual quality, and it supports transparency and animation, which JPEG does not. Browser support has been universal for years, which makes this one of the least controversial optimisations available.
What you gain
| JPEG | WebP | |
|---|---|---|
| Lossy compression | Yes | Yes, more efficient |
| Lossless mode | No | Yes |
| Transparency | No | Yes, with lossy compression |
| Animation | No | Yes |
| Typical 800 KB photo | 800 KB | ≈ 550 KB |
Lossy transparency is the underrated feature. Previously, an image needing transparency had to be PNG and therefore large. WebP removes that trade-off entirely — a transparent product photograph can be a fraction of its PNG size.
Compression is not free a second time
Converting an existing JPEG to WebP re-encodes already-lossy data. The result is smaller, and it inherits every artefact the JPEG already had, plus a small amount more. Where you have the original — a RAW file, a PNG export, an uncompressed master — encode WebP from that instead. The difference is visible in gradients and skies.
Where the JPEG is all you have, converting is still worthwhile: the size saving usually outweighs the marginal additional loss.
Serving it correctly
Use the picture element so browsers that cannot handle WebP receive a fallback:
<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Description" width="800" height="600"> </picture>
The browser takes the first format it supports. Always include width and height so the layout does not shift as images load — this is one of the largest contributors to a poor Cumulative Layout Shift score.
Where WebP is still awkward
- Email. Support across email clients remains inconsistent; use JPEG or PNG in email.
- Older desktop software and some printing workflows may not open it.
- Social sharing. Some platforms handle WebP poorly in link previews; JPEG or PNG is safer for Open Graph images.
- Users saving images. A downloaded WebP may not open in older tools, which occasionally generates support questions.
What about AVIF
AVIF is typically 30–50% smaller again than WebP at similar quality, with better handling of gradients and high dynamic range. Encoding is slower, which matters at build time but not at serve time. The sensible approach today is to offer AVIF first, WebP second and JPEG as the fallback — three files generated once, and every visitor gets the best format their browser supports.
Conversion here runs in your browser; nothing is uploaded.