AVIF грубо сжимает изображение На 20 процентов меньше, чем WebP с тем же качеством, тогда как WebP кодирует в несколько раз быстрее и работает в большем количестве мест. Оба являются форматами следующего поколения, созданными на основе видеокодеков: WebP из VP8 в 2010 году, AVIF из более нового AV1 в 2019 году. AVIF — более мощный компрессор с поддержкой HDR и 12-битного цвета. WebP — это прагматичный вариант по умолчанию, с более широкой поддержкой программного обеспечения и более быстрым кодированием. Это сравнение охватывает происхождение каждого формата, сжатие, скорость кодирования, глубину цвета, поддержку браузера, прозрачность и анимацию, а также то, какой формат выигрывает для конкретного использования.

Ни один из них не побеждает в полной мере. AVIF создает файлы самого маленького размера и с самой широкой цветовой гаммой; Сегодня WebP быстрее создавать и безопаснее в обслуживании. Многие сайты предлагают оба варианта: сначала AVIF, затем WebP, а в последнюю очередь — JPG или PNG, поэтому каждый браузер получает лучший формат, который он может прочитать.

Откуда взялся каждый формат

Оба формата представляют собой кадры, полученные в результате сжатия видео. WebP берет код из ВП8, видеокодек Google 2010 года, поэтому ему уже более десяти лет, и он тщательно поддерживается. AVIF берет кодировку из АВ1, бесплатный кодек 2019 года от Alliance for Open Media, в состав которого входят Google, Netflix и Apple. AV1 на поколение опережает VP8, поэтому AVIF сжимает сильнее, но также требует большей вычислительной мощности.

Сжатие: победа AVIF

Сжатие предпочитает AVIF, поскольку AV1 новее и умнее. На той же фотографии при соответствующем качестве AVIF оказывается примерно На 20 процентов меньше, чем WebPи намного меньше, чем JPG. AVIF также аккуратно обрабатывает ровные цвета и градиенты, избегая полос, которые проявляются в более слабых форматах. Для файла наименьшего возможного размера победителем является AVIF, а на изображениях с большими гладкими областями разрыв увеличивается.

Экономия на сайте с большим количеством изображений. Если WebP уже обрезал ваши изображения на треть ниже JPG, AVIF обрезает еще одну пятую сверху, поэтому общее сокращение по сравнению с исходным JPG может приблизиться к половине. Для страниц, измеренных с помощью Core Web Vitals, это значительный прирост скорости.

Скорость кодирования: побеждает WebP

Кодирование — это то, где AVIF платит за сжатие. AV1 требует больших вычислительных ресурсов, поэтому AVIF кодирует в несколько раз медленнее, чем WebP. Это имеет значение, когда сайт обрабатывает тысячи изображений, генерирует их «на лету» или работает на ограниченных ресурсах сервера. WebP кодирует достаточно быстро для использования в режиме реального времени, и это одна из причин, по которой он стал стандартом по умолчанию. Декодирование, то есть то, что браузер делает для отображения изображения, происходит быстро в обоих случаях, поэтому посетители не ощущают замедления в любом случае.

Глубина цвета и HDR: победа AVIF

Глубина цвета четко разделяет эти два изображения. AVIF поддерживает до 12 бит на канал и HDR, поэтому он поддерживает изображения с широкой гаммой и высоким динамическим диапазоном, чего не может WebP. WebP ограничен 8 битами на канал, как и JPG. Для фотографии, современных дисплеев с широкой гаммой и HDR-контента AVIF — единственный выбор из двух. На стандартном 8-битном экране разница незаметна, но на способном оборудовании AVIF показывает цвета, которые WebP просто не может сохранить.

Прозрачность и анимация

Оба формата охватывают прозрачность и анимацию, поэтому ни один из них здесь не выигрывает. Каждый несет полный альфа-канал, поэтому прозрачный логотип остается прозрачным в обоих случаях, и оба поддерживают анимированные клипы гораздо меньшего размера, чем GIF. Анимация AVIF сжимается сильнее благодаря AV1, а анимация WebP создается быстрее. Для простой анимированной графики любой из них решительно превосходит GIF.

Поддержка браузеров и программного обеспечения: победа WebP

Поддержка — преимущество WebP. Каждый современный браузер уже много лет читает WebP, и с этим справляется огромное количество программного обеспечения, плагинов и CDN. Поддержка AVIF теперь широко распространена в браузерах., включая Chrome, Firefox и Safari, но он отстает от WebP, а настольные редакторы, старые системы и некоторые CDN отстают еще больше. Для файла, который сегодня должен надежно открываться в смешанном программном обеспечении, WebP является более безопасным выбором.

