Picovert

How WebP Compression Works: Technical Guide

By Picovert Team2026-05-196 min read

WebP was developed by Google in 2010, derived from the VP8 video codec technology used in the WebM video format. It was designed as a single successor to both JPEG and PNG — handling photographs, graphics, and transparent images in one format. The headline result: WebP files are typically 25–35% smaller than JPEG at the same visual quality, and around 26% smaller than lossless PNG. For high-traffic websites, that difference translates directly into faster load times and lower bandwidth costs.

Lossy WebP: The VP8 Codec

Lossy WebP is built on VP8, the same codec that compresses video frames in WebM. This heritage gives lossy WebP capabilities that JPEG — designed in 1992 — simply does not have.

Like JPEG, lossy WebP works in the frequency domain: it converts image blocks to frequency coefficients and discards high-frequency detail that the human eye is least sensitive to. But where JPEG uses an 8×8 block size throughout the image, VP8 uses flexible macroblock-based prediction. Before encoding each 16×16 macroblock, the encoder predicts what it will look like based on already-encoded neighboring blocks, then only encodes the difference (the residual). This means smooth gradients and textures are represented with far fewer bits.

  • Intra-frame prediction — VP8 supports 10 prediction modes for luma (brightness) macroblocks, including horizontal, vertical, DC, and diagonal modes. JPEG has no equivalent prediction step.
  • Flexible entropy coding — VP8 uses arithmetic coding rather than Huffman coding for the residuals. Arithmetic coding achieves closer to the theoretical information-entropy limit, especially for correlated data like image blocks.
  • Better gradient and texture handling — The combination of prediction modes and arithmetic coding means VP8 encodes smooth gradients — skies, skin tones, blurred backgrounds — with significantly fewer artifacts than JPEG at the same file size.

In practice, lossy WebP achieves 25–34% smaller file sizes than JPEG at equivalent perceptual quality. For a typical website that serves thousands of product images or article photos, switching to WebP can reduce image payload by a third with no visible quality change.

Lossless WebP: The VP8L Codec

Lossless WebP uses a separate codec called VP8L, which was developed specifically for lossless compression and is not derived from VP8. It is designed to replace PNG and employs four core compression transforms that PNG's Deflate algorithm does not use:

  • Spatial prediction — Each pixel is predicted from its already-encoded neighbors using one of 14 predictor modes. Only the difference between the actual value and the prediction is stored.
  • Color space transform — VP8L can transform the green, red, and blue channels so they are more correlated with each other, making the subsequent compression step more efficient.
  • Color indexing and palette mode — When an image uses fewer than 256 unique colors, VP8L replaces color values with palette indices, similar to indexed-color PNG but with more efficient encoding.
  • LZ77 backward references and Huffman coding — Like PNG's Deflate, VP8L uses LZ77 to reference repeated pixel patterns and Huffman coding to compress the output. But VP8L applies these after the transforms above, giving them much more regular data to work with.

The cumulative effect: lossless WebP files are on average 26% smaller than equivalent PNG files. For web graphics — icons, logos, UI screenshots, illustrations — switching from PNG to lossless WebP is a straightforward gain with no quality tradeoff.

Alpha Channel Support

One of WebP's significant advantages over JPEG is native alpha transparency support. WebP supports alpha in both lossy and lossless modes, while JPEG cannot store transparency at all.

In lossless WebP, the alpha channel is compressed using the same VP8L codec as the RGB data — losslessly. In lossy WebP, the alpha channel is still stored losslessly (VP8L) even though the color data is lossy. This means you get the file-size benefits of lossy WebP for a transparent image while retaining crisp, artifact-free edges.

  • vs. PNG — A transparent WebP is typically 3× smaller than an equivalent PNG with alpha. For logos, product cutouts, and UI elements with transparency, this is a dramatic saving.
  • vs. JPEG — JPEG cannot store transparency at all. Workflows that use JPEG for photographs and PNG for transparent assets can be unified under WebP, simplifying the image pipeline.
  • Partial transparency — Unlike GIF, which only supports binary transparency (fully opaque or fully transparent), WebP supports full 8-bit alpha with smooth semi-transparent gradients.

WebP Animation

WebP supports animation via the animated WebP container format, which stores multiple frames using ANIM (animation metadata) and ANMF (animation frame) chunks. Each frame can be a separate lossy or lossless WebP image, and the container stores timing, loop count, and blending mode for each frame.

