«Сжать без потери качества» — формулировка, в которой спрятаны две разные операции. Разбираем, какая из них даёт основной выигрыш и в каком порядке действовать.
Коротко
- Главный резерв — лишние пиксели, а не качество.
- Сжатие с потерями и без потерь решают разные задачи.
- Качество подбирают глазами, а не по числу.
- Норм веса картинки поисковые системы не публикуют.
Два вида сжатия
| Признак | Без потерь | С потерями |
|---|---|---|
| Данные | Сохраняются полностью | Часть отбрасывается |
| Выигрыш в размере | Умеренный | Значительный |
| Видно ли разницу | Нет | Зависит от степени |
| Для чего подходит | Логотипы, схемы, скриншоты | Фотографии |
| Повторное сжатие | Безопасно | Ухудшает каждый раз |
Последняя строка объясняет, почему картинки нельзя пересжимать по кругу. Каждый проход сжатия с потерями отбрасывает данные заново, и файл, прошедший через три сервиса «оптимизации», выглядит хуже исходного при сравнимом весе. Исходники стоит хранить отдельно.
Главное — размер в пикселях
Посмотрите, в каком размере картинка показывается
Ширина блока на странице.
Сравните с размером файла
Часто он в несколько раз больше.
Уменьшите до нужного
С запасом для экранов высокой плотности.
Только потом сжимайте
Степень подбирают после.
Этот порядок даёт больший выигрыш, чем любая настройка качества. Фотография шириной четыре тысячи пикселей, показываемая в блоке шириной восемьсот, весит в разы больше нужного, и никакое сжатие этого не исправит — исправляет уменьшение. Сервисы «оптимизации» эту часть работы обычно не делают.
Как подбирать качество
| Что делать | Почему так |
|---|---|
| Начать с высокого качества | И снижать, пока не станет заметно |
| Смотреть на реальном размере | Не на увеличенном изображении |
| Проверять сложные участки | Градиенты, небо, тени |
| Отдельно проверять текст на картинке | Он портится первым |
| Не использовать одно число для всех | Разные сюжеты ведут себя иначе |
Последняя строка расходится с тем, как обычно настраивают пакетную обработку. Одно значение качества на весь каталог даёт и раздутые простые картинки, и испорченные сложные: разумнее задать значение по типам — фотографии, схемы, изображения с текстом. Про изображения в рекламе — в статье про изображения для РСЯ.
Что даёт смена формата
| Сравнение | Что сообщает документация |
|---|---|
| WebP против JPEG и PNG | Обычно на 25–35% меньше |
| AVIF против JPEG | По замерам Imgix — экономия 60% |
| AVIF против WebP | По тем же замерам — экономия 35% |
| AVIF для анимации против GIF | Медианная экономия около 86% |
Цифры по AVIF приведены со ссылкой на замеры сторонней компании, и это стоит держать в голове. На собственных изображениях выигрыш может быть и больше, и меньше: проверяется он одной конвертацией десятка типовых картинок. Подробно — в статье про WebP и AVIF.
Почему нет нормы веса
Чего не существует
- Официальной нормы веса картинки
- Официальной нормы веса страницы
- Порога, после которого сайт «медленный»
- Универсального значения качества
Что можно проверить
- Сколько весит ваш первый экран
- Какая картинка самая тяжёлая
- Сколько времени уходит на отрисовку
- Стало ли быстрее после правок
Цифры вроде «картинка должна быть не больше ста килобайт» встречаются часто и ниоткуда не взяты. Требуемый вес зависит от того, что на изображении и какого он размера на экране: схема и фотография при одинаковом весе дают разное качество. Мерить нужно результат, а не соответствие выдуманному порогу.
Порядок работы с каталогом картинок
Найдите самые тяжёлые файлы
Начинать с них.
Уменьшите до нужных размеров
Основной выигрыш.
Подберите качество по типам
Фото, схемы, текст на картинке.
Добавьте современный формат
С запасным вариантом.
Настройте отложенную загрузку
Кроме первого экрана.
Проверьте результат замером
По своим посетителям.
Первый шаг экономит основную часть усилий: вес страниц обычно определяют несколько файлов, а не весь каталог. Разобравшись с десятком самых тяжёлых, вы получите большую часть выигрыша, и дальше можно решать, нужна ли полная переработка. Про порядок работ — в статье про скорость загрузки сайта.
Частые вопросы
Чем сжатие с потерями отличается от сжатия без потерь?
Без потерь данные сохраняются полностью, выигрыш умеренный и подходит для логотипов и схем. С потерями часть данных отбрасывается, выигрыш значительный и подходит для фотографий.
Что даёт больший выигрыш — сжатие или уменьшение?
Уменьшение до размера, в котором картинка реально показывается. Фотография шириной четыре тысячи пикселей в блоке шириной восемьсот весит в разы больше нужного, и сжатие этого не исправляет.
Сколько должна весить картинка на сайте?
Официальной нормы нет. Требуемый вес зависит от сюжета и размера на экране: схема и фотография при одинаковом весе дают разное качество.
Можно ли сжимать картинку несколько раз?
При сжатии с потерями каждый проход отбрасывает данные заново, поэтому файл после нескольких сервисов «оптимизации» выглядит хуже исходного. Исходники стоит хранить отдельно.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
