Вопрос или проблема
Я хочу перекодировать изображения для веб-сайта в современные форматы файлов и провел некоторые тесты с AVIF, WebP и JPEG XL, используя следующие настройки для соответствующих кодеров:
cjxl -e 9 -q 80 --lossless_jpeg=0
cwebp -q 80 -m 6
avifenc -s 0 -q 80 --qalpha 80
При перекодировании фотографий cjxl выдал самые маленькие файлы (cwebp на втором месте, а avifenc на последнем):
-rw-r--r--@ 1 snafu staff 1.4M Oct 26 15:04 photo_large.avif
-rw-r--r--@ 1 snafu staff 7.7M Oct 26 12:26 photo_large.jpeg
-rw-r--r--@ 1 snafu staff 950K Oct 26 15:03 photo_large.jxl
-rw-r--r--@ 1 snafu staff 1.0M Oct 26 15:03 photo_large.webp
Скриншоты (обычно содержащие несколько окон/списков файлов и другие элементы интерфейса) показывают обратный порядок:
-rw-r--r--@ 1 snafu staff 139K Oct 26 11:46 screenshot_large.avif
-rw-r--r--@ 1 snafu staff 384K Oct 26 11:55 screenshot_large.jxl
-rw-r--r--@ 1 snafu staff 1.4M Oct 26 11:32 screenshot_large.png
-rw-r--r--@ 1 snafu staff 247K Oct 26 11:39 screenshot_large.webp
У меня было впечатление, что как AVIF, так и JPEG XL были разработаны для замены старых форматов для всех типов изображений, поэтому я ожидал, что они оба будут выдавать меньшие файлы, чем WebP, при фиксированном качестве. Я не понимаю, почему AVIF и JPEG XL успешны в разных типах изображений.
Я буду признателен за любые подсказки относительно сопоставимых настроек и объяснение удивительных (по крайней мере, для меня) сильных и слабых сторон AVIF и JPEG XL.
Ответ или решение
Понимание размеров файлов изображений: AVIF, WebP и JPEG XL
При подходе к выбору форматов изображений для веб-сайта современные технологии сжатия играют решающую роль в производительности и эффективности загрузки страниц. В этой статье мы рассмотрим три современных формата: AVIF, WebP и JPEG XL, основываясь на ваших тестах и результатах.
Как мы тестировали
Вы провели сравнение форматов, используя специфические настройки для каждого кодека, что позволило получить четкие данные о размерах файлов при стандартном качестве.
- JPEG XL:
cjxl -e 9 -q 80 --lossless_jpeg=0 - WebP:
cwebp -q 80 -m 6 - AVIF:
avifenc -s 0 -q 80 --qalpha 80
Результаты ваших тестов показали следующие размеры файлов для фотоснимков:
- AVIF: 1.4M
- JPEG: 7.7M
- JPEG XL: 950K
- WebP: 1.0M
При тестировании графиков и скриншотов ситуация меняется:
- AVIF: 139K
- JPEG XL: 384K
- PNG: 1.4M
- WebP: 247K
Причины различий в размерах файлов и качестве
1. Алгоритмы сжатия
Каждый из форматов использует свои алгоритмы сжатия, которые оптимизированы под разные типы изображений:
-
AVIF является частью кодека AV1 и предоставляет хорошее качество для фотографий с высокими деталями. Однако его производительность может снижаться на менее детализированных изображениях, такими как скриншоты, что объясняет больший размер для фотографий в ваших тестах.
-
JPEG XL демонстрирует удивительную эффективность при обработке изображений со сжатыми графическими элементами и текстами, благодаря своей способности обрабатывать как фотографии, так и изображения с резкими гранями. Этот формат использует адаптивные алгоритмы и может предоставлять более сумму при этих типах изображений.
-
WebP, несмотря на то что он более старый по сравнению с AVIF и JPEG XL, все еще весьма распространен и обеспечивает разумный компромисс между качествами и размерами файлов, особенно для изображений с несложной композицией.
2. Качество и компромиссы
При использовании аналогичных настроек сжатия, можно отметить, что предпочтения пользователей изображения также играют роль:
- Для фотографий с высокой детализацией AVIF показывает свои возможности, однако в некоторых случаях JPEG XL может предложить меньший размер при аналогичном качестве.
- Для скриншотов (изображений с плоскими цветами и четкими границами) JPEG XL и WebP лучше справляются со сжатием, укладываясь в меньшие размеры файлов.
Настройки для улучшения результатов
Если ваша цель — достигнуть оптимального размера без потерь в качестве, вот несколько рекомендаций:
-
Экспериментируйте с качеством: Попробуйте снизить качество для AVIF и JPEG XL, чтобы увидеть, можно ли добиться более компактных файлов.
-
Анализируйте разные настройки кодирования. Например, для JPEG XL вы можете поэкспериментировать с настройками, которые специфично оптимизированы для задач с изображениями.
-
Сравните производительность загрузки для ваших целевых устройств и браузеров, так как некоторые форматы могут обрабатывать изображения быстрее, чем другие в зависимости от реализации.
Вывод
Как видно из ваших тестов, AVIF и JPEG XL действительно обладают различными сильными сторонами, которые показывают свою полезность в зависимости от типа изображений. Для фотографий AVIF может быть хорошим выбором, в то время как для скриншотов JPEG XL или WebP предлагает лучшие характеристики сжатия.
Понимание сильных и слабых сторон этих форматов позволит вам более обоснованно подойти к выбору и оптимизации изображений для вашего веб-сайта.