WebP (.webp)

---
name: webp
description: "Explain WebP image format, its lossy and lossless modes, browser support, and best-use cases for web image optimization."
metadata:
  tags: "image-format, webp, lossy, lossless, web-optimization, browser-support"
  source: "https://skilldb.dev/skills/file-formats-skills/webp"
  pack: "file-formats-skills"
  category: "Technology & Engineering"
---

# WebP (.webp)

## When to use this skill
Use when the user says things like:
- "Explain the WebP image format."
- "What is WebP and when should I use it?"
- "Show WebP browser support and features."
- "Compare WebP with JPEG/PNG for optimization."


You are a file format specialist with deep knowledge of the WebP image format, its compression modes, browser support, and web optimization use cases.

## Overview

WebP was developed by Google and first released in 2010. It is based on the VP8 video codec (lossy mode) and a dedicated algorithm (lossless mode), both derived from technology Google acquired when it purchased On2 Technologies. The format was created specifically to reduce image sizes on the web while maintaining visual quality. WebP became a practical web standard around 2020 when Safari finally added support, achieving universal browser coverage. It is now the most commonly recommended format for web image optimization, often reducing page weight by 25-35% compared to equivalent JPEG/PNG assets.

## Technical Specifications

- **File extension(s):** `.webp`
- **MIME type:** `image/webp`
- **Compression type:** Lossy (VP8-based, block prediction + DCT), lossless (entropy coding with backward reference), or mixed (lossy RGB + lossless alpha)
- **Color depth:** 8-bit per channel (24-bit RGB or 32-bit RGBA). Lossless mode supports full 32-bit RGBA.
- **Max dimensions:** 16,383 x 16,383 pixels
- **Max file size:** ~4 GiB (limited by RIFF container using 32-bit size fields)
- **Transparency:** Full 8-bit alpha channel in both lossy and lossless modes
- **Animation:** Supported (multiple frames with individual durations, looping, alpha blending, disposal methods)
- **Metadata support:** EXIF, XMP, ICC color profiles (stored in RIFF chunks)
- **Container:** RIFF-based container format

## How to Work With It

### Opening & Viewing

- **Browsers:** All modern browsers (Chrome 17+, Firefox 65+, Safari 14+, Edge 18+)
- **OS support:** Windows 10+ (with extension), macOS 11+, Linux (through libraries)
- **Image viewers:** Most modern viewers support WebP; older software may need plugins
- **Photoshop:** Requires a plugin (WebPShop) for versions before 2024; native support in Photoshop 2024+

### Creating & Editing

- **Quality settings (lossy):** 0-100 scale. Quality 75-82 provides excellent results for photographs. Near-lossless mode (-near_lossless) offers a middle ground.
- **Lossless mode:** Use for screenshots, graphics, and anything that would use PNG. WebP lossless is typically 20-30% smaller than PNG.
- **Command line (cwebp):** `cwebp -q 80 input.png -o output.webp` (lossy) or `cwebp -lossless input.png -o output.webp`
- **ImageMagick:** `magick input.jpg -quality 80 output.webp`
- **Animated:** `img2webp -d 100 -lossy -q 75 frame*.png -o animation.webp`
- **Sharp (Node.js):** `sharp(input).webp({ quality: 80 }).toFile('output.webp')`

### Converting To/From

- **To WebP:** `cwebp -q 80 input.jpg -o output.webp`
- **From WebP:** `dwebp input.webp -o output.png` or `magick input.webp output.jpg`
- **Batch convert:** `for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done`
- **Python:** `from PIL import Image; Image.open("in.jpg").save("out.webp", quality=80)`
- **HTML fallback:** Use `<picture><source srcset="img.webp" type="image/webp"><img src="img.jpg"></picture>` for backward compatibility

## Common Use Cases

- Web images (the primary target use case)
- Progressive web apps and mobile web
- Content delivery networks (CDNs often auto-convert to WebP)
- E-commerce product images
- Social media platforms (many convert uploads to WebP internally)
- Animated content replacing GIF (much smaller file sizes)
- Thumbnails and responsive images

## Pros & Cons

**Pros:**
- 25-35% smaller than equivalent JPEG at comparable quality
- 20-30% smaller than PNG in lossless mode
- Supports transparency (lossy + alpha is unique to WebP and AVIF)
- Animation support with vastly better compression than GIF
- Universal modern browser support
- Both lossy and lossless in one format
- Good encoding/decoding speed

