WebP: что это и зачем конвертировать изображения

Что такое WebP

WebP — современный формат изображений, разработанный Google в 2010 году. Поддерживает сжатие с потерями (как JPEG) и без потерь (как PNG), а также прозрачность (alpha-канал) и анимацию (как GIF).

WebP обеспечивает лучшее соотношение качество/размер файла по сравнению с JPEG, PNG и GIF.

Почему WebP лучше JPEG и PNG

Сравнение форматов при одинаковом визуальном качестве:

| Формат | Фото 1200×800 | Поддержка прозрачности | Анимация | |--------|--------------|----------------------|---------| | JPEG | 250 KB | Нет | Нет | | PNG | 450 KB | Да | Нет | | GIF | 500 KB | Ограниченно | Да | | WebP | 160 KB | Да | Да | | AVIF | 120 KB | Да | Да |

WebP уменьшает размер изображений на 25-35% vs JPEG и 60-80% vs PNG (с прозрачностью).

Поддержка браузерами

WebP поддерживается во всех современных браузерах:

• Chrome — с версии 17 (2012)
• Firefox — с версии 65 (2019)
• Safari — с версии 14 (2020)
• Edge — с версии 18 (2018)
• iOS Safari — с iOS 14 (2020)

Покрытие составляет ~96% пользователей.

Как конвертировать в WebP

Командная строка (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');

Как использовать WebP с фолбэком

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

Браузер выберет первый поддерживаемый формат.

Next.js автоматическая конвертация

Next.js Image компонент автоматически конвертирует в WebP (и AVIF):

import Image from 'next/image';

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

AVIF — следующий шаг после WebP

AVIF (AV1 Image File Format) — ещё более эффективный формат:

• На 50% меньше JPEG
• Поддержка в Chrome 85+, Firefox 93+, Safari 16+

Используйте оба с фолбэком:

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

Конвертация изображений на reChecker

Используйте Конвертер изображений для онлайн-конвертации изображений в WebP и другие форматы. Инструмент:

• Конвертирует JPEG, PNG, GIF в WebP
• Регулирует качество сжатия
• Показывает экономию в размере файла

FAQ

WebP заменит JPEG полностью? Постепенно вытесняет, но JPEG остаётся стандартом совместимости. Для веба — WebP (с JPEG фолбэком). Для профессиональной фотографии — TIFF или RAW.

Можно ли редактировать WebP в Photoshop? Photoshop поддерживает WebP начиная с версии 23.2 (2021). Для старых версий нужен плагин.

WebP лучше всего для каких изображений? Для фотографий — на 25-35% меньше JPEG при том же качестве. Для иллюстраций и UI — иногда LOSSLESS WebP больше PNG. Для очень простых графиков — SVG предпочтительнее всех растровых форматов.