Короткий ответ: переделать JPG или PNG в WebP стоит, когда картинки идут на сайт, — весить они станут заметно меньше, а страницы откроются быстрее. Конвертировать в WebP можно на компьютере, без онлайн-сервисов с их лимитами: наш «Глядень» записывает этот формат и переводит в него целую папку за один заход, заодно уменьшая картинки. Ниже — какое качество ставить, что делать с прозрачностью и о чём не забыть перед загрузкой на сайт.
Зачем сайту WebP
Картинки — обычно самая тяжёлая часть страницы. WebP упаковывает их плотнее привычных форматов без видимой разницы: фотографии выходят легче примерно на четверть-треть, а графика с прозрачным фоном, которая в PNG занимает сотни килобайт, — в несколько раз. Посетитель перемены не замечает, а страница открывается быстрее, особенно с телефона.
Есть и вторая причина: сервисы проверки скорости сайтов прямо советуют отдавать изображения в современных форматах, и WebP — самый простой способ выполнить этот совет. Его понимают все нынешние браузеры. Как формат устроен изнутри, рассказывает отдельный текст — что такое WebP.
Где WebP не нужен: в письмах, документах, архивах и везде, где картинку будут открывать неизвестно чем. Для пересылки людям надёжнее привычный JPG.
Как преобразовать картинки в WebP
Для одной картинки хватит обычного сохранения под другим форматом. Но сайту нужна не одна: фотографии товаров, иллюстрации, галерея. Тут работает пакетная конвертация — формат, степень сжатия и новый размер задаются один раз на все файлы, а результат складывается в отдельную папку, чтобы не перемешаться с исходниками. По шагам эта операция описана в общем тексте о том, как изменить формат фото, и в руководстве; здесь — то, что относится именно к сайту.
От сервисов, которые предлагают конвертировать в WebP онлайн бесплатно, программа отличается двумя вещами: она не считает, сколько картинок вы перевели сегодня, и никуда их не отправляет.
Какое качество ставить
| Что за картинка | Качество WebP | Почему |
|---|---|---|
| Фотография к тексту или в карточке товара | 75–85 | от оригинала не отличить, файл в разы легче |
| Крупное изображение на всю ширину экрана | 80–90 | на большом размере заметнее огрехи сжатия |
| Миниатюры и превью | 65–75 | мелкая картинка прощает сильное сжатие |
| Снимок экрана, схема, надписи | 90 и выше | иначе вокруг букв появляется рябь |
Цифры — отправная точка, а не закон. Переведите две-три типичные картинки, откройте результат в полном размере и сравните с оригиналом: если отличий не найти, попробуйте на ступень ниже. Числа качества у WebP и JPG не равнозначны — 80 в одном формате не то же, что 80 в другом, поэтому судить нужно глазами.
Сначала размер, потом формат
Самая частая ошибка — перевести в WebP снимок шириной 6000 точек прямо с камеры. Он полегчает, но останется огромным: сайту незачем картинка втрое шире экрана. Уменьшение размера экономит больше, чем любой формат.
В пакетной конвертации для этого есть флажок изменения размера: задайте рамку, в которую нужно вписать картинки, — например, 1920 точек по длинной стороне для больших изображений или 800 для карточек, — и оставьте включённым «только уменьшать», чтобы мелкие картинки не растягивались. О размерах подробнее — как уменьшить размер фото.
Там же стоит отметить удаление метаданных. Сведения о камере и координаты съёмки посетителям сайта ни к чему, а без них каждый файл чуть легче.
PNG в WebP: что с прозрачным фоном
WebP поддерживает прозрачность, поэтому логотипы и вырезанные предметы из PNG переводятся без белого прямоугольника вокруг — в отличие от перевода в JPG. Именно на таких картинках выигрыш самый большой.
У значков и схем с резкими краями и немногими цветами проверьте результат на увеличении: сжатие с потерями может дать лёгкую рябь на границах цвета. Если она заметна, поднимите качество до 95–100.
Перед загрузкой на сайт
- Сохраните исходники. WebP — формат для показа, а не для хранения. Править и пересохранять лучше оригинал.
- Проверьте, что сайт принимает WebP. Современные системы управления принимают; у старых бывает запрет на загрузку такого типа файлов.
- Не переводите в WebP уже сжатое по кругу. JPG низкого качества, перегнанный в WebP, станет легче, но не лучше: огрехи первого сжатия останутся.
- Дайте файлам осмысленные имена. Сотню картинок удобно переименовать разом — пакетное переименование файлов.
Обратная задача — картинка скачалась в WebP, а нужен JPG — разобрана отдельно: WebP в JPG.