Перевожу изображения на WebP и AVIF и задумался: есть ли смысл всегда выбирать самый современный формат? На практике результат зависит не только от расширения, но и от исходника, настроек сжатия и того, как картинка используется на странице. Для фотографий один формат может заметно уменьшить файл, а для простой графики с прозрачностью разница бывает куда скромнее.
Сейчас стараюсь не прогонять всё через одну настройку. Для фотографий проверяю качество на нескольких уровнях, для логотипов и иконок обычно оставляю SVG, а мелкие детали внимательно смотрю на предмет ореолов и размытия. Важно не забыть и про размеры: огромный исходник, уменьшенный только через CSS, всё равно может зря грузиться пользователю.
Для совместимости можно отдавать несколько вариантов через <picture>, оставив JPEG или PNG запасным форматом. Но тогда появляются дополнительные файлы и логика сборки, а выигрыша может не быть, если сайт уже быстро загружается. Как вы решаете, когда AVIF действительно оправдан, и чем проверяете качество после конвертации? Интересно сравнить не только вес, но и то, что происходит с картинкой на реальном экране.
Сейчас стараюсь не прогонять всё через одну настройку. Для фотографий проверяю качество на нескольких уровнях, для логотипов и иконок обычно оставляю SVG, а мелкие детали внимательно смотрю на предмет ореолов и размытия. Важно не забыть и про размеры: огромный исходник, уменьшенный только через CSS, всё равно может зря грузиться пользователю.
Для совместимости можно отдавать несколько вариантов через <picture>, оставив JPEG или PNG запасным форматом. Но тогда появляются дополнительные файлы и логика сборки, а выигрыша может не быть, если сайт уже быстро загружается. Как вы решаете, когда AVIF действительно оправдан, и чем проверяете качество после конвертации? Интересно сравнить не только вес, но и то, что происходит с картинкой на реальном экране.
Комментарии 9
Обсуждение темы — по порядку