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

Распространенные типы файлов изображений Ниже перечислены форматы файлов изображений, наиболее часто используемые в Интернете.

Сокращение Формат файла MIME-тип Расширения файлов Краткое содержание APNG Анимированная портативная сетевая графика image/apng .apng Хороший выбор для анимационных последовательностей без потерь (GIF менее эффективен). AVIF и WebP имеют лучшую производительность, но менее широкую поддержку браузеров. Поддерживается : Chrome, Edge, Firefox, Opera, Safari. АВИФ Формат файла изображения AV1 image/avif .avif Хороший выбор как для изображений, так и для анимированных изображений благодаря высокой производительности и бесплатному формату изображения. Он предлагает гораздо лучшее сжатие, чем PNG или JPEG, с поддержкой более высокой глубины цвета, анимированных кадров, прозрачности и т. д. Обратите внимание, что при использовании AVIF вы должны включать резервные форматы с лучшей поддержкой браузера (т. е. с использованием элемента) <picture>. Поддерживается: Chrome, Firefox (только неподвижные изображения: анимированные изображения не реализованы), Opera, Safari.

гифка Формат обмена графикой image/gif .gif Хороший выбор для простых изображений и анимации. Предпочитайте PNG для индексированных неподвижных изображений без потерь и рассмотрите WebP, AVIF или APNG для последовательностей анимации. Поддерживается: Chrome, Edge, Firefox, IE, Opera, Safari. JPEG Изображение Объединенной экспертной группы по фотографии image/jpeg .jpg, .jpeg, .jfif, .pjpeg,.pjp Хороший выбор для сжатия неподвижных изображений с потерями (на данный момент самый популярный). Если требуется более точное воспроизведение изображения, отдавайте предпочтение формату PNG или WebP/AVIF, если требуется как лучшее воспроизведение, так и более высокое сжатие. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari.

PNG Портативная сетевая графика image/png .png PNG предпочтительнее JPEG для более точного воспроизведения исходных изображений или когда требуется прозрачность. WebP/AVIF обеспечивают еще лучшее сжатие и воспроизведение, но поддержка браузеров более ограничена. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari.

SVG Масштабируемая векторная графика image/svg+xml .svg Формат векторного изображения; идеально подходит для элементов пользовательского интерфейса, значков, диаграмм и т. д., которые должны быть точно нарисованы в разных размерах. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari. WebP Формат веб-изображения image/webp .webp Отличный выбор как для изображений, так и для анимированных изображений. WebP предлагает гораздо лучшее сжатие, чем PNG или JPEG, с поддержкой более высокой глубины цвета, анимированных кадров, прозрачности и т. д. AVIF предлагает немного лучшее сжатие, но не так хорошо поддерживается в браузерах и не поддерживает прогрессивный рендеринг. Поддержка: Chrome, Edge, Firefox, Opera, Safari Примечание. Старые форматы, такие как PNG, JPEG, GIF, имеют низкую производительность по сравнению с более новыми форматами, такими как WebP и AVIF, но имеют более широкую «историческую» поддержку браузеров. Новые форматы изображений становятся все более популярными, поскольку браузеры без поддержки становятся все более неактуальными (то есть имеют практически нулевую долю рынка).

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

Сокращение Формат файла MIME-тип Расширения файлов Поддерживаемые браузеры БМП Растровый файл image/bmp .bmp Chrome, Edge, Firefox, IE, Опера, Сафари ICO Значок Майкрософт image/x-icon .ico,.cur Chrome, Edge, Firefox, IE, Опера, Сафари ТИФФ Формат файла изображения с тегами image/tiff .tif,.tiff Сафари Примечание. Аббревиатура для каждого формата изображения связана с более подробным описанием формата, его возможностей и подробной информацией о совместимости браузера (включая информацию о поддерживаемых версиях и специальных функциях, которые могли быть представлены позже).

Примечание. В Safari 11.1 добавлена ​​возможность использовать формат видео в качестве замены анимированного gif. Никакой другой браузер не поддерживает это. Для получения дополнительной информации см. ошибку Chromium и ошибку Firefox .

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

В приведенных ниже таблицах термин « биты на компонент» относится к количеству битов, используемых для представления каждого компонента цвета. Например, глубина цвета RGB, равная 8, означает, что каждый из компонентов красного, зеленого и синего представлен 8-битным значением. Битовая глубина , с другой стороны, — это общее количество битов, используемых для представления каждого пикселя в памяти.

APNG (Анимированная портативная сетевая графика) APNG — это формат файла, впервые представленный Mozilla, который расширяет стандарт PNG , добавляя поддержку анимированных изображений. Концептуально похожий на анимированный формат GIF, который использовался в течение десятилетий, APNG более эффективен, поскольку поддерживает различную глубину цвета , тогда как анимированный GIF поддерживает только 8-битный индексированный цвет .

APNG идеально подходит для базовых анимаций, которые не нужно синхронизировать с другими действиями или со звуковой дорожкой, например, с индикаторами выполнения, индикаторами действий и другими анимированными последовательностями. Например, APNG — это один из форматов, поддерживаемых при создании анимированных наклеек для приложения Apple iMessage (и приложения Messages на iOS). Они также обычно используются для анимированных частей пользовательского интерфейса веб-браузеров.

MIME-тип image/apng Расширения файлов .apng Спецификация wiki.mozilla.org/APNG_Specification Совместимость с браузером Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8 Максимальные размеры 2 147 483 647 × 2 147 483 647 пикселей Поддерживаемые цветовые режимы Цветовой режим Битов на компонент ( D ) Описание Оттенки серого 1, 2, 4, 8 и 16 Каждый пиксель состоит из одного D -битного значения, указывающего яркость пикселя в оттенках серого. Истинный цвет 8 и 16 Каждый пиксель представлен тремя D -битными значениями, указывающими уровень красного, зеленого и синего компонентов цвета. Индексированный цвет 1, 2, 4 и 8 Каждый пиксель представляет собой D -битное значение, указывающее индекс в цветовой палитре, которая содержится в PLTEфрагменте файла APNG; все цвета в палитре имеют 8-битную глубину. Оттенки серого с альфой 8 и 16 Каждый пиксель представлен двумя значениями D -бита: интенсивностью пикселя в оттенках серого и альфа-выборкой, указывающей, насколько непрозрачен пиксель. Истинный цвет с альфой 8 и 16 Каждый пиксель состоит из четырех цветовых компонентов D -пикселя: красного, зеленого, синего и альфа-образца, указывающего, насколько пиксель непрозрачен. Сжатие Без потерь Лицензирование Бесплатно и открыто под лицензией Creative Commons Attribution-ShareAlike ( CC-BY-SA ) версии 3.0 или более поздней. AVIF-изображение Формат файла изображения AV1 (AVIF) — это мощный бесплатный формат файла с открытым исходным кодом, который кодирует битовые потоки AV1 в контейнере High Efficiency Image File Format (HEIF).

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

AV1 — это формат кодирования, изначально разработанный для передачи видео через Интернет. Этот формат выигрывает от значительных достижений в области кодирования видео в последние годы и может потенциально выиграть от соответствующей поддержки аппаратного рендеринга. Однако в некоторых случаях он также имеет недостатки, поскольку к кодированию видео и изображений предъявляются разные требования.

Формат предлагает:

Отличное сжатие с потерями по сравнению с JPG и PNG для визуально схожих уровней сжатия (например, изображения AVIF с потерями примерно на 50% меньше, чем изображения JPEG). Как правило, AVIF обеспечивает лучшее сжатие, чем WebP — среднее сжатие 50% против 30% для того же набора JPG (источник: Сравнение AVIF WebP (блог CTRL)). Сжатие без потерь. Анимация/хранение нескольких изображений (аналогично анимированным GIF, но с гораздо лучшим сжатием) Поддержка альфа-канала (т.е. для прозрачности). Расширенный динамический диапазон (HDR): поддержка хранения изображений, которые могут отображать больший контраст между самыми светлыми и самыми темными частями изображения. Широкая цветовая гамма: поддержка изображений, которые могут содержать более широкий диапазон цветов. AVIF не поддерживает прогрессивный рендеринг, поэтому файлы должны быть полностью загружены, прежде чем их можно будет отобразить. Это часто мало влияет на реальный опыт пользователя, потому что файлы AVIF намного меньше, чем эквивалентные файлы JPEG или PNG, и, следовательно, их можно загружать и отображать намного быстрее. Для файлов большего размера влияние может стать значительным, и вам следует рассмотреть возможность использования формата, поддерживающего прогрессивный рендеринг.

AVIF поддерживается в Chrome, Opera, Safari и Firefox (Firefox поддерживает неподвижные изображения, но не анимацию), но не поддерживается в Edge или IE. Поскольку поддержка еще не является всеобъемлющей ( и имеет небольшую историческую глубину), вам следует предоставить запасной вариант в формате WebP , JPEG или PNG , используя элемент<picture> (или какой-либо другой подход).

MIME-тип image/avif Расширения файлов .avif Спецификация Формат файла изображения AV1 (AVIF)

