Изображения Avif, чем открывать

Обновлено: 01.07.2024

Одной из будущих технологий, которая нас очень интересует, является формат файла изображения AV1 (.avif). По сути, это суперсжатый тип изображения. Netflix уже считает, что .avif превосходит JPEG, PNG и даже более новые форматы изображений WebP по соотношению качества изображения и размера сжатого файла.

AVIF по сравнению с JPEG и WebP

AVIF обеспечивает значительное уменьшение размера файла изображений по сравнению с JPEG или WebP; Экономия ~50% по сравнению с JPEG и экономия ~20% по сравнению с WebP. Даниэль Александерсен из CTRL.Blog провел подробный разбор и подробное сравнение AVIF с JPEG и WebP.

На 50 % меньше, чем .jpg

На 30 % меньше, чем .jpg

Этот формат является очень гибким, поскольку он поддерживает любой кодек изображения, может быть с потерями или без потерь, имеет возможность использовать альфа-канал (прозрачность для пользовательского интерфейса и элементов дизайна) и даже имеет возможность хранить серию анимированных изображений. кадры (подумайте о легковесных высококачественных анимированных GIF-файлах).

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

Использование AVIF в современной веб-разработке

По состоянию на 13 января 2021 года AVIF поддерживается в Chrome 85 и Firefox 86 и включается с помощью флага функции в Firefox 85 и более ранних версиях!

Если приведенное выше изображение AVIF не отображается в вашем браузере, попробуйте использовать последнюю версию Google Chrome или включите AVIF в дополнительных настройках Firefox. Это можно сделать, введя about:config в строке URL, выполнив поиск image.avif.enabled и установив для этого параметра значение true .

Создание файлов AVIF онлайн

Squoosh и avif.io – это бесплатные веб-приложения для сжатия изображений, которые за считанные секунды конвертируют ваши изображения в формат .avif.

Команда Google Chrome Labs недавно добавила поддержку AVIF в замечательное веб-приложение Squoosh. AVIF.io — еще одна отличная мощная альтернатива с простыми для понимания опциями.

Если вам удобно работать в командной строке, вы можете использовать официальную библиотеку AOMedia, libavif, для кодирования/декодирования файлов AVIF. Кроме того, если вы являетесь пользователем macOS с Homebrew, вы можете быстро установить предварительно собранную версию, используя brew install joedrago/repo/avifenc и avifenc --help для синтаксиса и параметров.

AVIF как прогрессивное улучшение

Несмотря на то, что AVIF пока не везде поддерживается, мы по-прежнему можем использовать этот формат в собственном HTML с

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

вообще, он вернется к использованию по умолчанию .

Заголовки AVIF Content-Type + Netlify

Проблема, которую мы заметили при использовании файлов .avif в Netlify, заключалась в том, что изображение не отображалось в Firefox. Он отлично работал для Chrome, но не для Firefox. Мы определили, что заголовки ответа возвращали Content-Type: application/octet-stream , из-за чего Firefox ничего не отображал. Мы исправили это, определив пользовательские заголовки в файле конфигурации Netlify ( netlify.toml ).

Мы также установили для параметра Content-Disposition значение встроенный, а не вложенный, таким образом браузер попытается отобразить файл внутри браузера, а не извне. Хорошим примером этого является то, что PDF-файл открывается в браузере, а не как загружаемый файл. Хотя по умолчанию должен использоваться встроенный режим, его указание не помешает, так как это новый тип файла.

Вы можете узнать больше о настройке пользовательских заголовков в Netlify, ознакомившись с их документацией.

Мы в восторге

Мы очень рады тому, какие потрясающие новые впечатления можно получить благодаря гибкости и повышению производительности этого нового формата.

Получайте последние советы и рекомендации по оптимизации веб-производительности прямо на свой почтовый ящик. Нечастые электронные письма. Мы никогда не продадим вашу информацию. Отказаться в любое время.

Эрисан Олашени

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

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

Что такое AVIF и как он работает?

AVIF – это извлечение ключевых кадров популярного в настоящее время видеоформата AV1, разработанного Alliance for Open Media (AOM).

Компания AOM разработала AVIF с целью предоставления бесплатных изображений с более высокой эффективностью сжатия и большей поддержкой функций по сравнению с существующими форматами изображений.

У AVIF теперь есть сторонники из крупных компаний, таких как Google, Netflix и Apple.

Почему AVIF лучше?

Как и его предшественники (WebP, JPEG-XR, JPEG2000 и PNG, GIF), формат AVIF совместим с изображениями с расширенным динамическим диапазоном. Он поддерживает 10- и 12-битный цвет при полном разрешении, в результате чего изображения до 10 раз меньше, чем в других известных форматах.

AVIF — хороший выбор для веб-разработчиков, потому что:

Это бесплатное приложение, поэтому вы можете использовать его бесплатно, не беспокоясь о лицензировании.
В настоящее время его поддерживают многие крупные технологические игроки, такие как Google, Amazon, Netflix, Microsoft и другие.
Он имеет наиболее оптимальное сжатие.
В нем реализованы более современные функции, такие как прозрачность, HDR, широкая цветовая гамма и т. д.

