6428 подписчиков

Форматы изображений в вебе 2024

5 апреля 20245 апр 2024

15 мин

Оглавление

Форматы изображений
JPEG
Плюсы JPEG:

Сегодня трудно найти веб сайт, на котором нету хотя бы одного изображения, может быть у вас есть такой пример? На странице в интернете можно сразу увидеть много разных изображений: фото пользователя в личном кабинете, фото товара на маркетплейсе, иконка на вкладке браузера, иконка корзины на кнопке «добавить в корзину», анимированное изображение‑открытка от бабушки в мессенджере, [и еще тысяча примеров].

Если вы как‑то связаны с вебом то вам будет полезно иметь общее представление об этих images, как минимум, и уметь с ними работать как максимум. Давайте попробуем разобраться с этим вопросом?

Форматы изображений

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

JPEG

Filename extension: jpg jpeg jpe jif jfif jfi

MIME type: image/jpeg

JPEG (Joint Photographic Expert Group) или JPG один из самых популярных растровых форматов в мире и друг всех «сложных» изображений. JPEG может отображать 16,8 миллионов цветов при этом оставаясь относительно легким.

Плюсы JPEG:

Эффективное сжатие: JPEG позволяет существенно уменьшить размер файлов изображений, что упрощает хранение и передачу файлов в Интернете.
Поддержка миллионов цветов: JPEG поддерживает глубину цвета до 24 бит, что позволяет сохранять изображения с миллионами цветов, идеально подходит для фотографий.
Широкая совместимость: Практически все программы для просмотра изображений и веб‑браузеры поддерживают JPEG, что обеспечивает высокий уровень совместимости и удобство использования.
Регулируемое качество сжатия: Пользователи могут выбирать степень сжатия, чтобы найти оптимальный баланс между качеством изображения и размером файла.

Минусы JPEG:

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

PNG

Filename extension: png

MIME type: image/png

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

Плюсы PNG:

Сжатие без потерь: В отличие от JPEG, PNG использует сжатие без потерь, благодаря чему изображения сохраняют своё первоначальное качество независимо от того, сколько раз они были отредактированы или сохранены.
Поддержка прозрачности: PNG позволяет создавать изображения с прозрачными областями, что идеально подходит для логотипов, иконок и слоёв наложения в веб‑дизайне. Так же можно указать интенсивность прозрачности.
Поддержка большого количества цветов: PNG поддерживает глубину цвета от 8-битной (256 цветов) до 48-битной (десятки миллионов цветов), что делает его подходящим для разнообразных изображений, включая фотографии и графику.
Поддержка сложных изображений: Из‑за своих возможностей PNG хорошо подходит для хранения детализированных карт, текста и иллюстраций с чёткими границами.

Минусы PNG:

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

APNG

Filename extension: png apng

MIME type: image/apng

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

Плюсы APNG:

Поддержка анимации: APNG позволяет создавать анимированные изображения с высоким качеством и поддержкой прозрачности, что делает его идеальным форматом для создания сложных анимаций.
Сжатие без потерь: Как и PNG, APNG использует сжатие без потерь, благодаря чему качество анимации остаётся высоким даже после множественных редактирований.
Поддержка прозрачности: APNG поддерживает прозрачные области в анимациях, что делает его отличным выбором для веб‑дизайна и интерфейсов, где нужно наложение изображений.
Совместимость с PNG: APNG файлы совместимы с существующей инфраструктурой PNG. Неанимированные устройства отображают первый кадр анимации как обычное статическое изображение PNG.

Минусы APNG:

Большие размеры файлов: Из‑за сжатия без потерь, поддержки большого количества цветов, прозрачности и анимации файлы APNG могут быть значительно больше альтернативных форматов, что увеличивает время загрузки и затраты на хранение.
Возможные проблемы с производительностью: Анимации APNG могут потреблять больше ресурсов процессора и памяти при воспроизведении, особенно если они используются в большом количестве на веб‑странице.

GIF

Filename extension: gif

MIME type: image/gif

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

Плюсы GIF:

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

Минусы GIF:

Ограниченная цветовая палитра: GIF поддерживает всего до 256 цветов, что может привести к ухудшению качества изображения.
Большие файлы для сложных анимаций: Хотя GIF может быть эффективным для простых изображений и коротких анимаций, размер файлов быстро растет с увеличением сложности и продолжительности анимации.
Потеря качества при сжатии анимированных изображений: В то время как статические GIF‑изображения используют сжатие без потерь, качество анимированных GIF может ухудшаться из‑за ограниченной цветовой палитры.
Неэффективно для детализированных изображений: Из‑за ограничения в 256 цветов, формат GIF не подходит для детализированных изображений или изображений с широким диапазоном цветов.

WebP

Filename extension: webp

MIME type: image/webp