Размер файла в реальном выражении

Реальные цифры делают торговлю конкретной. Фотография размером 400 КБ в формате JPG может иметь размер около 280 КБ в формате WebP и около 220 КБ в формате AVIF того же качества. Прозрачное изображение размером 120 КБ в формате PNG может иметь размер 80 КБ в формате WebP и 60 КБ в формате AVIF. Точные цифры зависят от изображения, но порядок сохраняется: самый маленький AVIF, средний WebP, самые большие устаревшие форматы. Выбирайте исходя из того, стоят ли дополнительные 20 процентов более медленного кодирования и более узкой поддержки AVIF.

Скорость декодирования и как ее ощущают посетители

Декодирование, а не кодирование – это то, что испытывает посетитель, и здесь эти два формата близки. Когда браузер отображает изображение, он должен его декодировать, а AVIF и WebP декодирование достаточно быстрое для плавной загрузки страниц. Тяжелые вычисления AV1 в AVIF выполняются на стороне кодирования и выполняются один раз при создании изображения, а не при каждой его загрузке. Таким образом, посетитель никогда не платит за кодирование AVIF; они только выигрывают от его меньшей загрузки.

Это разделение имеет значение для того, как вы развертываете каждый формат. Заранее закодируйте AVIF на этапе сборки или в CDN и кэшируйте результат. Никогда не кодируйте его при каждом запросе, потому что это обременит ваш сервер и не принесет пользы посетителю. WebP достаточно прощает кодирование на лету, но AVIF поощряет предварительную генерацию.

Создание резервного варианта в HTML

Для безопасного обслуживания обоих форматов используется элемент изображения, который позволяет браузеру выбрать лучший источник, который он понимает. Сначала вы указываете AVIF, затем WebP, а затем JPG или PNG. Браузер читает список и загружает первый формат, который он может декодировать, игнорируя остальное. Современный браузер использует AVIF, более старый — WebP, а древний — JPG. Ни один посетитель не увидит испорченное изображение, и каждый получит файл наименьшего размера, который позволяет его программное обеспечение.

Большинство систем управления контентом и CDN изображений создают эту разметку для вас, поэтому вы загружаете один файл, а система генерирует форматы и резервную цепочку. Делать это вручную хорошо для небольшого сайта, но автоматизация лучше масштабируется для сотен изображений.

AVIF для фотографии и HDR

Цветовое преимущество AVIF имеет наибольшее значение в фотографии. Это 12-битный цвет и поддержка HDR. сохранить широкий тональный диапазон современной камеры и яркий результат HDR-дисплея, чего WebP не может сохранить. Пейзаж с ярким небом и глубокими тенями сохраняет больше деталей в формате AVIF. На экране с широкой гаммой насыщенные красные и зеленые цвета, которые WebP обрезает, остаются верными.

Для повседневной веб-графики на стандартных экранах это преимущество незаметно, поскольку 8-битный дисплей не может отображать дополнительный диапазон. Но для фотосайтов, HDR-контента и высококачественных дисплеев AVIF — единственный из двух, который передает изображение должным образом.

Стоимость сервера и инструментов AVIF

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

Практический вывод состоит в том, чтобы сопоставить дополнительную 20-процентную экономию размера с затратами на кодирование и недостатками в инструментах. Для крупных медиа-операций, оптимизирующих каждый байт, AVIF заслуживает своего места. Для небольшого сайта WebP обеспечивает большую часть преимуществ без каких-либо проблем.

Какой формат победит

Ни один из них не выигрывает в каждой работе. Выберите AVIF для самых маленьких файлов, HDR и широкого цвета. когда ваш инструментарий поддерживает это и время кодирования не является узким местом. Выберите WebP для быстрого кодирования, широкой поддержки и безопасного использования по умолчанию. сегодня это работает во многих программах. Самая сильная настройка обслуживает оба варианта: сначала AVIF, затем WebP, а затем резервный JPG или PNG, поэтому каждый посетитель получает лучший формат, который может декодировать его браузер.

Как создавать эти форматы

Создание современных форматов не требует использования тяжелых инструментов WebP. Наш Конвертер PNG в WebP запускается в вашем браузере, группирует файлы и не добавляет водяных знаков. Кодирование AVIF более требовательно, поэтому обычно оно выполняется с помощью CDN изображений или этапа сборки, а не с помощью быстрого инструмента браузера. Для большинства сайтов создание WebP сейчас и добавление AVIF через CDN позже является практическим путем.