Как начать использовать изображения AVIF

Теперь мы переходим к самому интересному разделу этого руководства. Есть два основных способа начать использовать изображения AVIF:

Один – преобразование старых изображений в формат AVIF.
Другой — создание изображений AVIF с помощью графических редакторов, поддерживающих формат AVIF.

Как конвертировать ваши старые изображения в AVIF

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

Это можно сделать просто онлайн, так как существует множество онлайн-конвертеров изображений AVIF. Я выбрал онлайн-конвертер AVIF, потому что он проще и кажется самым быстрым из доступных онлайн-конвертеров.

Для преобразования изображений в формат AVIF выполните следующие действия:

Посетите веб-сайт.
Загрузите свои старые изображения (могут быть PNG, JPEG, **GIF ** и другие).
Подождите, пока веб-сайт обработает конверсию.
Сохраните новые файлы AVIF.

Как создавать изображения AVIF с помощью графических редакторов с поддержкой AVIF

В редакторы изображений добавлена поддержка создания изображений в формате AVIF. Эти редакторы теперь полностью поддерживают изображения AVIF:

Microsoft Paint: начиная с обновлений "19H1", вы теперь можете рисовать изображения в Microsoft Paint как "сохранить как" AVIF.
GIMP для Windows и Linux теперь поддерживает AVIF, начиная с обновления 2.10.22.
Разработчики Photoshop также говорят о поддержке AVIF. Надеюсь, это скоро будет поддерживаться.

Как использовать AVIF на своем веб-сайте

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

Лучший способ использовать AVIF – согласование содержимого. Мы будем использовать HTML 5

и который поддерживает согласование содержания.

Вы можете поиграть с живым примером здесь.

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

Первым браузером, полностью поддерживающим AVIF, является Chrome 85.
Microsoft Windows 10 также добавила поддержку в обновлениях "19H1".
Mozilla все еще работает над поддержкой формата изображения в Firefox[155].

Подведение итогов

AVIF – это революционный формат, который вскоре станет де-факто мировым форматом изображений. Из-за его потенциальных возможностей вполне вероятно, что вскоре он получит полную поддержку на всех платформах.

В отличие от изображения WebP от Google, на поддержку которого у Apple ушло целых 10 лет, AVIF быстро привлек внимание Apple, и теперь они вносят свой вклад в проект.

Готовы ли вы начать использовать AVIF на своих веб-сайтах?

Эрисан Олашени

Веб-разработчик и программист со страстью к писательству.

Если вы дочитали до этого места, отправьте твит автору, чтобы показать, что вам не все равно. Твитнуть спасибо

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.

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

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

Что такое AVIF?

Кодек AV1 — это популярный видеоформат с бесплатным программным обеспечением с открытым исходным кодом. AOMedia Video 1 (AV1) призван стать форматом видео для Интернета. Формат файла изображения AV1 (AVIF), разработанный Alliance for Open Media (AOM) для файлов изображений. AVIF — это спецификация формата файла изображения для хранения изображений или последовательностей изображений, сжатых с помощью AV1, в формате файла HEIF. AVIF — это новейший формат изображений, который позволяет уменьшить размер при сохранении качества без потерь. Кроме того, этот формат файла можно использовать без лицензионных отчислений, с лучшим сжатием и поддержкой большего количества функций, чем существующие форматы изображений. Еще одно важное преимущество перед другими форматами — поддержка HDR. Кроме того, многие известные компании, такие как Apple и Google, VideoLAN, Facebook или Netflix, поддерживают этот новый формат файлов. Apple потребовалось почти десятилетие, чтобы включить поддержку WebP в свой веб-браузер Safari. Похоже, что он будет принят намного быстрее, чем время принятия WebP.

Каковы преимущества AVIF?

По сравнению с такими форматами изображений, как WebP, JPEG, JPEG2000, PNG и GIF; AVIF совместим с изображениями с высоким динамическим диапазоном. Он поддерживает до 12 бит цвета при полном разрешении и обеспечивает изображения до 10 раз меньшего размера, чем другие известные форматы. AVIF предлагает анимированные, прозрачные изображения без потерь. Он также имеет поддержку HDR. Он имеет самое оптимальное сжатие, а также не требует авторских отчислений. Этот новый формат файлов в настоящее время поддерживается многими крупными технологическими компаниями, такими как Google, Amazon, Netflix, Microsoft и другими.

Сравнение API и других форматов изображений

JPEG вызывает широкий спектр визуальных нарушений при высокой контрастности. PNG может сжимать изображения без потерь и сжимать больше, чем JPEG. AVIF позволяет сжимать изображения с высоким качеством и минимальной возможной потерей содержимого. Изображения в формате AVIF примерно на 50% меньше, чем файлы изображений в формате JPEG, в основном эквивалентного качества. Таким образом, этот новый формат файла может сэкономить гораздо больше с почти незаметной потерей деталей.

JPEG – это формат изображений с открытым исходным кодом, написанный на языке C. PNG — это стандартный формат, не требующий лицензии. AVIF, с другой стороны, является полностью открытым исходным кодом, открытой лицензией и бесплатным форматом изображений.

