🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-01-26.

AVIF — это современный формат изображений, основанный на видеокодеке AV1. Он позволяет получать небольшие по размеру, но при этом очень качественные картинки, что особенно важно для скоростной загрузки сайтов и экономии трафика.

Чтобы отображать AVIF-изображения на странице, достаточно вставить <img> с указанием файла AVIF в атрибут src:

<img src="image.avif" alt="Описание изображения">

Также хорошо использовать picture для поддержки браузеров, которые могут не поддерживать AVIF. Внутри блока picture добавляем source с указанием формата:

<picture>
  <source srcset="image.avif" type="image/avif">
  <img src="fallback.jpg" alt="Описание изображения">
</picture>

Это обеспечит совместимость и плавный переход. Сегодня большинство современных браузеров уже умеют показывать AVIF, что делает его отличным выбором для оптимизации изображений в интернете.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.