Animated WebP has substantial advantages over GIF:

  • Color depth — GIF is limited to 256 colors per frame. Animated WebP supports full 24-bit color (16.7 million colors) plus alpha transparency.
  • File size — Animated WebP files are typically 64% smaller than the equivalent GIF for lossy and 19% smaller for lossless, according to Google's own benchmarks.
  • Transparency quality — GIF has only 1-bit alpha (on/off). Animated WebP supports smooth 8-bit alpha per frame, enabling clean fade effects and smooth edges.

For web animations that were previously served as GIF — memes, stickers, short loops — animated WebP delivers dramatically better quality at a fraction of the file size.

Quality Settings for Lossy WebP

Lossy WebP accepts a quality parameter from 0 to 100, similar to JPEG quality. Higher values preserve more detail at the cost of larger file size. The relationship is not linear: the biggest file-size gains come from reducing quality from 100 down to around 85.

  • Quality 75–85 — The sweet spot for most web images. At quality 80, a WebP file is approximately 30% smaller than a JPEG at quality 80 with similar visual output. This is the recommended range for product images, article photos, and marketing assets.
  • Quality 60–75 — Appropriate for thumbnails, social previews, and decorative backgrounds where perfect fidelity is not required. Files are 40–50% smaller than equivalent JPEG.
  • Quality 90–100 — For archival or near-lossless use. Files are larger but still 10–20% smaller than maximum-quality JPEG. Rarely needed for web delivery.

A practical starting point: export at quality 80 and compare visually. If artifacts are visible in flat color regions or smooth gradients, raise to 85. If the image is a photograph with complex texture, quality 75 is often indistinguishable from 85 at a glance.

Browser Support

All major browsers have supported WebP since 2020. Chrome added support in 2011, Firefox and Edge in 2018, and Safari in version 14 (macOS Big Sur, released 2020). As of 2026, global WebP support sits above 97% — the only meaningful holdout is Internet Explorer, which is no longer supported by Microsoft.

For the small fraction of traffic from very old browsers, the standard fallback pattern is the HTML <picture> element:

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

Browsers that support WebP use the <source>. Older browsers fall back to the <img> tag. In practice, most teams now skip the fallback entirely and serve WebP directly.

How to Convert Images to WebP

The easiest way to convert existing JPEG or PNG images to WebP is to use Picovert's JPG to WebP converter. It runs entirely in your browser — no files are uploaded to any server — and converts in seconds. You can adjust the quality slider to balance file size and visual quality, and download results individually or as a ZIP archive.

For developers processing images in a build pipeline, the sharp library (Node.js) and cwebp (Google's command-line encoder) are the standard tools. With cwebp:

cwebp -q 80 input.jpg -o output.webp

For batch conversion of all JPEGs in a directory:

for f in *.jpg; do cwebp -q 80 "$f" -o "$(basename $f .jpg).webp"; done

Practical Recommendations

For web developers and content creators, these guidelines cover the most common scenarios:

  • Use WebP for all web images — With 97%+ browser support, there is no longer a compelling reason to default to JPEG or PNG for new web content. WebP delivers smaller files and the same or better visual quality.
  • Keep originals in JPEG or PNG — Always retain your source files in their original format for editing. Re-encoding a WebP to make further edits introduces additional quality loss in lossy mode. Treat WebP as a delivery format, not an editing format.
  • Choose lossy WebP for photographs — Any image that would previously have been a JPEG (photos, product images, hero images) should become a lossy WebP. Use quality 75–85 for web delivery.
  • Choose lossless WebP for graphics — Logos, icons, illustrations, UI screenshots, and any image that would previously have been a PNG should become a lossless WebP. You get smaller files with zero quality loss.
  • Prioritize WebP for critical-path images — Images that appear above the fold — hero images, product thumbnails on listing pages — have the greatest impact on perceived load time. Convert these first.
  • Audit animated GIFs — Any animated GIF on your site is a candidate for conversion to animated WebP or MP4. Both offer dramatic file-size reductions, with MP4 being the better choice for longer, video-like animations.

To get started, use Picovert's image converter for format conversion and the image compressor to fine-tune file sizes. Both tools run in your browser with no account required.