JPEG и PNG поддерживаются повсеместно. PNG является форматом по умолчанию для изображений. С другой стороны, AVIF уже принят многими гигантами цифровых технологий, такими как Facebook, Google, Amazon, YouTube. Таким образом, кажется, что AVIF за короткое время меняет ситуацию со всеми этими функциями.

Ознакомьтесь с дополнительными статьями о программном обеспечении в нашем Центре обучения программному обеспечению или просмотрите наш блог Medianova, чтобы найти более полезные статьи.

Сравнение качества Сравнение скорости

Еще один важный аспект — скорость. Формат JPEG был написан до изобретения многоядерных процессоров. Таким образом, он предназначен для работы с последовательным процессом, где количество ядер не имеет значения; это тактовая частота. Сегодня разработка ЦП в основном ориентирована на многоядерность, поэтому JPEG не может извлечь выгоду из многоядерной обработки. AVIF может делать то, что делает его более подходящей формой сжатия изображений в будущем. Следует отметить, что формат изображения AVIF в настоящее время имеет медленное время кодирования. Это должно измениться со временем; AVIF все еще относительно новый, поэтому аппаратная поддержка все еще появляется. Ожидайте улучшения времени кодирования. Кроме того, изображение в формате AVIF не поддерживает прогрессивный рендеринг, поэтому файлы должны быть полностью загружены, прежде чем их можно будет отобразить.Часто это мало влияет на реальный опыт пользователя, поскольку файлы AVIF намного меньше соответствующих файлов JPEG или PNG, и поэтому их можно загружать и отображать гораздо быстрее. Для файлов большего размера влияние может быть значительным, и вам следует рассмотреть возможность использования формата, поддерживающего прогрессивный рендеринг.

Анимация

Как вы знаете, JPEG – это формат изображения. Это означает, что он обычно предназначен для показа неподвижных изображений. AVIF основан на реальном видеокодеке и обеспечивает возможности анимации. Это означает, что он может поддерживать анимацию и движения так, как не может JPEG.

Основные отличия для ботаников

Если говорить о различиях в дебатах между форматами JPEG и AVIF, есть несколько существенных различий. Например, вы обнаружите, что AVIF поддерживает такие функции, как:

Любое цветовое пространство, включая широкую цветовую гамму, ISO/IEC-CICP и ICC.
Поддержка NCLX: sRGB, линейный sRGB, линейный Rec2020 и т. д.
4:2:0, 4:2:2, 4:4:4
Глубина цвета 8, 10, 12 бит
Широкий динамический диапазон
Сжатие без потерь и сжатие с потерями
Отличное сжатие с потерями по сравнению с JPG.
Нет прогрессивных значений
Монохромный суп
Поддержка мозаики
Поддержка зернистости пленки
Поддерживает анимацию, которую JPEG не поддерживает
Предоставляет возможность использовать альфа-прозрачность.
Может использовать наложения — еще одна функция, которую JPEG не поддерживает.

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

Основные отличия для маркетологов

Проще говоря, у AVIF больше шансов получить поддержку в долгосрочной перспективе. Он также имеет более высокую степень эффективности сжатия и может работать с более широким набором функций, как описано выше. Как правило, основные различия между AVIF и JPEG можно разделить следующим образом, при этом AVIF обеспечивает:

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

В настоящее время многие по-прежнему считают использование JPEG идеальным способом продвижения вперед в краткосрочной перспективе. Поскольку все больше и больше изображений подпадают под упомянутые выше стандарты наложения, следует предположить, что JPEG покажет свой возраст в течение следующих 3-5 лет. Формат AVIF будет использоваться чаще, так как предлагает скорость загрузки, если не обработки, и качество изображения. Кроме того, с точки зрения количества вариантов изображения, и это не проблема: AVIF имеет более или менее все, чего не хватает JPEG, кроме широкого распространения на рынке. Со временем это изменится.

Заключение

Большинство кодеков изображений будут значительно лучше того, что мы использовали в JPEG до сих пор. Хотя улучшенный JPEG 2000 также предлагает существенные улучшения по сравнению со своим предшественником, он по-прежнему не может конкурировать с AVIF во многих отношениях. AVIF стал идеальным выбором для тех, кому необходимо управлять кодированием в условиях низкой пропускной способности. Таким образом, хотя у JPEG может быть преимущество прогрессивного рендеринга, было бы справедливо сказать, что AVIF имеет все функции, которых не хватает JPEG и в которых он действительно нуждается. Файл AVIF является превосходным форматом файла изображения по сравнению с JPEG / JPG. Однако на момент написания статьи аппаратная и программная поддержка все еще развивалась. Резервные варианты в коде могут позволить вам использовать AVIF вместе с такими форматами изображений, как JPEG, WebP, PNG и т. д. В отношении обоих типов изображений еще многое предстоит рассмотреть. На данный момент у AVIF больше шансов остаться доступным через десятилетие по сравнению с JPEG. Хотя JPEG может быть старым пионером кодеков изображений, он может в конечном итоге заменить его.

Читайте также: