WebP Is the Image Format You Should Be Using (With Fallbacks)

A JPEG image at acceptable quality is typically 200-400KB for a full-width hero image. The same image in WebP is 100-200KB -- roughly 25-34% smaller with no visible quality difference. For a page with 10 images, that is 1-2MB of savings. For users on mobile data, that is the difference between a page that loads in 2 seconds and one that loads in 4.

WebP is not new. Google released it in 2010. But adoption was slow because Safari did not support it until 2020 (macOS Big Sur / iOS 14). Now, in 2026, WebP is supported by every current browser. The compatibility excuse is gone.

How WebP achieves smaller files

WebP uses a more efficient compression algorithm than JPEG. Specifically:

Better spatial prediction. WebP predicts each block of pixels from neighboring blocks, then stores only the prediction error. Its prediction modes are more flexible than JPEG's DCT-based approach.

Adaptive block sizing. JPEG uses fixed 8x8 pixel blocks. WebP uses variable block sizes (4x4 to 16x16), choosing the optimal size for each region. Smooth areas get larger blocks (fewer bits). Detailed areas get smaller blocks (more precision).

Arithmetic coding. WebP uses arithmetic coding, which is more efficient than JPEG's Huffman coding. This alone saves about 5-10% compared to equivalent JPEG quality.

Alpha channel support. Unlike JPEG, WebP supports transparency. This means you can replace both JPEG (for photos) and PNG (for images with transparency) with a single format.

Lossy vs. lossless WebP

WebP supports both modes:

Lossy WebP. Equivalent to JPEG. Best for photographs and complex images. Quality setting 0-100, where 80 is roughly equivalent to JPEG quality 85 at smaller file size.

Lossless WebP. Equivalent to PNG. Best for graphics, screenshots, and images requiring exact pixel reproduction. Typically 26% smaller than PNG.

For web delivery, lossy WebP at quality 80-85 is the sweet spot. It produces files that are 25-35% smaller than equivalent JPEGs with imperceptible quality differences.

The <picture> element for fallbacks

For the small percentage of users on very old browsers:

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

The browser picks the first source it supports. Modern browsers use WebP. The fallback JPEG catches everything else. The <img> tag is the ultimate fallback for browsers that do not support <picture>.

Conversion quality considerations

From JPEG to WebP. Converting a JPEG to WebP compresses an already-compressed image. This is called transcoding and can introduce generation loss. The degradation is minimal at quality 80+ but is technically present. The ideal workflow is to convert from the original uncompressed source.

From PNG to WebP (lossy). This introduces lossy compression on a previously lossless image. For photographs that were mistakenly saved as PNG, this is fine. For UI elements, icons, or screenshots that need pixel-perfect rendering, use lossless WebP instead.

Batch conversion. A website migration from JPEG to WebP means converting potentially thousands of images. Automating this requires:

• Converting each image at the appropriate quality level
• Generating both WebP and JPEG versions (for the <picture> fallback)
• Updating all image references in the HTML/CSS
• Verifying that no image quality is unacceptably degraded

The conversion tool

I built a WebP converter at zovo.one/free-tools/webp-converter that converts JPEG, PNG, and GIF images to WebP (and vice versa) in the browser. It supports quality adjustment, lossy/lossless mode selection, batch conversion, and side-by-side quality comparison. Convert one image or a hundred, compare the quality, and download the results.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.