Что такое 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 предпочтительнее всех растровых форматов.