Совместимость с браузером Chrome 85, Opera 71, Firefox 93 и Safari 16.1. Firefox 93 поддерживает неподвижные изображения с поддержкой цветового пространства как для полного, так и для ограниченного цветового диапазона, преобразования изображений для зеркального отображения и поворота. Параметр image.avif.compliance_strictness можно использовать для настройки строгости соответствия спецификации. Анимированные изображения не поддерживаются. Для Firefox 77–92 требуется image.avif.enableнабор настроек true. Более ранние версии обеспечивают только базовую поддержку. Максимальные размеры 2 147 483 647 × 2 147 483 647 пикселей Поддерживаемые цветовые режимы Информация о поддержке цветового режима представлена ​​в Спецификации битового потока и процесса декодирования AV1 , раздел 6.4.2: Семантика конфигурации цвета.

Неисчерпывающее резюме таково:

Цветовые режимы: YUV444, YUV422, YUV420 Поддержка оттенков серого: YUV400 Биты: 8/10/12 бит Альфа-поддержка Поддержка профиля ICC Поддержка NCLX: sRGB, линейный sRGB, линейный Rec2020, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3 и т. д. Поддержка тайлинга Сжатие С потерями и без потерь. Лицензирование Безвозмездная. Информация о лицензировании доступна по адресу http://aomedia.org/license/. BMP (растровый файл) Тип файла BMP ( растровое изображение ) наиболее распространен на компьютерах с Windows и обычно используется только в особых случаях в веб-приложениях и содержимом.

Предупреждение. Как правило, вам следует избегать использования файлов BMP для содержимого веб-сайта. Наиболее распространенная форма файла BMP представляет данные в виде несжатого растрового изображения, что приводит к большим размерам файлов по сравнению с типами изображений PNG или jpg. Существуют более эффективные форматы BMP, но они широко не используются и редко поддерживаются веб-браузерами.

Теоретически BMP поддерживает множество внутренних представлений данных. Самая простая и наиболее часто используемая форма файла BMP представляет собой несжатое растровое изображение, в котором каждый пиксель занимает 3 байта, представляющих его красный, зеленый и синий компоненты, а каждая строка дополняется байтами до ширины, кратной 4 байтам 0x00.

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

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

MIME-тип image/bmp Расширения файлов .bmp Спецификация Нет спецификации; однако Microsoft предоставляет общую документацию по формату на docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage . Совместимость с браузером Все версии Chrome, Edge, Firefox, Internet Explorer, Opera и Safari. Максимальные размеры Либо 32 767 × 32 767, либо 2 147 483 647 × 2 147 483 647 пикселей, в зависимости от версии формата Поддерживаемые цветовые режимы Цветовой режим Битов на компонент ( D ) Описание Оттенки серого 1 Каждый бит представляет один пиксель, который может быть черным или белым. Истинный цвет 8 и 16 Каждый пиксель представлен тремя значениями, представляющими компоненты красного, зеленого и синего цветов; каждый - D бит. Индексированный цвет 2, 4 и 8 Каждый пиксель представлен значением из 2, 4 или 8 бит, которое служит индексом в таблице цветов. Оттенки серого с альфой н/д BMP не имеет четкого формата оттенков серого. Истинный цвет с альфой 8 и 16 Каждый пиксель представлен четырьмя значениями, представляющими красный, зеленый, синий и альфа-компоненты цвета; каждый - D бит. Сжатие Поддерживается несколько методов сжатия, включая алгоритмы с потерями или без потерь. Лицензирование Покрывается Microsoft Open Specification Promise ; Хотя Microsoft владеет патентами на BMP, они опубликовали обещание не отстаивать свои патентные права до тех пор, пока выполняются определенные условия. Однако это не то же самое, что лицензия. BMP включен в формат метафайлов Windows ( .wmf). GIF (формат обмена графикой) В 1987 году поставщик онлайн-услуг CompuServe представил формат файлов изображений GIF ( формат обмена графикой ), чтобы обеспечить формат сжатой графики, который могли бы использовать все участники их службы. GIF использует алгоритм Лемпеля-Зива-Велча (LZW) для сжатия 8-битной индексированной цветной графики без потерь. GIF был одним из первых двух графических форматов, поддерживаемых HTML , наряду с XBM .

Каждый пиксель в GIF представлен одним 8-битным значением, служащим индексом в палитре 24-битных цветов (по 8 бит красного, зеленого и синего). Длина таблицы цветов всегда равна степени 2 (т. е. каждая палитра имеет 2, 4, 8, 16, 32, 64 или 256 записей). Для имитации более 255 или 256 цветов обычно используется сглаживание . Технически возможно объединить несколько блоков изображения, каждый со своей цветовой палитрой, для создания полноцветных изображений, но на практике это делается редко.

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

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

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

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

