Введение
Я считаю, что все сайты и приложения должны стремиться к скорости работы, которую можно охарактеризовать как “мгновенно”. Один из аспектов скорости работы сайта - это скорость загрузки изображений. Мы как разработчики должны убедиться, что наши изображения загружаются как можно быстрее. Единственный способ достичь этого – использовать картинки минимального размера в байтах. Этого можно достичь двумя путями:
- Зверски сжимать изображения, часто с потерей качества
- Использовать форматы изображений, которые сжимаются лучше, чем форматы, которые используются по умолчанию В этой статье мы рассмотрим второй путь.
Почему Webp и Avif?
WebP и AVIF – это новые форматы изображений, которые позволяют сжимать изображения в вебе в 2-3 раза больше, чем JPEG и PNG. Это означает, что веб-страницы загружаются и рендерятся быстрее. На данный момент оба этих формата поддерживаются большинством современных браузеров. Исключение составляет Safari с поддержкой WebP, но без поддержки AVIF (поддержка ожидается в macOS 13).
Как коневертировать изображения в Webp и Avif?
Для конвертации изображений в Webp и Avif можно использовать imagemagick.
convert input.jpg output.webp
convert input.jpg output.avif
В качестве примера, я взял данное изображение: ссылка. Вы можете скачать его и использовать для тестирования.
Давайте сравним размеры изображений в байтах в разных форматах.
wc -c input.jpg output.webp output.avif
80061 input.jpg
36994 output.webp
13979 output.avif
131034 total
Обратите внимание:
- WebP файл меньше оригинального jpg в 2,1 раза
- AVIF файл меньше оригинального jpg почти в 5.7 раз
- AVIF меньше чем webp в 2.6 раза
Как видите, AVIF сжимает изображения лучше, чем WebP. Почему же, тогда мы не используем AVIF везде? Всё потому что AVIF ещё молодой формат и из-за этого:
- Его поддержка браузерами лишь 70%, в то время как у WebP это 94%, а у jpg/png – 100%
- Не оптимизированы библиотеки для кодирования AVIF, что приводит к тому, что AVIF кодируется медленнее, чем WebP
HTML код для поддержки Webp и Avif
Мы воспользуемся тегом <picture> для поддержки Webp и Avif.
Он позволяет указать несколько источников для изображения, в зависимости от поддержки браузером разных форматов.
И определить fallback для браузеров, которые не поддерживают Webp и Avif.
<picture>
<source srcset="output.avif" type="image/avif">
<source srcset="output.webp" type="image/webp">
<img src="input.jpg" alt="input">
</picture>
Итог
Всегда используйте Webp и Avif через тег <picture>.
Это фактически бесплатно с точки зрения самого сайта, но при этом вы получаете сжатые изображения, которые загружаются быстрее,
расходуя меньше трафика и позволяя браузеру быстрее отрисовать страницу.