Три формата охватывают почти каждую фотографию в сети сегодня. JPG был по умолчанию в течение трех десятилетий. WebP прибыл в 2010 году и теперь отображается каждым текущим браузером. AVIF является новейшим из трех, построен на видео кодек, и он обычно делает самые маленькие файлы. аудит производительности скажет вам & quot;serve изображения в современных форматах& quot; и тогда форма загрузки или почтовый клиент откажется от современного файла, который вы сделали.
Выбор между ними меньше о том, какой формат лучше всего и больше о том, куда идет изображение. Изображение героя на целевой странице, фотография продукта в списке торговой площадки и изображение, прикрепленное к электронному письму, имеют разные ответы. В этом руководстве сравниваются три атрибута, которые его решают: размер файла, качество, прозрачность, глубина цвета, анимация, стоимость кодирования и поддержка за пределами браузера. Затем он дает таблицу решений и показывает, как конвертировать между ними.
TL;DR: Для изображений на веб-сайте сначала подавайте AVIF с WebP в качестве запасного варианта и JPG в качестве последнего средства, используя
<picture>согласование элементов или серверов; AVIF обычно наименьший, WebP близко позади и быстрее кодировать, и JPG открывается везде. для изображений, которые покидают браузер (электронная почта, загрузки, печать, офисное программное обеспечение), использовать JPG, или PNG, когда прозрачность имеет значение. чтобы сделать файлы другие программы принимают, Конвертер AVIF в JPG а WebP-JPG запускают на стороне клиента, ничего не загружают, бесплатно, без регистрации; JPG в WebP и PNG в WebP идут другим путем.
Что такое AVIF, WebP и JPG?
Все три являются растровыми форматами изображений для фотографий, и они отличаются главным образом возрастом и дизайном их сжатия.
JPG (JPEG) - это метод неподвижного изображения, стандартизированный в Рекомендация МСЭ-Т Т.81 в 1992 г. он делит изображение на блоки 8x8 пикселей, преобразует каждый с дискретным косинусным преобразованием и отбрасывает высокочастотную деталь, которую меньше всего замечает глаз. файлы обычно заворачиваются в контейнер JFIF из МСЭ-Т Т.871, йо-
webp является ли формат Google's, теперь указанный в RFC 9649. В его режиме потерь используется кодирование ключевого кадра видеокодека VP8, и он имеет отдельный режим без потерь, а также прозрачность и анимацию. Руководство на что такое WebP и почему сохраненные изображения выходят как.webp покрывает его в глубину.
авиаф это формат файла изображения AV1, опубликованный Альянсом открытых медиа под названием Спецификация AVIF. Он хранит изображения, закодированные с помощью Видеокодек AV1 внутри контейнера HEIF, та же структура коробки фотографии HEIC iPhone используют. AV1 предлагается под лицензией без лицензионных платежей от Alliance for Open Media, что является одной из причин, по которой браузеры приняли AVIF быстрее, чем HEIC.
AVIF против WebP против JPG: сравнительная таблица
AVIF лидирует по сжатию и возможностям, JPG лидирует по совместимости и скорости кодирования, а WebP находится между ними почти в каждой строке.
| Атрибут | авиаф | webp | JPG |
|---|---|---|---|
| Спецификация | AOMedia AVIF, кодек AV1 | IETF RFC 9649 | МСЭ-Т Т.81 и Т.871 |
| Представлен | 2019 | 2010 | 1992 год |
| Сжатие | Потеря или без потерь | Потеря или без потерь | потеря |
| Типичный размер фотографии | Наименьший | Маленький | Самый большой из трех |
| Глубина бита | 8, 10 или 12 бит на канал | 8 бит на канал | На практике 8 бит на канал |
| HDR и широкий цвет | да | нет | нет |
| прозрачность | Полная альфа | Полная альфа | ни один |
| Анимация | Последовательности изображений | да | нет |
| Скорость кодирования | Медленный, процессорный при больших усилиях | Умеренный | торжественный |
| Отображение браузера | Chrome 85, Firefox 93, Safari 16, Edge 121 и более поздние версии | Все текущие браузеры | Универсальный |
| Настольные приложения, электронная почта, формы загрузки | Слабый | Лоскутный | Универсальный |
| Лучшее использование | Крупнейшие веб-изображения, в которых байты имеют наибольшее значение | Общие веб-изображения, широкий резерв | Все, что покидает браузер |
Ряд, который удивляет людей, это скорость кодирования. AVIF's маленькие файлы приходят от кодера, который усердно ищет лучший способ кодирования каждого блока, и этот поиск требует времени. шаг сборки, который преобразует тысячи изображений продукта в WebP за минуты, может занять гораздо больше времени для AVIF при высокой настройке усилия. Для сайта, который кодирует один раз и обслуживает миллионы раз, торговля обычно того стоит. для изображений, созданных на лету за запрос, это может быть не так.
Какой формат делает файлы самыми маленькими?
AVIF обычно делает самые маленькие файлы с одинаковым визуальным качеством, следующим идет WebP, а JPG - самый большой. Размер разрыва во многом зависит от изображения и настроек кодера.
Для WebP есть опубликованная точка отсчета: Google's Обзор WebP сообщает о потерях WebP файлов на 25-34% меньше, чем сопоставимый JPEG при эквивалентном качестве SSIM, и без потерь WebP на 26% меньше, чем PNG. AVIF обычно улучшает WebP снова для фотографий, с наибольшим приростом на плавных уклонах, небе и коже, где JPEG 's 8x8 блоков показывают первым.
Три предостережения сохраняют эти цифры честными.
- Номера качества не совпадают в разных форматах. JPG качества 80, WebP 80 и AVIF 80 - это не одно и то же визуальное качество, и разные кодировщики одного и того же формата тоже расходятся. Сравнивайте файлы, просматривая их, или по такой метрике, как SSIM, а не по значению ползунка.
- Изображения с низкой детализацией экономят меньше. Плоская иллюстрация или уже сильно сжатый JPEG мало что осталось сжать.
- Повторное кодирование файла с потерями приводит к потерям. Преобразование JPG в AVIF или WebP начинается с изображения, которое уже потеряло детали.Кодируйте из исходного файла камеры, PNG или высококачественного мастера, когда можете.
Насколько выбор формата имеет значение для веса страницы?
Это имеет наибольшее значение на страницах с большим количеством изображений, потому что изображения обычно являются наибольшей долей того, что загружает посетитель. арифметика проста. Страница каталога с 40 фотографиями продуктов на около 400 КБ каждая несет 16 МБ изображений как JPG. При сохранении от 25 до 34% отчетов Google для WebP, тот же набор приземляется где-то между 10,5 и 12 МБ. AVIF обычно обрезается дальше к этому.
На быстром настольном соединении разница скромная На телефоне в медленной мобильной сети несколько мегабайт - это разрыв между страницей, которая быстро оседает, и страницей, которую покидают посетители, а изображения в верхней части страницы передаются прямо в то, как быстро отображается самый большой видимый элемент.
Формат - не единственный рычаг, и часто не самый большой Отправка фотографии шириной 4000 пикселей в слот 400 пикселей тратит гораздо больше байтов, чем выбор WebP вместо AVIF. Сначала измените размер до отображаемого размера, предоставьте srcset варианты для разных экранов, ленивая загрузка изображений ниже складки, а затем выбор формата. выполнение этого в другом порядке оптимизирует неправильную вещь.
Чем они отличаются по качеству и артефактам?
Каждый формат по-своему терпит неудачу при использовании небольших размеров, и знание неудачи помогает вам выбирать.
JPG разбивается на видимые блоки размером 8x8 и & quot;ringing& quot;, слабая рябь вокруг острых краев, например текста на фотографии. WebP's режим потерь смягчает детали и, поскольку он сохраняет цвет с половинным разрешением, может оставлять цветные полосы вокруг тонких красных или синих линий. AVIF имеет тенденцию размывать тонкую текстуру, а не блокировать, поэтому сильно сжатый AVIF выглядит гладким и слегка восковым, что менее нежелательно на фотографиях и более заметно на ткани, волосах и листве.
Для графики с жесткими краями, плоским цветом и текстом ни один из режимов с потерями не является идеальным. PNG или WebP без потерь сохраняет точные края.
Поведение загрузки также отличается.T.81 определяет прогрессивный режим для JPEG, в котором размытая версия всего изображения появляется первой и обостряется по мере поступления большего количества данных, поэтому большой прогрессивный JPG быстро чувствует себя на медленном соединении еще до его завершения. WebP и AVIF, как обычно подают, рисуют только после того, как пришло достаточное количество файла, что обычно компенсирует их меньший размер. На очень больших изображениях героев поверх плохих соединений эта разница может быть видна, и это еще одна причина изменить размер перед выбором формата.
Где подходят PNG и GIF?
Ни один из них не является фотоформатом, и ни один из них не конкурирует напрямую с тремя вышеперечисленными. PNG, определенный в Спецификация W3C PNG, is lossless: правильный выбор для скриншотов, диаграмм, логотипов и мастеров редактирования, и неправильный для фотографий, который он хранит в несколько раз больше размера JPG. GIF ограничен 256 цветами на кадр и выживает в основном для коротких анимаций в местах, которые не будут играть ничего более нового.
На веб-сайте оба обычно лучше обслуживаются как WebP или AVIF: без потерь или с высоким качеством, потерянным для графики в стиле PNG, анимированный WebP для клипов в стиле GIF. вне браузера PNG остается безопасным форматом для чего-либо с прозрачностью, так как JPG не может его удерживать.
Какой формат поддерживает прозрачность, HDR и анимацию?
AVIF поддерживает все три, WebP поддерживает прозрачность и анимацию, но не HDR, а JPG не поддерживает ни один из них.
Прозрачность. AVIF хранит альфа в качестве вспомогательного изображения, а WebP имеет альфа-канал как в режиме с потерями, так и без потерь. Либо может удерживать вырез продукта с мягким краем на уровне PNG и #39;s. JPG не имеет прозрачности, поэтому любая прозрачная область должна быть заполнена сплошным цветом при преобразовании в нее.
HDR и широкий цвет. AVIF может использовать 10 или 12 бит на канал, что и необходимо HDR-фото с последних телефонов и камер, чтобы избежать полос в ярком небе. WebP и JPG - 8-битные.
Анимация. Анимация WebP широко используется в качестве замены GIF меньшего размера. AVIF определяет последовательности изображений, хотя поддержка анимированного AVIF в программном обеспечении за пределами браузеров тоньше.
Где каждый формат все еще терпит неудачу?
Поддержка внутри текущих браузеров решена для всех трех. Поддержка везде, где выбор кусается.
дисплеи AVIF в Chrome от версии 85, Firefox от 93, Safari от 16, и Edge от 121. старые браузеры, старые средства просмотра фотографий операционной системы, многие офисные пакеты, и длинный список форм загрузки не принимают его Сохранение AVIF с веб-страницы и опускание его в презентацию - классический провал.
ВебП идет дальше. каждый текущий браузер отображает его, и большинство современных операционных систем открывают его, но некоторые почтовые клиенты, службы печати и старое настольное программное обеспечение все еще отказываются от него.
JPG открывается практически на каждом устройстве, приложении и форме. Вот почему он остается подходящим форматом для любого изображения, пункт назначения которого вы не контролируете.
Какой формат следует использовать? Таблица решений
Сначала определитесь по месту назначения, затем по содержанию.
| положение | обычай | почему |
|---|---|---|
| Изображения героев и продуктов на вашем сайте | AVIF с резервными копиями WebP и JPG | Наименьший байт на самых тяжелых изображениях |
| Общие изображения сайта, простой конвейер | WebP с резервом JPG | Почти универсальная поддержка браузера, быстрое кодирование |
| Изображения, генерируемые по запросу | WebP или JPG | Стоимость кодирования AVIF добавляет задержку |
| Фотографии с HDR или широким цветом | авиаф | Только один из трех с 10 и 12 битами |
| Прозрачная графика в сети | АВИФ или ВебП | Альфа размером в доли PNG и #39;s |
| Вложения электронной почты | JPG | Каждый клиент открывает его |
| Загрузите формы, торговые площадки, идентификационные порталы | JPG | Списки разрешений редко включают AVIF или WebP |
| Печать и офисные документы | JPG или PNG для графики | Поддержка программного обеспечения |
| Редактирование мастеров и архивов | Оригинальный формат, PNG или TIFF | Избегайте повторного кодирования с потерями |
Шаблон прост: современные форматы для доставки, JPG для обмена, без потерь для мастеров.
Как обслуживать AVIF и WebP с запасным вариантом JPG?
использовать <picture> элемент. Браузер ходит <source> список по порядку и принимает первый тип, который он поддерживает, возвращаясь к <img>, как определено WHATWG HTML picture элемент,
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
Браузер с поддержкой AVIF загружает только AVIF. Один без AVIF, но с WebP загружает WebP, а все остальное получает JPG. Формат не загружается дважды.
Альтернативой являются переговоры на стороне сервера: браузер отправляет Accept заголовок, такой как image/avif,image/webp,*/*, и сервер или CDN возвращает лучший формат, который он имеет, из одного URL-адреса. Это делает разметку простой, но требует, чтобы кэш менялся в этом заголовке, как описано в правилах согласования контента HTTP и #39;s РФЦ 9110, йо-
Чтобы сгенерировать три версии на этапе сборки, библиотека Node.js sharp записывает все из них:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
Значения качества различаются специально, так как шкалы не соответствуют по форматам, Проверьте вывод визуально, прежде чем остановиться на цифрах.
Как конвертировать AVIF, WebP и JPG без загрузки?
Используйте конвертер на стороне клиента, который декодирует и повторно кодирует изображение внутри вкладки браузера, чтобы файл никогда не покидал ваше устройство. конвертеры Toolz разделены по направлениям.
От AVIF до чего-то, что принимают другие программы. выше Конвертер AVIF в JPG является исправлением для AVIF, сохраненного с веб-сайта, от которого отказывается документ или форма Прозрачные области заполнены белым, и примечание под результатом говорит так. ползунок качества работает от 10 до 100 и начинается с 90. когда изображение имеет прозрачный фон, который должен выжить, конвертировать AVIF в PNG вместо этого он сохраняет альфа-канал и сохраняет декодированные пиксели без потерь.
Декодирование AVIF использует браузер's собственный декодер AVIF, поэтому конвертеру нужен браузер, который отображает AVIF: Chrome, Edge, Firefox или Safari 16 и более поздние версии. если браузер не может открыть файл, строка говорит об этом. анимированный AVIF читается как неподвижное изображение.
От WebP до JPG. По тем же причинам, WebP в JPG превращает загруженный .webp в файл, который открывается повсюду, с той же белой заливкой для прозрачности.
От JPG и PNG до WebP. Идя в другую сторону, JPG в WebP уменьшает фотографии для публикации, и PNG в WebP делает то же самое для скриншотов и прозрачной графики, сохраняя при этом альфа-канал.Кодировка использует браузер и #39;s холст-кодер Текущий Chrome, Edge и Firefox могут писать WebP; браузер, который не может получить явную ошибку вместо PNG переименованного в .webp.
Чего не делают преобразователи. Toolz читает AVIF, но не записывает его, поскольку браузеры не предоставляют надежное представление кодера AVIF веб-страницам. Для создания файлов AVIF используйте инструмент сборки, такой как резкий пример выше.The Преобразователь изображений принимает JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG и PDF и пишет JPG, PNG, WebP, GIF, ICO, PDF и SVG, которые охватывают смешанные партии.
Каждое преобразование осуществляется через холст, поэтому данные EXIF, координаты GPS и цветовые профили не копируются в выходные данные. Изображения более 100 мегапикселей отказываются с сообщением, а не сбой вкладки. инструменты бесплатны, без регистрации, с ежедневным пределом преобразования.
Потеряет ли качество конвертация между AVIF, WebP и JPG?
Преобразование в формат с потерями каждый раз теряет некоторые детали, а преобразование в формат без потерь больше ничего не теряет. направление решает, какое применимо.
| переделка | Потерянный шаг? | Что меняется |
|---|---|---|
| AVIF в JPG | да | Второй код с потерями; прозрачность заполнена белым; файл обычно больше |
| AVIF в PNG | нет | Декодированные пиксели сохранены точно; прозрачность сохранена; файл намного больше |
| WebP в JPG | да | Второй код потерь; прозрачность, наполненная белым |
| JPG в WebP | да | Второй код с потерями поверх JPEG's; файл обычно меньше |
| PNG в WebP | Обычно, с потерями WebP | Прозрачность сохраняется; файл обычно намного меньше |
| Любой из них в AVIF | Да, в обычном использовании | Самый маленький файл; самый медленный кодирование |
Далее следуют два практических последствия. файл, который прошел через несколько преобразований с потерями, немного ухудшается на каждом шаге, поэтому избегайте обратных поездок, таких как JPG в WebP в JPG. И размер преобразованного файла мало что говорит вам о его качестве: AVIF, преобразованный в JPG, становится больше, не становясь лучше, потому что кодер JPG тратит больше байтов, описывая то же самое уже сжатое изображение.
При настройке качества около 90, один дополнительный шаг потери очень трудно увидеть в обычных фотографиях. потери становятся видимыми с повторными преобразованиями, низким качеством настройки, или изображения с тонким текстом и острыми краями.
Почему win't saved AVIF или WebP открыты?
Открывающая программу не имеет декодера для формата Текущий браузер показывает изображение, потому что он согласовал этот формат с сервером, но файл на диске затем передается программному обеспечению со старым или более узким списком форматов: офисный пакет, старый просмотрщик фотографий, почтовый клиент или форма загрузки's разрешенный список.
Переименование файла в .jpg не помогает. байты по-прежнему начинаются с AVIF ftyp коробка или WebP RIFF заголовок, и программа, ожидающая JPEG не находит данные JPEG Преобразование файла является исправлением, а также стоит проверить, предлагает ли сайт прямую ссылку для загрузки, которая иногда обслуживает исходный JPG или PNG, а не согласованную версию.
JPG устарел?
Нет. JPG устарел только потому, что формат, который веб-сайт должен отправлять в текущий браузер, и даже там он остается запасным в каждом <picture> элемент. В качестве формата обмена для электронной почты, форм, печати, офисных документов и всего, что связано с программным обеспечением, которое вы не контролируете, это по-прежнему правильный формат по умолчанию, и ни AVIF, ни WebP его не заменили.
Та же логика применима и к другому формату, который сбивает с толку людей за пределами браузера. Фотографии iPhone - это HEIC, брат AVIF в том же контейнере HEIF, и сравнение HEIC против JPG объясняет, почему эти файлы не открываются в Windows. Каждый конвертер изображений указан в списке хаб инструментов изображений, йо-
