WebP
WebP is an image format developed by Google that provides lossy and lossless compression, typically producing files 25-35% smaller than JPEG and PNG at equivalent visual quality.
WebP supports both lossy compression (like JPEG, for photos) and lossless compression (like PNG, for graphics with transparency). Browser support is now universal across Chrome, Firefox, Safari, and Edge, making it safe to use as the default image format.
Compared to JPEG: WebP produces 25-34% smaller files at equivalent SSIM quality. Compared to PNG: WebP lossless is 26% smaller. WebP also supports animation (replacing GIF) and transparency (replacing PNG alpha channels) in a single format.
Next.js automatically serves WebP (or AVIF) when supported by the browser via its image optimization pipeline. If you are handling images manually, use `sharp` for server-side conversion or `<picture>` with `<source>` elements for client-side format negotiation.
Example
// Next.js automatically serves WebP
import Image from "next/image";
<Image src="/photo.jpg" alt="Photo" width={800} height={600} />
// Served as WebP to supporting browsers automatically
// Manual format negotiation with <picture>
<picture>
<source srcSet="/photo.avif" type="image/avif" />
<source srcSet="/photo.webp" type="image/webp" />
<img src="/photo.jpg" alt="Photo" width={800} height={600} />
</picture>Related terms
AVIF
AVIF (AV1 Image File Format) is a modern, royalty-free image format based on the AV1 video codec that delivers significantly better compression than WebP and JPEG while maintaining high visual quality.
Image Optimization
Image optimization is the process of reducing image file sizes and serving appropriately sized images to improve page load performance, using techniques like compression, modern formats, and responsive delivery.
Next.js Image Component
The Next.js `<Image>` component (`next/image`) is a built-in extension of the HTML `<img>` tag that provides automatic image optimization including lazy loading, responsive sizing, format conversion, and layout shift prevention.
Page Speed
Page speed is the measurement of how quickly a web page's content loads and becomes interactive, typically measured by metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.