• Заметки

    • Форматы изображений использующиеся на сайтах

    Меню

    Опубликовано: 25 Октября 2022

    В вебе можно встретить множество различных форматов, особенности основных из которых описаны в этой статье. Надо заметить, что полную поддержку имеют только старые форматы: JPEG, PNG, GIF. А такие форматы как WEBP, AVIF, JPEG 2000 и аналогичные требуют использование заглушки для браузеров которые их не поддерживают, что уменьшает скорость загрузки изображений на сайтах, но удваивает вес изображений на сервере.

    BMP

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

    ICO

    Формат созданный компанией Microsoft для хранения иконок. На сайтах, как правило, используется только как favicon.

    GIF

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

    Выводится на сайте с помощью тега img:

    <img src="some_img.gif" alt="Описание">

    JPG / JPEG

    JPEG (Joint Photographic Experts Group) — популярный и проверенный временем формат. Используемые расширения для файлов — .jpg и .jpeg — идентичны. Формат JPEG отлично подходит для публикации фотографий и иных изображений с большим количеством деталей и переходом тонов. Не поддерживает прозрачность. Позволяет настраивать уровень качества изображения: при низком уровне теряются детали и появляются артефакты, но снижается вес изображения.

    Формат JPEG всё чаще стал использоваться как фолбек для браузеров которые не поддерживают новые форматы растровых изображений. Его место потихоньку занимают форматы WebP и AVIF.

    Выводится на сайте с помощью тега img:

    <img src="some_img.jpg" alt="Описание">

    PNG

    PNG (Portable Network Graphics) — еще один популярный и проверенный временем формат. Отлично справляется с изображениями которые предусматривают наличие прозрачных областей. Настраивать уровень сжатия в этом формате не возможно, но, как правило, для достижения минимального размера файла, такие изображения адаптируют, снижая количество используемых цветов.

    PNG существует в двух форматах: PNG 24 и PNG 8. Они отличаются количеством цветов, которые можно использовать в изображении. PNG 8 имеет значительные ограничения, и, соответственно, имеет меньший вес. Оба формата используют расширение для файлов .png. Используемую битность можно узнать в метаданных файла, по расширению определить не получиться.

    Выводится на сайте с помощью тега img:

    <img src="some_img.png" alt="Описание">

    SVG

    Векторный формат изображений. Подходит для изображений с простыми геометрическими формами, которые встречаются у логотипов, пиктограмм и некоторых иллюстраций в упрощенном стиле. Такие изображения одинаково хорошо выглядят на экранах с различными дисплеями независимо от их размера, поскольку их вычислением и прорисовкой занимается то устройство, на котором изображение было открыто. SVG идеальный формат для адаптивной вёрстки под различные устройства. Недостаток данного формата в том, что не все устройства (в особенности со старым ПО) его поддерживают. Также опасно использовать SVG для изображений с большим количеством деталей, поскольку браузеру потребуются большие вычислительные ресурсы для его отрисовки.

    Ввиду особенностей формата, вывод SVG на сайте дело достаточно сложное. Существует множество способов как это можно сделать, и каждый из них имеет свои тонкости. Но наиболее простой способ вставить SVG изображение в полотно кода — теги svg, use:

    <svg><use x="0" y="0" xlink:href="some.svg#icon-1" /></svg>

    Более подробно про использование SVG на сайте.

    WEBP

    Формат WebP разработала компания Google, как альтернативу PNG и JPEG, в 2010 году. Он основан на режимах предсказания, которые ранее были опробованы на видеокодеке VP8, и позволяет  сократить размер картинки без видимых потерь в качестве.  В среднем, относительно форматов PNG и JPEG, вес картинок в формате WebP меньше на 25–35%.

    В этом формате сжатие состоит из двух этапов: сперва блоки отрисовываются (в порядке слева направо и сверху вниз) делая попытку «предсказать» содержимое следующего блока по уже декодированным (три блока над текущим и один блок слева от него), затем исходя из установленных настроек кодируется оставшаяся область. Из-за этого WebP оставляет чёткие края фотографии, но сжатие с потерями ухудшает детализацию и текстуру.

    WebP объединяет достоинства форматов JPEG, PNG и GIF: возможность сжатия, поддержку прозрачности и анимации.

    На текущий момент WebP поддерживается практически везде — его доля составляет более 95% устройств.

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

    Способы вывода изображений WebP на сайте:

    Старые браузеры не смогут его отобразить:

<img src="some_image.webp" alt="Описание">

Конструкция HTML5 с подменой для старых браузеров:

<picture>
	<source srcset="some_image.webp" type="image/webp">
	<img src="some_image.jpg" alt="Описание">
</picture>

С использованием JS:

<script async src="simple-webp.min.js">
<noscript data-webp>
	<img src="some_image.png" alt="Описание">
</noscript>

    При использовании тега picture альтернативные форматы изображения добавляют с помощью элемента source, а тег img прописывают для браузеров, которые не поддерживают разметку HTML5.

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

    AVIF

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

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

    Один из основных недостатков данного формата при размещение на сайте — отсутствие поддержки прогрессивного рендеринга: пока изображение не скачается полностью, на его месте ничего не будет отображаться, тогда как JPEG и WebP могут показывать частично загруженное изображение.

    AVIF выводится на сайте с помощью тега img или picture:

    Старые браузеры не смогут его отобразить:

<img src="some_image.avif" alt="Описание">

Конструкция HTML5 с подменой для старых браузеров:

<picture>
	<source srcset="some_image.avif" type="image/avif">
	<img src="some_image.jpg" alt="Описание">
</picture>

    При использовании тега picture альтернативные форматы изображения добавляют с помощью элемента source, а тег img прописывают для браузеров, которые не поддерживают разметку HTML5. 

    JPEG 2000

    Алгоритм JPEG 2000 был разработан спустя 8 лет после того, как JPEG вышел на сцену и в то время считался преемником JPEG. Он лучше оригинального формата JPEG за счет того, что имеет большую степень сжатия, при меньшем количестве артефактов. Не получил широкого распространения, по большей части из-за сложности реализации и требовательности к памяти, но стал не заменим там, где важно цифровое архивирование: в нем хранят спутниковые, архитектурные и художественные изображения, рентгеновские снимки и т.п.

    JPEG 2000 имеет разрешения: .jp2 .jpx .j2c .j2k .jpf

    JPEG 2000 выводится на сайте с помощью тега img или picture:

    Не все браузеры смогут его отобразить:

<img src="some_image.jp2" alt="Описание">

Конструкция HTML5 с подменой для старых браузеров:

<picture>
    <source srcset="some_image.jp2" type="image/jp2">
	<img src="some_image.jpg" alt="Описание">
</picture>

    При использовании тега picture альтернативные форматы изображения добавляют с помощью элемента source, а тег img прописывают для браузеров, которые не поддерживают разметку HTML5.

    front-end