WebP — это формат изображений, разработанный Google, который предлагает сжатие изображений с потерями и без потерь. Он призван обеспечить высокое качество изображений при меньших размерах файлов.

Плюсы WebP:

Отличное сжатие с потерями: WebP обеспечивает хорошее сжатие изображений с минимальной потерей качества, что делает его отличным выбором в вебе.
Поддержка анимации: WebP поддерживает анимированные изображения, поэтому он может использоваться для создания веб‑анимаций.
Поддержка прозрачности: WebP поддерживает прозрачность, что идеально подходит для логотипов, иконок и слоёв наложения в веб‑дизайне. Так же можно указать интенсивность прозрачности.
Широкая совместимость: WebP совместим со многими современными браузерами и программами для просмотра изображений, что обеспечивает его удобство использования.

Минусы WebP:

Поддержка старыми браузерами: Хотя WebP получил большую популярность, некоторые старые браузеры (например, Internet Explorer) и программы могут не полностью поддерживать этот формат, что может привести к проблемам с отображением на некоторых устройствах.

AVIF

Filename extension: avif

MIME type: image/avif

AVIF (AV1 Image File Format) — это современный формат изображений, основанный на технологии сжатия AV1. Он предназначен для обеспечения высокого качества изображений при более низком размере файлов.

Плюсы AVIF:

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

Минусы AVIF:

Поддержка старыми браузерами: AVIF достаточно популярен, однако, некоторые старые браузеры (например, Internet Explorer 👴) и программы могут не полностью поддерживать этот формат, что может привести к проблемам с отображением на некоторых устройствах.
Необходимость в производительных устройствах для декодирования: Так как AVIF использует передовые алгоритмы сжатия, его декодирование может требовать больше ресурсов процессора и памяти, чем другие форматы изображений, особенно на устаревших устройствах.

Иконка‑Сломанного‑Изображения.png (Хабр не поддерживает формат HEIF)

HEIF/HEIC

Filename extension: heif heic

MIME type: image/heif image/heic

HEIF (High Efficiency Image Format) — это современный формат изображений, который обеспечивает высокую эффективность сжатия и поддержку различных функций, таких как анимация, HDR, прозрачность и многослойность.

HEIC (High Efficiency Image Container) — это контейнерный формат файла, который используется в том числе и для хранения изображений в формате HEIF, как пример можно привести Live Photos сделанные на iPhone.

Плюсы HEIF:

Высокая эффективность сжатия: HEIF использует передовые алгоритмы сжатия, такие как сжатие с потерями HEVC (High Efficiency Video Coding), что позволяет значительно сократить размеры файлов при сохранении высокого качества изображений.
Поддержка различных функций: HEIF поддерживает не только статические изображения, но и анимацию, HDR, прозрачность и многослойность, что делает его универсальным форматом для различных типов изображений.
Высокое качество изображений: Благодаря использованию передовых технологий сжатия и поддержке различных функций HEIF обеспечивает высокое качество изображений даже при сжатии.

Минусы HEIF:

Ограниченная поддержка: основной минус HEIF это поддержка. Так как этот формат поддерживается только на устройствах Apple, то его использование в вебе становится затруднительным. И все же знать об этом формате может быть полезно учитывая количество пользователей iOS и macOS в мире.

Иконка‑С-Двумя‑Коктейлями.png (Хабр не поддерживает формат SVG)

SVG

Filename extension: svg

MIME type: image/svg+xml

SVG (Scalable Vector Graphics) — это формат изображений, основанный на XML, который описывает двумерные векторные графики с использованием векторных объектов, таких как линии, кривые, формы и текст.

Плюсы:

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

Минусы:

Сложность: SVG формат имеет множество особенностей в использовании по сравнению с растровыми форматами, поэтому требуется хотя бы базовое понимание того как этот формат работает
Ограничения в применении: по своей природе, если можно так выразиться, SVG формат подходит для «простых» изображений.

Сравнение форматов изображений

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

Здесь вы сможете найти файлы с изображениями из моего сравнения. Для оптимизации растровых изображений я использовал сервис squoosh, а для анимированной графики — Ezgif

Дисклеймер! Данное сравнение сделано не профессионалами. Пожалуйста, попробуйте его повторить самостоятельно дома. Спасибо!

1. Реалистичное фото JPEG

Далее представлены скриншоты с оптимизацией и конвертацией формата.

1.1 JPEG to PNG

Squoosh. Реалистичное фото — из JPEG в PNG

Качество изображения не изменилось
Размер файла увеличился с 1.28MB до 17.2MB (+1249%) 😱

1.2 JPEG to WebP

Squoosh. Реалистичное фото — из JPEG в WebP

Качество изображения почти не изменилось (блики на воде стали более матовыми)
Размер файла уменьшился с 1.28MB до 746KB (-42%)