Часто задаваемые вопросы

Замедляет ли AVIF мой сайт при загрузке?

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

Как мне использовать AVIF с резервным вариантом WebP?

Используйте элемент изображения. Первым укажите AVIF, вторым — WebP, последним — JPG или PNG., и браузер загружает первый формат, который он может декодировать.

Стоит ли использовать AVIF для небольшого веб-сайта?

Часто еще нет. WebP обеспечивает большую часть экономии с меньшими трудностями., поскольку медленное кодирование AVIF и пробелы в инструментах увеличивают затраты, которые редко нужны небольшому сайту.

AVIF лучше, чем WebP?

По сжатию да. AVIF примерно на 20 процентов меньше и поддерживает HDR. WebP кодирует быстрее и имеет более широкую поддержку, поэтому сегодня это более безопасный вариант по умолчанию.

Насколько AVIF меньше WebP?

Вокруг на 20 процентов меньше того же качества и намного меньше, чем JPG, поскольку AVIF использует более новый кодек AV1.

Почему AVIF создается медленнее?

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

Поддерживает ли WebP HDR?

Нет. WebP ограничен 8 битами на канал, поэтому он не может хранить HDR или цвета с широкой гаммой. AVIF поддерживает до 12 бит и HDR.

Какие браузеры поддерживают AVIF?

Chrome, Firefox и Safari поддерживают AVIF., хотя внедрение отстает от WebP, а некоторые CDN и редакторы отстают. Используйте резервный вариант WebP или JPG для старых клиентов.

Сохраняют ли AVIF и WebP прозрачность?

Да. Оба имеют полный альфа-канал., поэтому прозрачная графика остается прозрачной в любом формате, в отличие от JPG.

AVIF или WebP лучше для анимации?

Оба превосходят GIF; AVIF сжимается сильнее. Анимация AVIF меньше, WebP создается быстрее., поэтому выбирайте, что важнее: размер или скорость кодирования.

Должен ли я использовать AVIF или WebP для своего сайта?

Служите обоим. Сначала AVIF для самого маленького файла, затем WebP для совместимости с резервным форматом JPG или PNG для остальных.

Заменит ли AVIF WebP?

Не скоро. AVIF сжимает лучше, но WebP кодирует быстрее и имеет более широкую поддержку., так что оба, вероятно, будут сосуществовать годами, служа вместе.

Могут ли старые браузеры открывать AVIF?

Часто нет. Поддержка AVIF моложе, чем у WebP, поэтому резервный вариант JPG или PNG необходим для посетителей, использующих старое программное обеспечение.

AVIF и WebP — это форматы следующего поколения, созданные на основе видеокодеков, но AVIF сжимает примерно на 20 процентов меньше и добавляет HDR и 12-битный цвет, тогда как WebP кодирует быстрее и пользуется более широкой поддержкой. Оба сохраняют прозрачность и анимацию, поэтому выбор сводится к тому, хотите ли вы самый маленький файл или самый безопасный и быстрый. Сначала используйте AVIF для размера, затем WebP для совместимости, а для остального — резервный вариант JPG или PNG. Создайте WebP в своем браузере с помощью нашего конвертера, описанного выше, и добавьте AVIF через конвейер изображений.

Краткая справка: AVIF или WebP

Достичь АВИФ когда вам нужен самый маленький файл, когда изображение требует HDR или широкого цвета, и когда ваш CDN или этап сборки могут предварительно закодировать его, не замедляя каждый запрос. Достичь ВебП когда вам нужно быстрое кодирование, широчайшая программная поддержка и простые настройки по умолчанию, с которыми уже работает почти каждый инструмент. Самая сильная настройка — это не одна или другая, а обе, которые подаются по порядку: сначала AVIF по размеру, затем WebP по охвату и последним резервный вариант JPG или PNG, чтобы ни один посетитель не остался с испорченным изображением.

Что будет после AVIF

Форматы изображений продолжают развиваться, и следующим претендентом является JPEG XL, обещающий сильное сжатие с перекодированием JPG без потерь. Его поддержка браузерами сегодня ограничена, поэтому это пока не практичный выбор. На данный момент AVIF и WebP — это два формата следующего поколения, которые стоит использовать, а JPEG XL стоит посмотреть. Создание резервной цепочки означает, что вы можете добавить новый формат позже, не нарушая работу старых браузеров, поэтому подход с использованием элементов изображения ориентирован на будущее.