GIF — хороший выбор для простых изображений и анимации, хотя преобразование полноцветных изображений в GIF может привести к неудовлетворительному дизерингу. Как правило, современный контент должен использовать PNG для неподвижных изображений без потерь и индексированных неподвижных изображений, и следует рассмотреть возможность использования APNG для анимационных последовательностей без потерь.

MIME-тип image/gif Расширения файлов .gif Спецификация Спецификация GIF87a Спецификация GIF89a Совместимость с браузером Все версии Chrome, Edge, Firefox, Internet Explorer, Opera и Safari. Максимальные размеры 65 536 × 65 536 пикселей Поддерживаемые цветовые режимы Цветовой режим Битов на компонент ( D ) Описание Оттенки серого н/д GIF не включает специальный формат оттенков серого. Истинный цвет н/д GIF не поддерживает пиксели истинного цвета. Индексированный цвет 8 Каждый цвет в палитре GIF определяется как 8 бит красного, зеленого и синего (всего 24 бита на пиксель). Оттенки серого с альфой н/д GIF не предоставляет специальный формат оттенков серого. Истинный цвет с альфой н/д GIF не поддерживает пиксели истинного цвета. Сжатие Без потерь (LZW) Лицензирование Хотя сам формат GIF является открытым, алгоритм сжатия LZW был запатентован до начала 2000-х годов. По состоянию на 7 июля 2004 г. срок действия всех соответствующих патентов истек, и формат GIF можно использовать свободно. ICO (значок Microsoft Windows) Формат файла ICO (значок Microsoft Windows) был разработан Microsoft для значков на рабочем столе систем Windows. Однако в ранних версиях Internet Explorer веб-сайт имел возможность предоставлять файл ICO, имя которого находится favicon.icoв корневом каталоге веб-сайта, для указания значка — значка, который будет отображаться в меню «Избранное» и в других местах, где может отображаться графическое представление сайта. быть полезным.

Файл ICO может содержать несколько значков и начинается с каталога со списком сведений о каждом из них. После каталога идут данные для иконок. Данные каждого значка могут быть либо изображением BMP без заголовка файла, либо полным изображением PNG (включая заголовок файла). Если вы используете файлы ICO, вам следует использовать формат BMP, так как поддержка PNG внутри файлов ICO не была добавлена ​​до Windows Vista и может не поддерживаться должным образом.

Предупреждение: файлы ICO не должны использоваться в веб-контенте. Кроме того, их использование для фавиконов сократилось в пользу использования файла PNG и элемента <link>, как описано в разделе Предоставление значков для различных контекстов использования .

MIME-тип image/vnd.microsoft.icon(официальный), image/x-icon(используется Microsoft) Расширения файлов .ico Спецификация Совместимость с браузером Все версии Chrome, Edge, Firefox, Internet Explorer, Opera и Safari. Максимальные размеры 256×256 пикселей Поддерживаемые цветовые режимы Иконки в формате BMP Цветовой режим Битов на компонент ( D ) Описание Оттенки серого 1 Каждый бит представляет один пиксель, который может быть черным или белым. Истинный цвет 8 и 16 Каждый пиксель представлен тремя значениями, представляющими компоненты красного, зеленого и синего цветов; каждый - D бит. Индексированный цвет 2, 4 и 8 Каждый пиксель представлен значением из 2, 4 или 8 бит, которое служит индексом в таблице цветов. Оттенки серого с альфой н/д BMP не имеет четкого формата оттенков серого. Истинный цвет с альфой 8 и 16 Каждый пиксель представлен четырьмя значениями, представляющими красный, зеленый, синий и альфа-компоненты цвета; каждый - D бит. Иконки в формате PNG Цветовой режим Битов на компонент ( D ) Описание Оттенки серого 1, 2, 4, 8 и 16 Каждый пиксель состоит из одного D -битного значения, указывающего яркость пикселя в оттенках серого. Истинный цвет 8 и 16 Каждый пиксель представлен тремя D -битными значениями, указывающими уровень красного, зеленого и синего компонентов цвета. Индексированный цвет 1, 2, 4 и 8 Каждый пиксель представляет собой D -битное значение, указывающее индекс в цветовой палитре, которая содержится в PLTE фрагменте файла APNG; все цвета в палитре имеют 8-битную глубину. Оттенки серого с альфой 8 и 16 Каждый пиксель представлен двумя значениями D -бита: интенсивностью пикселя в оттенках серого и альфа-выборкой, указывающей, насколько непрозрачен пиксель. Истинный цвет с альфой 8 и 16 Каждый пиксель состоит из четырех цветовых компонентов D -пикселя: красного, зеленого, синего и альфа-образца, указывающего, насколько пиксель непрозрачен. Сжатие Значки формата BMP почти всегда используют сжатие без потерь, но доступны методы с потерями. Значки PNG всегда сжимаются без потерь. Лицензирование — JPEG (изображение Объединенной группы экспертов по фотографии) Формат изображений JPEG (обычно произносится как « jay-peg ») в настоящее время является наиболее широко используемым форматом сжатия с потерями для неподвижных изображений . Это особенно полезно для фотографий; применение сжатия с потерями к контенту, требующему четкости, например диаграммам или диаграммам, может привести к неудовлетворительным результатам.

