What WebP actually is no marketing fluff

Google's image format from 2010. Does what JPEG does, but smarter and smaller. Usually 25–40% smaller files at roughly the same visual quality sometimes better quality at the same file size.

It also does things JPEG never could: transparency like PNG, animations like GIF but far smaller, and lossless compression when you need it. Not just a "smaller JPEG" it replaces JPEG and most PNG use-cases on the web.

Why it took so long to become normal

Safari ignored it until 2020. For ten years you had to do the annoying <picture> fallback dance or risk broken images on iPhones.

Now? 96–97% browser support. Every iPhone since 2020, every modern Android, Edge, Firefox, Chrome all fine. The last real excuse disappeared years ago.

Real size differences I've actually measured

From a batch of 200+ photos at 2000–3000px wide:

On graphics and logos with transparency the savings are even bigger. A PNG logo at 140 KB often drops to 25–45 KB as lossy WebP and still looks sharp.

What WebP is actually good for

• Photos → 25–40% smaller than JPEG
• Logos, icons, illustrations → transparent + much smaller than PNG
• Simple animations → 4–8× smaller than GIF
• Lossless mode → still beats PNG by 20–35% in most cases

How I convert images to WebP

Most of the time: Compressify

1. Open the Format Converter works on mobile
2. Drag in JPEGs or PNGs (batch is fine)
3. Select WebP as output
4. Quality 80–84% for photos, 85–90% for graphics
5. Download done in seconds

I throw 50–150 images at it when updating a site. 1–4 minutes total. Nothing leaves my device.

Other methods

• Next.js: Use <Image> converts to WebP automatically
• WordPress: ShortPixel or WebP Express plugin set and forget
• Command line: cwebp (Google's tool) or sharp in Node
• Photoshop: Export as WebP supported since ~2022

How to serve WebP on a website

Simple 2026 approach:

<img src="/photo.webp" alt="..." loading="lazy" />

With JPEG fallback for maximum safety:

<picture>
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" alt="..." loading="lazy" />
</picture>

Most sites I work on now just use .webp directly. The 3–4% without WebP support almost never complain.

Quality settings I use

80% is my starting point 90% of the time. Almost always looks great. If I notice weirdness I bump to 84–86%.

When I still don't use WebP

• Email campaigns Outlook still won't render it
• Sending files to non-technical clients JPEG is safer
• Print work printers want JPEG or TIFF
• Very old editing software that can't open .webp

For everything that lives on a website and is viewed in a browser? WebP is almost always right now.

Reality check from someone who switched years ago

My blog used to be ~2.7–3.1 MB per page (mostly images). After WebP plus lazy loading: ~1.7–2.1 MB. Load time on 4G dropped from ~6–7s to ~3.5–4.5s. Bandwidth usage down 30–35%.

Real user experience improvement, lower CDN costs, small SEO boost all from changing file formats and quality sliders. Related: full format comparison and how image weight affects page speed.

Where to start today

1. Pick your 5–15 most visible images
2. Convert them to WebP at 80–84%
3. Replace on site
4. Check PageSpeed before and after you'll see it
5. Do the next batch when you have 10 minutes

No need to convert your entire archive at once. Start with what people actually see.

Frequently asked questions