**Cons:**
- Maximum dimension of 16,383 pixels (insufficient for some print/panoramic use)
- 8-bit only (no HDR, no 16-bit precision)
- Less mature tooling than JPEG/PNG (though rapidly improving)
- Not universally supported in older desktop applications
- Lossy quality can produce different artifacts than JPEG (smearing vs. blocking)
- Not ideal for archival (JPEG XL and AVIF offer better long-term prospects)
- Email clients generally do not support WebP

## Compatibility

| Platform | Support |
|----------|---------|
| Chrome | 17+ (2012) |
| Firefox | 65+ (2019) |
| Safari | 14+ (2020, macOS Big Sur / iOS 14) |
| Edge | 18+ (2018) |
| Photoshop | 2024+ natively; older via WebPShop plugin |
| GIMP | 2.10+ |
| WordPress | 5.8+ (native upload support) |
| CDNs | Cloudflare, Cloudinary, imgix auto-convert |

## Practical Usage

### Web Image Optimization Pipeline
The standard approach for serving WebP on production websites:

```html
<!-- Progressive enhancement with fallback -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">
</picture>
```

Generate all three formats at build time:

```bash
# Generate WebP from JPEG source
cwebp -q 80 -m 6 photo.jpg -o photo.webp

# Generate AVIF (for browsers that support it)
avifenc --min 20 --max 30 photo.jpg photo.avif
```

### CDN Auto-Conversion
Most modern CDNs (Cloudflare, Cloudinary, imgix, Fastly) can auto-convert images to WebP based on the `Accept` header. This is often the easiest deployment path — upload JPEG/PNG originals and let the CDN serve WebP to supported browsers:

```
# Cloudflare: enable in Speed > Optimization > Image Resizing
# Cloudinary: add f_auto to the URL
https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/photo.jpg
```

### Node.js Server-Side Processing with Sharp
```javascript
const sharp = require('sharp');

// Convert with quality control
await sharp('input.jpg').webp({ quality: 80, effort: 6 }).toFile('output.webp');

// Resize and convert in one operation
await sharp('input.jpg').resize(800, 600).webp({ quality: 75 }).toFile('thumb.webp');

// Animated WebP from GIF
await sharp('animation.gif', { animated: true }).webp({ quality: 75 }).toFile('animation.webp');
```

### WordPress and CMS Integration
WordPress 5.8+ supports WebP uploads natively. For automatic conversion of existing media libraries, use plugins like ShortPixel, Imagify, or EWWW Image Optimizer. These generate WebP versions alongside originals and serve them via `<picture>` or `.htaccess` rewrites.

## Anti-Patterns

**Serving WebP without a fallback.** While browser support is now universal in modern browsers, some older systems (pre-2020 Safari, older Android WebViews, email clients) do not support WebP. Always provide JPEG/PNG fallback via the `<picture>` element.

**Using WebP for print or archival.** WebP's 8-bit color depth, 16,383px dimension limit, and web-focused compression make it unsuitable for print production or long-term archival. Use TIFF for print and original formats for archival.

**Converting lossless PNG to lossy WebP.** If the PNG exists because exact pixel data matters (screenshots, UI assets, text overlays), convert to WebP lossless — not lossy. Lossy WebP introduces smearing artifacts on sharp edges.

**Setting quality too high.** WebP at quality 95-100 produces files nearly as large as the JPEG/PNG source with marginal visual improvement over quality 80. The sweet spot for photographs is quality 75-82.

**Ignoring animated WebP as a GIF replacement.** Animated WebP typically achieves 50-80% smaller files than equivalent GIFs with better color depth and alpha support. For any new animated content on the web, prefer animated WebP or video over GIF.

## Related Formats

- **JPEG:** The incumbent format WebP aims to replace for lossy web images
- **PNG:** The incumbent format WebP aims to replace for lossless web images
- **AVIF:** Newer format with even better compression, but slower encoding and less mature support
- **JPEG XL:** Competing next-gen format with broader feature set but uncertain browser support (removed from Chrome)
- **GIF:** Legacy animation format that WebP animation can replace at much smaller sizes
- **HEIC:** Apple's photo format; similar compression to WebP but not web-native