JPEG на самом деле является форматом данных для сжатых фотографий, а не типом файла. Спецификация JFIF ( формат обмена файлами J PEG ) описывает формат файлов, которые мы называем изображениями «JPEG » .

MIME-тип image/jpeg Расширения файлов .jpg, .jpeg, .jpe, .jif,.jfif Спецификация jpeg.org/jpeg/ Совместимость с браузером Все версии Chrome, Edge, Firefox, Internet Explorer, Opera и Safari. Максимальные размеры 65 535 × 65 535 пикселей Поддерживаемые цветовые режимы Цветовой режим Битов на компонент ( D ) Описание Оттенки серого н/д Истинные оттенки серого могут поддерживаться с использованием одного канала яркости (Y). Истинный цвет 8 Каждый пиксель описывается красным, синим и зеленым компонентами цвета, каждый из которых имеет длину 8 бит. Индексированный цвет н/д JPEG не поддерживает индексированный цветовой режим. Оттенки серого с альфой н/д JPEG не поддерживает альфа-канал. Истинный цвет с альфой н/д JPEG не поддерживает альфа-канал. Сжатие с потерями; на основе дискретного косинусного преобразования Лицензирование По состоянию на 27 октября 2006 г. срок действия всех патентов США истек. PNG (переносимая сетевая графика) Формат изображения PNG (произносится как « пинг ») использует сжатие без потерь, поддерживает более высокую глубину цвета, чем GIF , и является более эффективным, а также поддерживает полную альфа-прозрачность.

PNG широко поддерживается, и все основные браузеры предлагают полную поддержку его функций. Internet Explorer, который представил поддержку PNG в версиях 4–5, не поддерживал ее полностью до IE 9 и имел много печально известных ошибок на протяжении многих прошедших лет, в том числе в когда-то вездесущем Internet Explorer 6. Это замедлило внедрение PNG, но сейчас он широко используется, особенно когда требуется точное воспроизведение исходного изображения.

MIME-тип image/png Расширения файлов .png Спецификация w3.org/TR/PNG Совместимость с браузером Особенность Хром Край Fire Fox Интернет-проводник Опера Сафари Базовая поддержка 1 12 1 5 3.5.1 (Престо) 15 (Мигает) 1 Альфа-канал 1 12 1 5 6 (Престо) Все (Мигает) 1 Гамма-коррекция нет да 1 8 1 сломанный Коррекция цвета нет да 3 9 нет нет Переплетение нет ? 1 сломанный 3.5.1 нет Максимальные размеры 2 147 483 647 × 2 147 483 647 пикселей Поддерживаемые цветовые режимы Цветовой режим Битов на компонент ( D ) Описание Оттенки серого 1, 2, 4, 8 и 16 Каждый пиксель состоит из одного D -битного значения, указывающего яркость пикселя в оттенках серого. Истинный цвет 8 и 16 Каждый пиксель представлен тремя D -битными значениями, указывающими уровень красного, зеленого и синего компонентов цвета. Индексированный цвет 1, 2, 4 и 8 Каждый пиксель представляет собой D -битное значение, указывающее индекс в цветовой палитре, которая содержится в PLTE фрагменте файла APNG; все цвета в палитре имеют 8-битную глубину. Оттенки серого с альфой 8 и 16 Каждый пиксель представлен двумя значениями D -бита: интенсивностью пикселя в оттенках серого и альфа-выборкой, указывающей, насколько непрозрачен пиксель. Истинный цвет с альфой 8 и 16 Каждый пиксель состоит из четырех цветовых компонентов D -пикселя: красного, зеленого, синего и альфа-образца, указывающего, насколько пиксель непрозрачен. Сжатие Без потерь, опционально индексированный цвет, например GIF. Лицензирование © 2003 W3C ( MIT , ERCIM , Keio ), все права защищены. Применяются правила ответственности W3C , товарного знака , использования документов и лицензирования программного обеспечения . Никаких известных патентов, приносящих роялти. SVG (масштабируемая векторная графика) SVG — это формат векторной графики на основе XML , который определяет содержимое изображения как набор команд рисования, которые создают формы, линии, применяют цвета, фильтры и т. д. Файлы SVG идеально подходят для диаграмм, значков и других изображений, которые можно точно нарисовать в любом размере. Таким образом, SVG популярен для элементов пользовательского интерфейса в современном веб-дизайне.

