AVIF
Определение: AVIF (AV1 Image File Format) — это новый формат изображений, основанный на кодеке AV1, который предоставляет отличное сжатие с минимальными потерями качества. Он позволяет создавать изображения с гораздо меньшим размером по сравнению с JPEG, PNG и даже WebP, что делает его идеальным для использования на современных сайтах для ускорения загрузки.
Зачем это нужно
- Значительно снижать вес изображений при хорошем качестве.
- Ускорять загрузку страниц: быстрее загружаются и отображаются изображения.
- Экономить трафик пользователей, особенно на мобильных устройствах и в условиях с ограниченной сетью.
- Поддерживать современные стандарты и технологии с оптимизированной графикой.
- Использовать в качестве лучшего варианта сжатия для изображений по сравнению с JPEG и WebP.
Пример
Пример кода:
// Меняем изображение на формат AVIF
const img = document.getElementById('productImg');
// Устанавливаем источник на .avif
img.src = '/images/product.avif';
// Пример использования в качестве фонового изображения (CSS)
.product-image {
background-image: url('/images/product.avif');
}
Скриншот
Подпись к скриншоту: DevTools “Network”: открытый запрос на изображение с расширением .avif и типом content-type image/avif
Частые ошибки
- Не учитывать поддержку AVIF в старых браузерах и не предоставлять фолбэк (например, WebP или JPEG).
- Перегружать сайт слишком большим количеством изображений в AVIF без оптимизации (например, лишний DPI или размеры).
- Не проверять качество изображения после сжатия и получать артефакты на изображениях с высоким контрастом.
- Использовать AVIF без проверки производительности на разных устройствах и браузерах, что может привести к неправильной загрузке.
- Не адаптировать размер изображений в зависимости от экрана, из-за чего можно перегрузить мобильные версии страницы.
Связанные термины
Наши услуги
- Доработка сайтов — внедрим поддержку AVIF, оптимизируем изображения и ускорим загрузку страниц.
- Техническая поддержка сайта — следим за производительностью и улучшением качества изображений на всех устройствах.
- SEO-продвижение сайтов — улучшаем скорость загрузки сайта, что помогает улучшить метрики Core Web Vitals.