AVIF представляет собой оптимизированный формат изображений, созданный для уменьшения размера файлов при сохранении качества (без потерь). Расширение файла – .avif.
AVIF расшифровывается как AV1 Still Image File Format. AV1 при этом открытый видеокодек AOMedia Video 1, созданный для потокового видео в интернет.
Компания AOM разработала AVIF с целью создания бесплатных изображений с более высокой эффективностью сжатия и большей поддержкой функциональности по сравнению с существующими форматами.
AVIF теперь поддерживают такие крупные компании, как Google, Netflix и Apple.
Почему AVIF лучше?
Как и его предшественники (WebP, JPEG-XR, JPEG2000 и PNG, GIF), AVIF совместим с изображениями с расширенным динамическим диапазоном яркости. Он поддерживает 10- и 12-битный цвет при полном разрешении.
AVIF – хороший выбор для веб-разработчиков, потому что:
- Это бесплатный формат и можно не беспокоится о лицензировании.
- В настоящее время его поддерживают многие крупные игроки, такие как Google, Amazon, Netflix, Microsoft и другие.
Создает наиболее высокое сжатие по сравнению с конкурентами. Так в среднем он обеспечивает размер файлов на 50% меньше, чем jpg и на 20% меньше, чем webp.
Имеет поддержку современных функций, таких как прозрачность, HDR и многих других.
Как начать использовать
Есть, по крайней мере, два способа начать использовать изображения AVIF:
Один из них – конвертировать ваши старые изображения в AVIF. Другой – путем создания изображений AVIF с помощью редакторов изображений, поддерживающих этот формат.
Как конвертировать изображения в AVIF
Поскольку AVIF еще находится в зачаточном состоянии, самый простой способ создать изображения в этом формате – это преобразовать ваши старые файлы.
Это можно сделать онлайн, так как существуют подходящие онлайн-конвертеры. Например, есть простой и быстрый AVIF online converter.
Для его использования:
- Зайдите на сайт по ссылке выше.
- Загрузите свои старые изображения (могут быть PNG, JPEG, GIF и другие).
- Подождите, пока сайт проведет конверсию.
- Сохраните ваши новые файлы AVIF.
Как создавать изображения AVIF
Следующие редакторы в настоящий момент позволяют открыть файлы и полностью поддерживают новый формат:
- Microsoft Paint – начиная с обновления «19H1», теперь вы можете нарисовать изображение и выполнить «сохранить как» AVIF.
- GIMP для Windows и Linux поддерживает AVIF начиная с версии 2.10.22.
- Разработчики Photoshop также планируют сделать поддержку в скором будущем.
Как использовать на своем сайте
Зачем вообще внедрять его на свой сайт? Основные причины:
- Увеличивается скорость загрузки контента, а это улучшение поведенческих факторов.
- Уменьшается нагрузка на сервер.
AVIF – это относительно новая технология. Но основные браузеры уже поддерживают этот формат, что означает, что вы можете использовать его непосредственно в теге <img>. Просто имейте в виду, что не все браузеры полностью поддерживают его.
На примере покажем, как сделать вывод изображения с помощью тегов HTML5 <picture> и <source>.
<picture>
<!-- используем картинку AVIF, если браузер его поддерживает -->
<source srcset="image.avif" type="image/avif">
<!-- если же браузер не поддерживает AVIF -->
<img alt="запасная картинка" src="image.jpg"/>
</source>
</picture>Перспективы
Первым браузером, полностью поддерживающим AVIF, является Chrome 85. Mozilla Firefox также поддерживает формат.
AVIF, вероятно, вскоре станет стандартом для изображений в интернет. Из-за его потенциальных возможностей он получит полную поддержку на всех платформах.
В отличие, например, от продукта Google WebP, на поддержку которого от Apple потребовалось несколько лет, AVIF быстро привлек интерес Apple, и компания сама участвует в этом проекте.