Файлы SVG — это текстовые файлы, содержащие исходный код, который при интерпретации рисует желаемое изображение. Например, в этом примере определяется область рисования с начальным размером 100 на 100 единиц, содержащая линию, проведенную по диагонали через поле:

HTML Скопировать в буфер обмена

<svg viewBox=«0 0 100 100» xmlns=«http://www.w3.org/2000/svg»>

<line x1="0" y1="80" x2="100" y2="20" stroke="black" />

</svg> SVG можно использовать в веб-контенте двумя способами:

Вы можете напрямую написать <svg>элемент в HTML, содержащий элементы SVG, для рисования изображения. Вы можете отображать изображение SVG везде, где можно использовать любые другие типы изображений, в том числе с элементами <img>и <picture>, background-imageсвойством CSS и т. д. SVG — идеальный выбор для изображений, которые могут быть представлены с помощью ряда команд рисования, особенно если размер, в котором будет отображаться изображение, неизвестен или может варьироваться, поскольку SVG плавно масштабируется до нужного размера. Как правило, это не очень удобно для чисто растровых или фотографических изображений, хотя растровые изображения можно включать в SVG.

MIME-тип image/svg+xml Расширения файлов .svg Спецификация w3.org/TR/SVG2 Совместимость с браузером Особенность Хром Край Fire Fox Интернет-проводник Опера Сафари Поддержка SVG 4 12 3 9 10 (Престо) 15 (Мигание) 3.2 SVG как изображение ( <img>и т. д.) 28 12 4 9 10 (Престо) 15 (Мигание) 9 Максимальные размеры Безлимитный Поддерживаемые цветовые режимы Цвета в SVG задаются с помощью синтаксиса цветов CSS . Сжатие Исходный файл SVG может быть сжат во время передачи с использованием методов сжатия HTTP или на диске в виде .svgzфайла. Лицензирование ©2018 W3C ( MIT , ERCIM , Keio , Beihang ), все права защищены. Применяются правила ответственности W3C , товарного знака , использования документов и лицензирования программного обеспечения . Никаких известных патентов, приносящих роялти. TIFF (формат файла изображения с тегами) TIFF — это формат файлов растровой графики, созданный для хранения отсканированных фотографий, хотя это может быть изображение любого типа. Это несколько «тяжелый» формат, поскольку файлы TIFF имеют тенденцию быть больше, чем изображения в других форматах. Это связано с часто включаемыми метаданными, а также с тем фактом, что большинство изображений TIFF либо несжаты, либо используют алгоритмы сжатия, которые по-прежнему оставляют довольно большие файлы после сжатия.

TIFF поддерживает различные методы сжатия, но наиболее часто используемыми являются системы сжатия CCITT Group 4 (и, для более старых факсимильных систем, Group 3), используемые программным обеспечением для факсов, а также LZW и сжатие JPEG с потерями.

Каждое значение в файле TIFF указывается с помощью его тега (указывающего, какого рода информация это, например, ширина изображения) и его типа (указывающего формат, в котором хранятся данные), за которым следует длина массива данных. значения, которые нужно присвоить этому тегу (все свойства хранятся в массивах, даже для одиночных значений). Это позволяет использовать разные типы данных для одних и тех же свойств. Например, ширина изображения ImageWidthхранится с помощью тега 0x0100и представляет собой массив с одной записью. При указании типа 3 ( SHORT) значение ImageWidthсохраняется как 16-битное значение:

Ярлык Тип Размер Ценить 0x0100( ImageWidth) 0x0003( SHORT) 0x00000001(1 запись) 0x0280(640 пикселей) При указании типа 4 ( LONG) ширина сохраняется как 32-битное значение:

Ярлык Тип Размер Ценить 0x0100( ImageWidth) 0x0004( LONG) 0x00000001(1 запись) 0x00000280(640 пикселей) Один файл TIFF может содержать несколько изображений; это может использоваться, например, для представления многостраничных документов (таких как многостраничный отсканированный документ или полученный факс). Однако программное обеспечение для чтения файлов TIFF требуется только для поддержки первого изображения.

TIFF поддерживает множество цветовых пространств, а не только RGB. К ним относятся CMYK, YCbCr и другие, что делает TIFF хорошим выбором для хранения изображений, предназначенных для печати, кино или телевидения.

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

