WebP: What It Is and Why Convert Images

What is WebP

WebP is a modern image format developed by Google in 2010. It supports lossy compression (like JPEG) and lossless compression (like PNG), as well as transparency (alpha channel) and animation (like GIF).

WebP offers a better quality-to-file-size ratio than JPEG, PNG, and GIF.

Why WebP is better than JPEG and PNG

Format comparison at the same visual quality:

WebP reduces image file sizes by 25-35% compared with JPEG and 60-80% compared with PNG (with transparency).

Browser support

WebP is supported by all modern browsers:

• Chrome — from version 17 (2012)
• Firefox — from version 65 (2019)
• Safari — from version 14 (2020)
• Edge — from version 18 (2018)
• iOS Safari — from iOS 14 (2020)

Coverage is ~96% of users.

How to convert to WebP

Command line (cwebp)

# Установка
apt install webp

# Конвертация JPEG → WebP
cwebp -q 80 input.jpg -o output.webp

# Конвертация PNG → WebP (без потерь)
cwebp -lossless input.png -o output.webp

# Пакетная конвертация
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

ImageMagick

convert input.jpg -quality 80 output.webp
convert input.png output.webp

Node.js (sharp)

const sharp = require('sharp');

await sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

How to use WebP with a fallback

<!-- <picture> с WebP + фолбэк для старых браузеров -->
<picture>
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Описание фото">
</picture>

The browser will choose the first supported format.

Automatic conversion in Next.js

The Next.js Image component automatically converts images to WebP (and AVIF):

import Image from 'next/image';

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
  // Next.js автоматически отдаёт WebP/AVIF если браузер поддерживает
/>

AVIF — the next step after WebP

AVIF (AV1 Image File Format) is an even more efficient format:

• 50% smaller than JPEG
• Supported in Chrome 85+, Firefox 93+, Safari 16+

Use both with a fallback:

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

FAQ

Will WebP completely replace JPEG? It is gradually displacing JPEG, but JPEG remains the compatibility standard. For the web, use WebP (with a JPEG fallback). For professional photography, use TIFF or RAW.

Can WebP be edited in Photoshop? Photoshop has supported WebP since version 23.2 (2021). Older versions require a plugin.

What types of images is WebP best for? For photographs, it is 25-35% smaller than JPEG at the same quality. For illustrations and UI, lossless WebP can sometimes be larger than PNG. For very simple graphics, SVG is preferable to all raster formats.