Выбирайте по задаче, которую должно выполнять изображение
Начинайте с контента, а не с расширения. Фотография — это контент с непрерывными тонами, поэтому некоторая потеря качества может быть приемлемой при показе в нужном размере. Скриншот, диаграмма, логотип или линейный рисунок имеют чёткие края и текст, где артефакты заметны. Сохраняйте их с без‑потерьным выводом или с тщательным утверждением. Для векторного логотипа или диаграммы используйте SVG, когда это возможно.
Затем определите требуемые возможности. Alpha — это покадровая прозрачность. Анимация — последовательность кадров. Обязательное покрытие браузеров, объём публикаций и время сборки — это ограничения доставки, которые могут перевесить выигрыш от меньшего формата.
Сначала тестируйте lossy AVIF и WebP. Держите JPEG доступным, когда нужен широко совместимый непрозрачный запасной вариант.
Сохраняйте без‑потерьный исходник. Сравнивайте PNG с lossless WebP или AVIF на реальном масштабе отображения перед выбором.
Используйте AVIF, WebP или PNG; не выбирайте JPEG, так как он не несёт альфа‑канал.
Поймите, что даёт каждый формат
AVIF хранит изображения, кодированные AV1, в формате на базе HEIF. Его спецификация включает отдельные неподвижные изображения, последовательности изображений и элементы с альфа‑каналом. Он поддерживает сжатие с потерями и без потерь, прозрачность и анимацию. Экономия не фиксирована: исходный контент, кодировщик, режим скорости, целевое качество и метаданные влияют на результат.
WebP поддерживает режимы с потерями и без потерь, прозрачность и анимацию. JPEG — это формат для статичных изображений с потерями и очень широким историческим охватом; полезен как запасной вариант для непрозрачных фотографий. PNG — без‑потерьный формат с альфа‑каналом, делающий его надёжным запасным вариантом для точной графики, хотя PNG для фотографий часто неэффективен. Обычный PNG статичен; при необходимости движения тестируйте отдельный формат анимации.
Лучше всего исследовать для ценных растровых изображений, где меньший объём передачи оправдывает работу по кодированию и откатам.
Полезен как современный универсальный растровый вариант, включая прозрачность и анимированные последовательности.
Используйте как резерв для непрозрачных фотографий, не для логотипа или вырезанного изображения с прозрачностью.
Используйте для без‑потерьных прозрачных растровых запасных вариантов и для ассетов, где пиксельная точность важнее минимума байт.
Постройте путь отката, вместо того чтобы ставить ставку на один формат
Элемент picture позволяет браузеру оценить альтернативы. Поместите AVIF первым, затем WebP, затем img‑запасной вариант в JPEG или PNG с корректным MIME‑типом. Браузер пропустит неподдерживаемый источник и использует запасной вариант, когда ни один источник не годится. Сохраняйте одинаковый осмысленный альтернативный текст, если вы специально не меняете кадрирование.
Формат‑фоллбэк не заменяет адаптивный выбор размеров. Предоставляйте кандидаты с разными ширинами и правдивое значение sizes, когда слот варьируется. Указывайте width и height, чтобы браузер мог зарезервировать место. Небольшой файл формата при слишком большом пиксельном размере всё равно тратит байты напрасно.
AVIF первым, WebP вторым, затем JPEG для непрозрачных фото или PNG, когда запасному варианту нужна прозрачность или без‑потерьные края.
Если сервер выбирает формат по возможностям запроса вместо разметки picture, правильно настройте вариации кеша и протестируйте, что каждый клиент получает декодируемое представление.
Используйте клиент без предпочитаемого декодера или целенаправленно отключите источник в стенде; подтвердите, что изображение, размеры и альтернативный текст остаются корректными.
Учтите время кодирования и защитите визуальное качество
Современное сжатие переводит работу в этап кодирования. Референсный кодировщик AVIF предлагает диапазон скорости от 0 (самый медленный) до 10 (самый быстрый); WebP также жертвует временем кодирования ради размера и качества вывода. Рассматривайте пакетную перекодировку или трансформацию по запросу как операционное решение, а не как бесплатное изменение настроек.
Установите повторяемую политику по классам ассетов и проверяйте оригиналы на типичных размерах отображения. Инспектируйте лица, градиенты, текст, края и границы прозрачности. Храните мастер и фиксируйте версию кодировщика и настройки, чтобы дефект можно было воспроизвести и откатить.
Быстрое кодирование снижает нагрузку на сборку, но может дать больший файл или менее эффективное сжатие; бенчмарьте собственный набор исходников.
Оценка или пресет не заменяют визуальную проверку областей изображения, важных для посетителей.
Сделайте изменения формата изображений практикой проактивной надёжности
Для Status Is UP оптимизация изображений — это проактивная работа по доступности, когда она предотвращает деградацию критической страницы при выпуске. Инвентаризуйте критические URL изображений, проведите репрезентативную конвертацию в стенде и проверьте Content‑Type, поведение CDN и инвалидирование кеша перед миграцией по всему сайту.
Деплойте пакетно с возможностью отката. Сравните рендер и поведение передачи на release‑кандидате, затем сохраняйте старое представление, пока новый путь не будет доказан. Если трансформация или правило кеша провалится, восстановите известный‑хороший источник. Это устойчивое направление доставки, а не универсальный мандат на AVIF или множественные форматы.
Приоритезируйте лид‑изображение и контентные картинки, влияющие на первый полезный экран, а не всю архивную библиотеку сразу.
Держите детерминированные имена ассетов или версионную мапу, чтобы путь к предыдущему JPEG, PNG или WebP можно было быстро восстановить.