Инструкция для разработчика или владельца сайта

Как безопасно изменить формат изображений

Не заменяйте все файлы одним форматом вслепую. Сначала сделайте выборку, сравните вес и качество, затем добавьте новые варианты с fallback и проверьте фактическую доставку.

Последовательность выбора и подключения нового формата изображения
Исходник остаётся нетронутым до завершения проверки.

До начала работ

Сохраните оригиналы и копию шаблонов, выберите несколько типовых страниц и запишите вес изображений в Network при отключённом кеше. Отдельно отметьте LCP-изображение, прозрачность, анимацию и файлы с мелким текстом.

Сообщение специалисту

«Нужно подобрать AVIF/WebP по результатам сравнения, сохранить JPEG/PNG-fallback и исходники, не менять URL без карты замен и проверить desktop/mobile, Content-Type, currentSrc, качество и вес до/после».

Порядок настройки

  1. Разделите файлы по назначению: фотографии, скриншоты, логотипы/иконки, прозрачная графика и анимация.
  2. Для небольшой выборки создайте варианты с несколькими настройками качества. Сравнивайте при реальном размере показа.
  3. Не сохраняйте вариант, если он тяжелее или портит детали. Для векторной графики обычно сохраняют SVG, для точных скриншотов часто подходит lossless-режим или PNG.
  4. Подключите предпочтительные источники перед fallback:
<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Описание изображения" width="1200" height="800"> </picture>
  1. Сохраните корректные srcset и sizes для каждого формата. Не выдавайте один большой файл всем экранам.
  2. Не добавляйте loading="lazy" главному изображению первого экрана; ниже первого экрана ленивую загрузку можно сохранить.
  3. Настройте правильные MIME-типы. При согласовании по Accept проверьте кеш и Vary.
  4. Откройте страницы без кеша на desktop и mobile, проверьте fallback, прозрачность, анимацию, 404 и вес.

Ошибки и откат

Что проверить перед публикацией
РискПроверкаДействие
Новое расширение, старое содержимоеСмотрите Content-TypeИсправьте конвертацию и MIME
Потеря прозрачности или текстаСравните изображения рядомВыберите lossless или другой формат
Нет fallbackОтключите источники AVIF/WebPВерните рабочий img src
Вес выросСравните transferred size без кешаОставьте исходный вариант

Для отката верните прежнюю разметку или конфигурацию CDN и исходные URL. Новые варианты удаляйте только после проверки ссылок.

Используйте инструкцию по проверке или закажите изменение форматов.