MIME-тип image/tiff Расширения файлов .tif,.tiff Спецификация https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#50577413_pgfId-1035272 Совместимость с браузером Ни один браузер не поддерживает TIFF; его значение — это формат загрузки Максимальные размеры 4 294 967 295 × 4 294 967 295 пикселей (теоретическое) Поддерживаемые цветовые режимы Цветовой режим Битов на компонент ( D ) Описание двухуровневый 1 Двухуровневый TIFF хранит 8 бит в каждом байте, по одному биту на пиксель. Поле PhotometricInterpretationопределяет, какие из 0 и 1 черные, а какие белые. Оттенки серого 4 и 8 Каждый пиксель состоит из одного D -битного значения, указывающего яркость пикселя в оттенках серого. Истинный цвет 8 Все изображения RGB с истинным цветом хранятся с использованием 8 бит красного, зеленого и синего цветов. Индексированный цвет 4 и 8 Каждый пиксель представляет собой индекс ColorMapзаписи, определяющий цвета, используемые в изображении. На карте цветов перечислены все красные значения, затем все зеленые значения, а затем все синие значения (а не rgb, rgb, rgb…). Оттенки серого с альфой 4 и 8 Информация об альфе добавляется путем указания того, что в поле имеется более 3 выборок на пиксель SamplesPerPixel, и указания типа альфа (1 для связанного, предварительно умноженного альфа-компонента и 2 для несвязанного альфа (отдельная подложка); однако Альфа-каналы редко используются в файлах TIFF и могут не поддерживаться программным обеспечением пользователя. Истинный цвет с альфой 8 Информация об альфе добавляется путем указания того, что в поле имеется более 3 выборок на пиксель SamplesPerPixel, и указания типа альфа (1 для связанного, предварительно умноженного альфа-компонента и 2 для несвязанного альфа (отдельная подложка); однако Альфа-каналы редко используются в файлах TIFF и могут не поддерживаться программным обеспечением пользователя. Сжатие Большинство файлов TIFF несжаты, но поддерживаются сжатие PackBits без потерь и LZW, а также сжатие JPEG с потерями. Лицензирование Лицензия не требуется (за исключением любых, связанных с библиотеками, которые вы можете использовать); срок действия всех известных патентов истек. WebP-изображение WebP поддерживает сжатие с потерями посредством прогнозирующего кодирования на основе видеокодека VP8, а также сжатие без потерь, в котором используются замены повторяющихся данных. Изображения WebP с потерями в среднем на 25–35 % меньше изображений JPEG с визуально схожими уровнями сжатия. Изображения WebP без потерь обычно на 26 % меньше, чем те же изображения в формате PNG.

WebP также поддерживает анимацию: в файле WebP с потерями данные изображения представлены битовым потоком VP8, который может содержать несколько кадров. WebP без потерь содержит ANIMфрагмент, описывающий анимацию, и ANMFфрагмент, представляющий кадр последовательности анимации. Поддерживается циклическое воспроизведение.

WebP теперь имеет широкую поддержку в последних версиях основных веб-браузеров, хотя и не имеет глубокой исторической поддержки. Предоставьте запасной вариант в формате JPEG или PNG , например, с помощью элемента<picture> .

MIME-тип image/webp Расширения файлов .webp Спецификация Спецификация контейнера RIFF RFC 6386: Руководство по формату данных и декодированию VP8 (кодирование с потерями) Спецификация битового потока без потерь WebP

