Выбор формата начинается не с названия расширения, а с того, что находится на картинке. Фотография товара, схема с прозрачным фоном и скриншот интерфейса требуют разного подхода. Возьмите один характерный файл, сделайте несколько версий и сравните их в том размере, в котором изображение увидит посетитель.
Фотографии
JPG остаётся понятным выбором для фотографий, когда важна широкая совместимость. WebP часто позволяет получить меньший файл при похожем визуальном результате. Для современных браузеров можно сравнить также AVIF.
Начните с роли изображения. Для большой фотографии на первом экране подготовьте одинаковые размеры в пикселях и сравните JPEG, WebP и, если подходит вашей аудитории, AVIF. Смотрите не только на размер файла: плавное небо, волосы и текстуры ткани быстро показывают артефакты сжатия. Измерьте также фактическую передачу в браузере, потому что кэш или другой вариант srcset может скрыть результат замены.
Графика и прозрачность
PNG подходит для схем и графики с прозрачностью, но файлы могут быть крупными. WebP и AVIF тоже поддерживают прозрачность; проверьте результат на ваших изображениях, прежде чем заменять исходники.
Для иконок, интерфейсных скриншотов и схем важно сохранить тонкие линии, резкие границы и текст. PNG нередко служит хорошим исходником, но для публикации можно проверить WebP с прозрачностью. Откройте результат на белом и тёмном фоне: цветной ореол вокруг логотипа бывает незаметен на одном из них. Если после конвертации подложка стала непрозрачной или мелкая подпись потеряла чёткость, такой вариант не подходит.
Быстрый ориентир по формату
- ФотоНачните с JPEG и WebP; сравните детали при одинаковых размерах.
- ГрафикаПроверьте PNG и WebP, особенно текст и прозрачный край.
- Новый форматСначала проверьте браузеры и сохраните совместимый вариант.
JPEG XL
Формат может дать хороший результат сжатия, однако его поддержка в программном обеспечении различается. Для публичного сайта проверьте целевые браузеры и оставьте совместимый вариант, если он нужен.
Формат файла — только часть задачи. Изображение шириной 3000 пикселей, показанное в карточке шириной 300 пикселей, остаётся избыточным даже после удачного сжатия. Сначала подготовьте подходящие размеры и проверьте, какой из них получает мобильный браузер. При использовании нового формата оставьте совместимый исходник или запасной вариант до проверки целевых браузеров и инструментов редактирования.
Сделайте простую таблицу для одного изображения: исходный формат, размеры в пикселях, вес готового файла и замечания по качеству. Повторите сравнение для фотографии и графики отдельно — выводы будут разными. Если новый вариант выигрывает только на бумаге, а загрузка страницы не меняется, проверьте кэш и выбранный браузером srcset. Решение о замене принимайте по тому файлу, который действительно получает посетитель.
Какой вариант попробовать
- JPEG
- Совместимый вариант для фотографий, если качество и вес устраивают.
- PNG
- Исходник для схем, текста и графики с прозрачностью.
- WebP / AVIF
- Сравните с исходником на реальной странице, не только по весу.
- JPEG XL
- Используйте после проверки поддержки в вашем рабочем процессе.
Разберём на примере
Представьте карточку товара с фотографией и небольшой логотип в шапке. Для фотографии сравните JPEG и WebP, проверьте фактуру и градиенты. Для логотипа сначала убедитесь, что прозрачные края не стали мутными. Одно правило «всё перевести в WebP» здесь менее полезно, чем два осмысленных решения.
Проверьте перед публикацией
- Сравните вес файлов при одинаковых размерах в пикселях.
- Откройте результат на телефоне и на большом экране.
- Проверьте поддержку формата вашими браузерами и инструментами редактирования.
Решение — по фактическому размеру
В нашем браузерном инструменте можно получить несколько форматов за одну загрузку и выбрать подходящий. Серверный API сейчас поддерживает более узкий набор форматов.