WebP и AVIF для сайта: как уменьшить картинки без брака

Чтобы уменьшить изображения сайта, недостаточно переименовать файлы в WebP или AVIF. Нужны реальные преобразованные версии, подходящие размеры и проверка результата на странице. Выбирайте вариант по конкретному изображению: сколько он занимает, сохранились ли важные детали и получает ли его посетитель. Процент экономии нельзя заранее обещать одинаковым для фотографии, схемы и снимка интерфейса. Проверка нескольких образцов полезнее массового преобразования всей медиатеки без просмотра.

Ниже — порядок подготовки и приёмки изображений для своего сайта. Он не задаёт единственную настройку качества для всех проектов и не обещает рост продаж от замены формата. Учебные числа показывают только способ расчёта. Оригиналы сохраняют отдельно, а новые версии сначала проверяют на копии или ограниченном наборе материалов. Если на изображение нет разрешения, преобразование в другой формат не создаёт права его использовать.

Начните с места использования, а не с расширения

Одно фото может показываться маленьким в списке и крупным в карточке. Для этих мест могут потребоваться разные варианты. Запишите роль изображения, размер области на странице, возможность увеличения и детали, которые должны оставаться различимыми. Для товара это могут быть фактура или маркировка, для схемы — подписи и линии. Не выбирайте самый маленький файл, если он перестал выполнять информационную задачу.

Для первого сравнения возьмите несколько характерных материалов: фотографию с мелкими деталями, ровный фон, скриншот с текстом и изображение с прозрачностью, если такие есть в проекте. Не подменяйте выборку одной удачно сжавшейся обложкой. У каждого образца сохраните исходный файл и место использования. Тогда результат можно обсуждать предметно, а не спорить о том, «какой формат лучше вообще».

В справочнике форматов MDN описаны WebP, AVIF, JPEG, PNG и SVG, их возможности и совместимость. WebP и AVIF могут быть полезны для растровых изображений; SVG относится к векторным. Это не основание превращать любой исходник в один выбранный тип. Формат подбирают вместе с содержимым и требованиями поддерживаемых браузеров. Запасной вариант проверяется там, где он предусмотрен реализацией.

Пять вопросов к одному тестовому файлу

Что изменилось в размере файла? При каком разрешении его подготовили? Какая настройка преобразования использована? Где проверено качество? Какой вариант реально выбрал браузер? Ответы нужны вместе. Если уменьшить и разрешение, и качество, и формат одновременно, одно сравнение не объяснит вклад каждой операции. Для выбора рабочего варианта полезно сохранять несколько понятных кандидатов с подписанными параметрами.

Для визуальной проверки не ограничивайтесь сильно уменьшенным предпросмотром. Посмотрите изображение в том размере и контексте, где оно потребуется посетителю. Отдельно проверьте тонкие линии, мелкий текст, границы предметов и прозрачность. Если изображение можно увеличивать, испытайте и этот сценарий. Нельзя считать пригодной большую товарную фотографию по одному просмотру её маленькой копии в административной панели.

Учебный расчёт экономии не предсказывает скорость страницы

Предположим, сопоставимые кандидаты для одного места занимают триста, сто восемьдесят и сто двадцать условных килобайт. Относительно первого файла второй меньше на сто двадцать, то есть на сорок процентов. Третий меньше на сто восемьдесят, то есть на шестьдесят процентов. Числа вымышлены и не являются измерениями каких-либо форматов. В реальном сравнении нужно подставить размеры своих подготовленных файлов.

Даже при такой экономии нельзя объявить страницу быстрее на шестьдесят процентов. Время зависит и от других ресурсов, соединения, обработки и устройства. Объём конкретного файла — отдельное измерение. Сохраните его, затем проверьте загрузку страницы в выбранных условиях. Если новая версия вообще не используется в разметке, экономия в папке проекта никак не подтверждает изменение передачи данных посетителю.

Сравнивайте одинаковые единицы и условия. Размер файла на диске, объём переданных по сети данных и сведения об уже закэшированном ресурсе могут описывать разные наблюдения. Для задачи укажите, откуда получено число. Не рассчитывайте «среднюю экономию сайта» по нескольким несопоставимым значениям. Итог должен позволять другому сотруднику повторить расчёт и понять, что именно стало меньше.

Варианты под экран требуют проверки разметки

Материал web.dev об адаптивных изображениях объясняет, как наборы кандидатов помогают браузеру выбирать ресурс с учётом условий отображения. Ширина области в CSS и плотность экрана — разные величины. Поэтому правило «на телефоне всегда нужен файл шириной ровно столько же пикселей» недостаточно. Разметка должна описывать реальные условия использования, а результат выбора проверяется в браузере.

Попросите разработчика показать не только список созданных файлов, но и запрос на проверяемой странице. Для одной и той же карточки сравните условия небольшого экрана и более крупного представления. Если всегда запрашивается единственный огромный оригинал, наличие маленьких вариантов в хранилище ещё не решило задачу. Если всегда берётся слишком маленький файл, проверьте читаемость нужных деталей в большом представлении.

Не превращайте эту проверку в обещание, что браузер при любых обстоятельствах выберет заранее названный вами файл. Нужен подтверждённый результат в определённых условиях и корректно описанные кандидаты. Сохраняйте URL выбранного ресурса, область отображения и условия устройства. Тогда при следующем изменении шаблона можно проверить, не вернулась ли загрузка неоправданно большого изображения.

Как не потерять пригодные оригиналы

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

Уточните последствия удаления старых файлов. На них могут ссылаться опубликованные статьи, внешние материалы и другие представления сайта. Появление новой версии в карточке не доказывает, что старая больше нигде не нужна. Для очистки требуется отдельная проверка связей. Если адрес файла меняется в штатном выпуске, испытайте ссылки и сохраните согласованный порядок замены, а не удаляйте оригиналы ради красивого отчёта об освобождённом диске.

Если изображения преобразуются при запросе, отдельно обсудите ресурсы сервера и кэширование результата. Не запускайте бесконтрольную параллельную обработку всей медиатеки на рабочей машине. Для проекта важны ограничения, наблюдение за нагрузкой и способ остановить именно свою задачу. Конкретные параметры зависят от инфраструктуры. Сам выбор WebP или AVIF не отвечает на вопрос, сколько одновременных преобразований выдержит сервер.

Проверка первой партии и редакционный порядок

Выберите ограниченную группу страниц и сохраните исходное состояние. Проверьте изображение в списке, карточке и увеличении, если эти представления существуют. Откройте поддерживаемые проектом устройства и браузеры. Сравните запрос, файл и видимый результат. При обнаружении брака запишите конкретный образец и условие, а не повышайте качество всех изображений наугад. Такое изменение может увеличить объём без решения исходной проблемы.

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

В задачу на оптимизацию изображений передайте выборку, места использования и измерения. Для проверки загрузки сайта полезны адреса страниц и фактические запросы ресурсов. Итог оценивается по двум независимым признакам: посетитель получает подходящий по объёму файл, а изображение сохраняет нужную информацию. Одно новое расширение без этих проверок ещё не означает завершённую оптимизацию.