1.3 JPEG to AVIF

Squoosh. Реалистичное фото — из JPEG в AVIF

Качество изображения почти не изменилось (блики на воде стали более матовыми)
Размер файла уменьшился с 1.28MB до 450KB (-65%) 🎉

1.4 Остальные форматы

Все остальные сравнения, как мне кажется, имеют мало смысла:

JPEG to SVG. Такой вариант конвертации возможен с технической точки зрения, но не даст никакой оптимизации — грубо говоря, мы получим тоже самое изображение «обернутое» в SVG, но это совсем другая история…
JPEG to HEIC. К сожалению, я не смог найти инструментов, которые позволили бы мне конвертировать изображение из формата JPEG в формат HEIC и при этом добиться какой-либо оптимизации. Пожалуйста, расскажите мне как это можно сделать если вы знаете! 🙂
JPEG to GIF & JPEG to APNG. По моему скромному мнению форматы GIF и APNG в первую очередь используются для анимированной графики, так что я не буду пытаться конвертировать статичные изображения в этот формат. 🙃

2. Нарисованное изображение PNG

Далее представлены скриншоты с оптимизацией и конвертацией формата.

2.1 PNG to JPEG

Squoosh. Нарисованное изображение — из PNG в JPEG

Изображение потеряло прозрачность
Качество изображения ухудшилось (детали изображения потеряли четкость, появились артифакты сжатия)
Размер файла уменьшился с 196KB до 48.2KB (-75%)

2.2 PNG to WebP

Squoosh. Нарисованное изображение — из PNG в WebP

Качество изображения ухудшилось (детали изображения потеряли четкость)
Размер файла уменьшился с 196KB до 41.2KB (-79%)

2.2 PNG to AVIF

Squoosh. Нарисованное изображение — из PNG в AVIF

Качество изображения ухудшилось (детали изображения потеряли четкость)*
Размер файла уменьшился с 196KB до 23.1KB (-88%) ❤️

*Если увеличить значение настройки Quality c 0.5 до 0.8, то качество изображение будет практически идентичное оригиналу. При этом размер файла уменьшится с 196KB до 40.0KB (-79%).

2.4 Остальные форматы

Оставшиеся сравнения я пропущу по той же причине, что и в предыдущем примере с реалистичным фото.

3. Анимированное изображение GIF

Далее представлены скриншоты с оптимизацией и конвертацией формата.

3.1 GIF to APNG

Ezgif. Анимированное изображение — из GIF в APNG

Качество изображения визуально не изменилось
Размер файла увеличился с 1.61MB до 2.04MB (+26.82%)

3.2 GIF to WebP

Ezgif. Анимированное изображение — из GIF в WebP

Качество изображения визуально не изменилось
Размер файла уменьшился с 1.61MB до 423.84KB (-74.22%) 🙂

3.3 GIF to AVIF

Ezgif. Анимированное изображение — из GIF в AVIF

Качество изображения визуально не изменилось
Размер файла уменьшился с 1.61MB до 118.48KB (-92.79%) ❤️

3.4 Остальные форматы

Ну вы поняли. 🙂

Выводы сравнения форматов

На основании моего сравнения можно сделать очевидное заключение — современные форматы (WebP и AVIF) универсальны и при этом имеют очень хорошую оптимизацию.

Можно ли использовать эти форматы в своих приложениях? Нужно!

Оптимизация SVG

Векторная графика не может полноценно поучаствовать в сравнении, однако, думаю, что стоит немного рассказать про ее оптимизацию.

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

Удаление ненужных элементов и атрибутов: Из SVG файла могут быть удалены ненужные элементы, атрибуты и метаданные, такие как комментарии, пробелы и переносы строк, которые не влияют на отображение изображения.
Комбинирование элементов: Несколько похожих элементов могут быть объединены в один для уменьшения количества элементов и улучшения читаемости файла.
Использование сокращений: Длинные значения атрибутов могут быть заменены сокращенными формами или выражениями, что уменьшает размер файла.
Применение сжатия: SVG файлы могут быть сжаты с использованием сжатия данных, такого как gzip, что позволяет дополнительно сократить размер файла при передаче по сети.
Конвертация в растровый формат: SVG изображения можно конвертировать в полноценный растровый формат, например AVIF. В редких случаях это может уменьшить размер файла.

К примеру здесь векторное изображение удалось сжать c 2.21KB до 1.43KB (-35.35%) при помощи инструмента SVGOMG.

SVGOMG. Оптимизация иконки с куском торта и мороженном

Заключение

Используйте разные форматы изображений отталкиваясь от вашей конкретной задачи. Не бойтесь использовать современные форматы — давайте сделаем веб быстрее и красивее! Оптимизируйте и экспериментируйте! 🙂 Пока!