Совместимость с браузером Особенность Хром Край Fire Fox Интернет-проводник Опера Сафари Поддержка WebP с потерями 17 18 65 нет 11.10 (престо) 15 (мигание) 14 WebP без потерь 23 25 на Android 18 65 нет 12.10 (престо) 15 (мигание) 14 Анимация 32 18 65 нет 19 (Мигает) 14 WebP также можно использовать для экспорта изображений из Canvas из Firefox 96 и Chrome 50 ( HTMLCanvasElement.toBlob()более подробную информацию о поддерживаемой версии см.

Максимальные размеры 16 383 × 16 383 пикселей Поддерживаемые цветовые режимы Lossy WebP сохраняет изображение в 8-битном формате Y'CbCr 4:2:0 (YUV420). Lossless WebP использует 8-битный цвет ARGB, при этом каждый компонент занимает 8 бит, что в общей сложности составляет 32 бита на пиксель. Сжатие Без потерь (коды Хаффмана, LZ77 или цветового кэша) или с потерями (VP8). Лицензирование Лицензия не требуется; исходный код находится в открытом доступе. Примечание. Несмотря на объявленную поддержку WebP в Safari 14, начиная с версии 14.0 изображения .webp не отображаются изначально на рабочем столе macOS, тогда как Safari на iOS 14 отображает изображения .webp должным образом.

XBM (файл растрового изображения системы X Window) Файлы XBM (X Bitmap) были первыми, которые стали поддерживаться в Интернете, но больше не используются, и их следует избегать, так как их формат имеет потенциальные проблемы с безопасностью. Современные браузеры уже много лет не поддерживают файлы XBM, но при работе со старым содержимым вы можете найти некоторые из них.

XBM использует фрагмент кода C для представления содержимого изображения в виде массива байтов. Каждое изображение состоит из 2–4 #defineдиректив, задающих ширину и высоту растрового изображения (и, возможно, точку доступа, если изображение выполнено в виде курсора), за которыми следует массив , unsigned charгде каждое значение содержит 8 1-битных монохромных пикселей.

Изображение должно быть кратно 8 пикселям в ширину. Например, следующий код представляет изображение XBM размером 8 на 8 пикселей, причем эти пиксели расположены в черно-белом шахматном порядке:

CPP Скопировать в буфер обмена

#define square8_width 8 #define square8_height 8 static unsigned char square8_bits[] = {

0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55

}; MIME-тип image/xbm,image-xbitmap Расширения файлов .xbm Спецификация Никто Совместимость с браузером Firefox 1–3.5, Internet Explorer 1–5 Максимальные размеры Безлимитный Поддерживаемые цветовые режимы Цветовой режим Бит на компонент Описание Оттенки серого 1 Каждый байт содержит восемь 1-битных пикселей. Истинный цвет н/д н/д Индексированный цвет н/д н/д Оттенки серого с альфой н/д н/д Истинный цвет с альфой н/д н/д Сжатие Без потерь Лицензирование Открытый источник Выбор формата изображения Выбрать лучший формат изображения для ваших нужд, вероятно, проще, чем форматы видео, поскольку вариантов с широкой поддержкой меньше, и каждый из них имеет определенный набор вариантов использования.

Фотографии Фотографии обычно хорошо справляются со сжатием с потерями (в зависимости от конфигурации кодера). Это делает JPEG и WebP хорошим выбором для фотографий: JPEG более совместим, но WebP, возможно, предлагает лучшее сжатие. Чтобы максимизировать качество и минимизировать время загрузки, рассмотрите возможность использования резервного варианта с WebP в качестве первого варианта и JPEG в качестве второго. В противном случае JPEG является безопасным выбором для совместимости.

Лучший выбор Отступать WebP или JPEG JPEG Иконки Для изображений меньшего размера, таких как значки, используйте формат без потерь, чтобы избежать потери деталей в изображении с ограниченным размером. Хотя WebP без потерь идеально подходит для этой цели, его поддержка пока не получила широкого распространения, поэтому PNG — лучший выбор, если вы не предлагаете запасной вариант . Если ваше изображение содержит менее 256 цветов, можно использовать GIF, хотя PNG часто сжимает еще меньше с помощью опции индексированного сжатия (PNG-8).

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

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

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

Лучший выбор Отступать WebP или PNG без потерь; JPEG, если артефакты сжатия не вызывают беспокойства. PNG или JPEG; GIF для скриншотов с малым количеством цветов Диаграммы, рисунки и диаграммы SVG — лучший выбор для любого изображения, которое можно представить с помощью векторной графики. В противном случае вам следует использовать формат без потерь, например PNG. Если вы все же выбираете формат с потерями, например JPEG или WebP с потерями, тщательно взвесьте уровень сжатия, чтобы текст или другие фигуры не стали нечеткими или нечеткими.

Лучший выбор Отступать SVG PNG Предоставление резервных изображений Хотя стандартный <img>элемент HTML не поддерживает резервные варианты совместимости для изображений, этот <picture>элемент поддерживает. <picture>используется как оболочка для ряда <source>элементов, каждый из которых определяет версию изображения в другом формате или для разных медиа-условий , а также <img>элемент, который определяет, где отображать изображение и резервный вариант к значению по умолчанию или «наиболее совместимому». «Версия.

Например, если вы отображаете диаграмму, которую лучше всего отображать в формате SVG, но хотите предложить запасной вариант диаграммы в формате PNG или GIF, вы должны сделать что-то вроде этого:

HTML Скопировать в буфер обмена

<picture>

<source srcset="diagram.svg" type="image/svg+xml" />
<source srcset="diagram.png" type="image/png" />
<img
  src="diagram.gif"
  width="620"
  height="540"
  alt="Diagram showing the data channels" />

</picture> Вы можете указать столько <source>s, сколько пожелаете, хотя обычно достаточно 2 или 3.