Оптимизация изображений: WebP на сайте с большой библиотекой
Оптимизация изображений: WebP на сайте с большой библиотекой
Классический совет «поставьте плагин оптимизации изображений» скрывает главный вопрос: будет ли экономия и сколько именно. На одном из моих сайтов — каталоге отзывов с библиотекой 50 922 файла и 13,6 ГБ картинок — я проверил это замерами: контрольной конвертацией образцов и полным прогоном всех файлов картинок одной реальной страницы.
Аудит библиотеки
| Формат | Файлов | Размер | Средний файл |
|---|---|---|---|
| JPG | 34 418 | 6,02 ГБ | ~180 КБ |
| PNG | 16 504 | 7,62 ГБ | ~480 КБ |
| WebP | 0 | — | — |
Тревожные знаки ещё до замеров: PNG весит больше, чем JPG (типично, когда скриншоты сохраняют в PNG); в топе размеров — фото-оригиналы с камеры по 7–13 МБ, залитые «как есть»; WebP нет ни одного. Плагинов оптимизации изображений на сайте не было, нативный lazy loading WordPress работал.
Замер 1: контрольная конвертация образцов
cwebp 1.5.0, качество 80:
| Образец | Было | Стало | Экономия |
|---|---|---|---|
| Фото с камеры (8,6 МБ) | 8,6 МБ | 560 КБ | 94 % |
| Фото с камеры (8,6 МБ) | 8,6 МБ | 641 КБ | 93 % |
| Фото (13 МБ) | 13 МБ | 197 КБ | 98 % |
| Фото (7,8 МБ) | 7,8 МБ | 2,2 МБ | 72 % |
| PNG-превьюшка | 36 КБ | 3,2 КБ | 91 % |
| PNG-баннер | 363 КБ | 35 КБ | 91 % |
Замер 2: вся страница реального поста
Страница обзора: 120 файлов картинок (JPG+PNG, все размеры srcset), суммарно 27,6 МБ. Конвертация всех 120 файлов в WebP q80 заняла 17 секунд:
| Вес | |
|---|---|
| Оригиналы (JPG+PNG) | 27,6 МБ |
| WebP q80 | 7,2 МБ |
Экономия 74 % веса картинок страницы. Для посетителя на мобильном интернете это разница между «грузилось 20 секунд» и «грузилось 5».
Проекция на библиотеку
13,6 ГБ библиотеки → примерно 4–5 ГБ WebP-копий (q80). Экономия ~60–70 % на всей массе изображений. Дополнительно: несколько фото-оригиналов по 7–13 МБ стоит пересжать и как JPG q85 — это уменьшает сами оригиналы (для фото WebP q80 и JPG q85 визуально близки).
Конвертация или пересжатие: два подхода
1. WebP-копии с автоматической отдачей (рекомендую). Оригиналы не трогаются, рядом создаются WebP-версии, посетителю отдаётся WebP (браузеры без поддержки получают оригинал).
- Плюсы: обратимость (оригиналы целы), автоматическая обработка новых загрузок, не ломает существующие URL.
- Плагин: Converter for Media (webp-converter-for-media) — бесплатный, пакетная конвертация всей библиотеки, авто-обработка новых загрузок, автоматическая подмена URL. На nginx для быстрой отдачи нужен кусок конфига vhost (без него отдача идёт медленнее, через PHP).
2. Пересжатие оригиналов. Библиотека худеет на диске, но форматы остаются прежними; необратимо, если перезаписать поверх.
- Имеет смысл как второй проход для фото-гигантов (7–13 МБ), которые и в WebP останутся тяжёлыми.
3. Комбинация (максимум результата): Converter for Media для WebP-отдачи + точечное пересжатие фото-гигантов.
Сравнение плагинов
- Converter for Media — бесплатный, пакетная конвертация, авто-подмена URL, оригиналы сохраняются. Для nginx — небольшой кусок конфига vhost. Мой выбор.
- WebP Express — гибче в настройках (режимы отдачи, quality per format), но требует ручной настройки rewrite-правил.
- EWWW Image Optimizer — конвертация локальными инструментами, умеет WebP, но heavier.
- Smush — бесплатная версия без WebP (WebP в Pro), сжатие без потерь — слабый эффект на уже сжатых файлах.
- ShortPixel / Imagify — платные API с пакетной конвертацией; для библиотеки в 50 тыс. файлов — платно каждый месяц.
- Jetpack Site Accelerator — отдача картинок через CDN WordPress.com без локальных изменений; зависимость от внешнего сервиса.
Нюанс с экраном согласия
Если на сайте стоит обязательный экран согласия, объявляющий DONOTCACHEPAGE, кэш страниц не работает — но объектный кэш Redis и WebP-отдача изображений продолжают работать: они кэшируют данные и статические файлы, а не HTML. На таком сайте оптимизация изображений — одна из немногих оптимизаций, которые видит посетитель.
Предостережения
- Пакетная конвертация 50 тыс. файлов — запускать на ночь: конвертация 120 файлов заняла 17 секунд, вся библиотека — часы.
- Видео не конвертируется плагинами картинок: файл mp4 на 21,6 МБ в библиотеке — тема для отдельного разговора (сжатие/хостинг видео).
- Битые ссылки на картинки конвертацией не лечатся — сначала проверка ссылок.
wp config setна старых конфигах может падать из-за отсутствия стандартных якорей — константы вставлять вручную перед$table_prefix.
Выводы
- Экономия реальна и большая: −74 % веса картинок страницы (27,6 → 7,2 МБ) на реальном посте.
- WebP q80 — оптимум по качеству/размеру для фото и скриншотов; GIF с анимацией — отдельная тема.
- Оригиналы сохранять: обратимость важнее пары гигабайт на диске.
- Порядок: сначала замер «до», потом пакетная конвертация на тестовом наборе, потом вся библиотека.
