When WebP helps
Google says lossless WebP images are 26% smaller than PNGs, and lossy WebP images are 25–34% smaller than comparable JPEGs at the same quality score (Google’s WebP page). Large images are a common cause of a slow Largest Contentful Paint. Google Search can index WebP: its image guidance lists it next to JPEG and PNG, so the format doesn’t hide a picture from image search.
Current browsers all show WebP. MDN notes that Safari on a Mac needs Safari 14 and macOS Big Sur or later, so keep a JPEG or PNG fallback if you support older ones.
Choosing quality and size
- Start at 80 and look at the result at the size it will be shown. Photos take more compression than screenshots with small text.
- In Chrome, 100 writes a lossless WebP file. For flat graphics such as logos it can come out smaller than the PNG. For photos it is far bigger.
- Set a longest side. A 4,000 px photo shown in an 800 px column carries pixels nobody sees. The tool never enlarges.
- If a result is bigger than the original, which happens with small or already compressed images, the row says so. Keep the original.
Putting the files on a page
Google recommends a fallback in the src attribute whenever you use a picture element or srcset:
<picture>
<source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="(min-width: 900px) 800px, 100vw">
<img src="hero-800.jpg" width="800" height="450" alt="Weekly signups on the dashboard">
</picture>Then do what a converter can’t. Describe the image in alt text, which Google calls the most important attribute for image metadata (check a page’s alt text, or draft it with the alt text generator). Give the file a short, descriptive name, and set width and height so the page doesn’t jump as it loads.
What it leaves out
- Animation. A browser draws one frame of a GIF to a canvas, so only the first frame is converted and the result is a still picture. The row tells you when a file has more frames.
- Metadata. Redrawing an image drops EXIF data such as the camera model and GPS position.
- Safari. It can show WebP but, per the MDN compatibility table, can’t write it from a canvas, so there the tool converts to JPEG or PNG only.