Web Content & Formats
What is WebP?
A modern image format from Google that offers smaller file sizes than JPEG and PNG with comparable quality, supporting both lossy and lossless compression and animation.
WebP was released in 2010 and reaches files roughly 25-35% smaller than equivalent JPEG or PNG without visible quality loss. It supports lossy compression (for photos, replacing JPEG), lossless (replacing PNG), an alpha channel (transparency), and animation (replacing animated GIF, with much smaller files). Browser support is now universal across evergreen browsers.
The format is what most modern sites serve when they want fast page loads. A typical pipeline encodes one master image and serves WebP to browsers that accept it (signaled via the Accept header) with a JPEG/PNG fallback for the long tail. Image CDNs (Cloudinary, Imgix, Vercel Image Optimization) do this automatically.
AVIF is the newer challenger (better compression, slightly slower to encode, narrower legacy support). For most sites, WebP is still the right default in 2026: the savings are real, the support is universal, and the encoding tools are mature. AVIF wins when you have aggressive bandwidth targets and modern-only audiences.
In the wild
- →A Next.js Image component serving WebP to Chrome and a JPEG fallback to older Safari
- →A page-speed audit shaving 200 KB off LCP by converting the hero image from PNG to WebP
- →An animated WebP replacing an 8 MB animated GIF with a 600 KB equivalent
How Brand.dev uses webp
Endpoints in the Brand.dev API where this concept comes up directly.
FAQ
WebP vs AVIF?
AVIF compresses better but is slower to encode and has less universal support. WebP is the safe default; AVIF is the right call for bandwidth-constrained audiences with modern browsers.
Should I serve WebP everywhere?
Yes for raster images. Keep SVG for vectors (icons, logos), keep PNG for screenshots that need lossless detail, and serve a JPEG fallback for the small audience without WebP support.
Does WebP support transparency?
Yes, both in lossy and lossless modes. That is one of its main advantages over JPEG: you can serve a transparent product photo at JPEG-like file sizes.
Related terms
Scalable Vector Graphics, an XML-based image format that describes shapes mathematically, so the image is sharp at any resolution.
A set of three Google-defined page-experience metrics (LCP, INP, CLS) that measure load speed, interactivity, and visual stability, used as ranking signals.