Загружаем свежие темы...
Страница 3 из 3
AVIF – современная альтернатива WebP и JPEG
Что такое AVIF?
AVIF (AV1 Image File Format) – формат изображений на основе видеокодека AV1, разработанного Alliance for Open Media (Google, Netflix, Mozilla и др.). AVIF предлагает еще большее сжатие – на 20-30% эффективнее, чем WebP, при сохранении аналогичного качества изображения.
Установка плагина AVIF в Photoshop
Скопировать плагин AVIF сюда:
C:\Program Files\Common Files\Adobe\Plug-ins\CC
Сохранение AVIF в Photoshop происходит без предварительного просмотра.
Ключевые преимущества AVIF
- Лучшее сжатие – на 20-30% меньше WebP
- Прозрачность и анимация – как в WebP
- Поддержка HDR и 10-битного цвета
WebP 65 кБ против AVIF 42 кБ
Перемещайте разделитель
В этом сравнении AVIF немного проигрывает качеству WebP, но и размер WebP на 50% больше. Я при сохранении файла просто поставил степень сжатия 50 чисто интуитивно и все. Возможно, если установить 55-60 то разница исчезнет.
AVIF однозначно кодируется дольше – на изображение 900х600 px уходит около 5-6 секунд. Качество 50 = 42 кБ, 55 = 52 кБ, 60 = 62 кБ.
Напомню, что это же изображение jpeg с аналогичным качеством – 131 кБ!
Фотография 1280х854 px сохраненная с разными кодеками:
| Тип файла | Кб |
|---|---|
| img_3836.jpg | 131 |
| img_3836.webp | 66 |
| img_3836.avif | 42 |
Все изображения кликабельны
Недостатки AVIF в WEB
Отображение AVIF в Windovs 10
- Медленное кодирование – конвертация занимает больше времени, чем в WebP
- Ограниченная поддержка – Safari и старые браузеры могут не поддерживать
- Windows 10 не имеет встроенной поддержки формата AVIF
- Даже после установки кодеков Windows может не показывать превью AVIF-файлов
Вывод: AVIF — это самый современный формат, который уже сегодня можно использовать для существенного увеличения сжатия изображений для достижения минимального их размера на хостинге и ускорения сайта.
На сайте 5 изображений слайдера я перевел в AVIF сэкономив тем самым около 150 кБ. Даже если у кого-то на IE6 не откроется слайдер – он лишится только части второстепенного оформления.
Подведение итогов
- Хранение файлов фотосессии – RAW и JPEG
- Скрины экрана для сайта – PNG 8-bit
- Фотографии для сайта – WebP
- Максимальное сжатие – AVIF
График размера файла JPEG – WebP – AVIF
Диаграмму строил на другом изображении – тут AVIF так явно не уделывает WebP по степени сжатия. Возможно AVIF при степени сжатия 40 даст лучшую картинку, нежели WebP на 50 на другом изображении – мне не ведомо.
А вот добавление резкости на фотографии увеличивает ее размер на 5-7% на всех форматах.
AVIF явно сильнее жмет, но нет возможности предварительно оценить качество финального изображения и его размер – в этом его главное неудобство.
Ссылки на кодеки и плагины WebP и AVIF указанные в статье
- Скачать WebP codec windows vs mac
- Скачать WebPShop 0.4.3 plug-in for Photoshop
- Скачать XnConvert Image Converter
- Скачать Avif Format v1.0.7 plug-in for Photoshop
Все ли изображения WebP и AVIF открывались у вас? Поделитесь опытом в комментариях!
Комментарии
RSS лента комментариев этой записи