Многие коллеги, работая и поддерживая сайты игнорируют современные форматы изображений, а зря. Обычно это связано с тем, что мало кто углубляется в тему, а пользователям – так тем вообще все равно, картинка и картинка.
Работая над новым сайтом, мы плотно занялись этим вопросом и получили определенные практические результаты, которыми и хотим поделиться.
Начнем с теории, сегодня, кроме привычных JPG и PNG мы можем выбрать более современные форматы, такие как AVIF и WebP. В чем их преимущества? Если коротко – в меньшем размере изображения при сохранении визуального качества.
Это очень важный параметр для любого сайта, особенно в наше время, когда размеры и разрешения изображений существенно выросли. Сегодня мало кто захочет рассматривать картинки меньше, чем 1000 px, а еще лучше если это будет хотя бы FHD.
Но это существенно увеличивает как размер картинки, так и размер страницы. Мало того, что она начинает медленно грузиться у пользователя, так еще и негативно влияет на поисковое ранжирование. При прочих равных на более высокое место в поиске будет поставлен сайт, который грузится быстрее.
Поэтому современные форматы — это не прихоть, а ответ на сложившиеся вызовы и отличный способ сделать сайт быстрее и удобнее для пользователя.
🔹 WebP – формат предложен Google в 2010 году, поддерживает сжатие с потерями и без, прозрачность, анимацию. В настоящий момент поддерживается всеми актуальными браузерами, поэтому вопрос совместимости практически не стоит на повестке дня.
Позволяет достичь хороших показателей сжатия по сравнению с исходными JPG / PNG, при этом достаточно производительный и не требует серьезных вычислительных ресурсов на кодирование/декодирование.
🔹 AVIF – гораздо более современный формат на основе кодека AV1, разработан в 2019 году и начал поддерживаться в браузерах примерно с 2021 года, позволяет достичь еще более высокой степени сжатия чем WebP при сохранении качества исходного изображения.
Из недостатков – ограниченная поддержка только современными версиями браузеров, ресурсоемкость как при кодировании, так и при декодировании, что может создавать проблемы при просмотре страниц на старых и маломощных устройствах, не поддерживающих аппаратное декодирование.
👆 Все это хорошо, а что на практике? А практика показала следующее – WebP действительно быстрый, но степень сжатия для него не должна превышать 80%, но даже в этом случае на изображении начинают появляться артефакты.
Обычно они не сильно бросаются в глаза и обнаружить их можно только сравнением с исходным изображением, но в некоторых случаях могут быть даже сильно заметны. Полностью избавиться от них можно только при степени сжатия 90-95%, что ведет к увеличению размера файла в 2-4 раза.
Так, например, один и тот же файл со степенями сжатия 85-90-95% будет иметь размеры 80 КБ, 140 КБ и 250 КБ. Что уже достаточно существенно. На результаты такого сжатия можно посмотреть на первых двух изображениях, представлены файлы с 85% и 95% сжатия.
AVIF конвертируется гораздо дольше, но результаты получаются гораздо более высокого качества. Так для приведенного выше изображения артефакты начали проявляться при степени сжатия 40% и то грубых огрехов изображение не содержит. А на уровне 60% выглядит практически неотличимо от оригинала. Размеры тоже радуют 17 КБ и 30 КБ.
Две последние картинки, это как раз AVIF со сжатием 40% и 60%.
Таким образом лидер вырисовывается явно – AVIF и его следует использовать во всех возможных случаях, даже следует WebP, приоритет которому нужно установить таким образом, чтобы он отображался только в том случае, если браузер не поддерживает AVIF.
Для себя мы остановились на 60% для AVIF и 80% для WebP (учитывая, что он используется только как замещающий формат). В итоге получили такие результаты:
Общий размер исходных (.jpg/.png): 134.87 MB
WEBP: 35.65 MB Экономия: 73.57%
AVIF: 38.29 MB Экономия: 71.61%
С одной стороны вроде бы большой разницы нет, но при одинаковом размере мы получаем отличное качество у AVIF и незначительное ухудшение при WebP.