Про переход на новые форматы картинок пишут как про обязательный шаг. Разбираем, какой выигрыш подтверждён документацией и какой ценой он даётся.
Коротко
- WebP: обычно на 25–35% меньше JPEG и PNG.
- AVIF: по сторонним замерам — на 60% меньше JPEG.
- AVIF медленнее всех при сжатии на лету.
- Запасной вариант задаётся тегом picture.
Какой выигрыш подтверждён
| Сравнение | Значение | Источник |
|---|---|---|
| WebP против JPEG и PNG | Обычно на 25–35% меньше | Документация Google |
| PNG у Facebook | Экономия около 80% | Цифра приводится в документации |
| Миниатюры YouTube | Загрузка на 10% быстрее | Цифра приводится в документации |
| AVIF против JPEG | Экономия 60% | Замеры Imgix |
| AVIF против WebP | Экономия 35% | Те же замеры |
Разница в надёжности между строками существенная: первая — собственная формулировка документации, остальные — чужие замеры, которые она цитирует. Это не значит, что цифры неверны; это значит, что на ваших изображениях результат может отличаться, и проверяется он конвертацией десятка типовых файлов.
Что умеют форматы
| Возможность | WebP | AVIF |
|---|---|---|
| Сжатие с потерями | Да | Да |
| Сжатие без потерь | Да | Да |
| Прозрачность | Да | Да |
| Анимация | Да | Да |
| Замена для | JPEG, PNG, GIF | JPEG, PNG, GIF |
Оба формата закрывают все задачи старых, и это снимает вопрос «а чем открывать логотип с прозрачностью». Практическая разница не в возможностях, а в весе и в удобстве работы: про второе — следующий раздел.
Чем AVIF неудобен
| Особенность | Следствие |
|---|---|
| Самый медленный при сжатии на лету | Не годится для конвертации по запросу |
| Кодирование требует ресурсов | Нагрузка на сервер при массовой обработке |
| Поддержка в инструментах разная | Не все плагины CMS умеют |
| Выигрыш заметнее на фотографиях | На мелкой графике меньше |
Первая строка определяет способ внедрения. AVIF имеет смысл готовить заранее — при загрузке в каталог или сборке, — а не сжимать в момент запроса страницы: в документации он назван самым медленным из кодировщиков для работы на лету. Для конвертации по запросу WebP практичнее.
Как задать запасной вариант
Тег picture вместо img
Обёртка для нескольких вариантов.
Первым — самый экономный формат
Браузер выберет первый поддерживаемый.
Затем промежуточный вариант
Если готовите оба формата.
Внутри — обычный img
Для браузеров без поддержки.
Размеры указать в img
Чтобы макет не прыгал.
Последний шаг относится не к форматам, а к сдвигу макета, и о нём забывают чаще всего. Атрибуты ширины и высоты нужны, чтобы браузер заранее отвёл место под картинку. Про сдвиги — в статье о том, как исправить сдвиг макета CLS.
Когда переход оправдан
Стоит переводить
- Много фотографий на страницах
- Каталог с карточками товаров
- Большая доля мобильного трафика
- Картинки — основной вес страницы
Есть задачи важнее
- Картинки уже не главный вес
- Время уходит на ответ сервера
- Изображения не уменьшены по размеру
- Десяток иконок на весь сайт
Третья строка справа — самая частая ситуация, и она меняет порядок работ. Переводить в новый формат картинку, которая вчетверо больше нужного по пикселям, — значит экономить проценты вместо разов: сначала уменьшение, потом формат. Про это — в статье о том, как сжимать изображения.
Что это значит для SEO
| Вопрос | Ответ |
|---|---|
| Влияет ли формат на позиции напрямую | Нет |
| Влияет ли через скорость | Косвенно, если картинки были главным весом |
| Меняется ли индексация картинок | Форматы поддерживаются поиском |
| Нужно ли менять адреса файлов | Лучше сохранить структуру |
| Нужно ли переписывать alt | Нет, атрибуты остаются |
Четвёртая строка про то, о чём вспоминают после переноса. Если адреса картинок меняются, старые остаются в индексе поиска по картинкам и в чужих ссылках: разумнее оставить прежние пути или настроить переадресацию. Про переадресации — в статье про редиректы 301 и 302.
Частые вопросы
Насколько WebP легче JPEG?
В документации Google сказано, что изображения WebP обычно на 25–35% меньше аналогов в JPEG и PNG.
Насколько AVIF легче WebP?
Документация приводит замеры Imgix: экономия 60% по сравнению с JPEG и 35% по сравнению с WebP. Это чужие замеры, и на своих картинках результат стоит проверить.
Почему AVIF неудобен для сжатия на лету?
В документации он назван самым медленным из кодировщиков для работы на лету. Его разумнее готовить заранее — при загрузке в каталог или при сборке.
Как обеспечить показ в старых браузерах?
Через тег picture: сначала source с новым форматом, затем промежуточный вариант, внутри обычный img для браузеров без поддержки.
Читайте также
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
