растровая графика в вебе

Форматы растровой графики для веба

Самые популярные форматы растровой графики – GIF, JPG и PNG. За счёт поддержки браузерами и малого веса.

Растровая графика — это набор пикселей, каждый из которых имеет свой цвет. Совокупность пикселей формирует изображение. Принцип формирования изображения похож на вышивку крестиком или японский кроссворд.

Растровая графика похожа на вышивку крестиком

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

Содержание:

Формат JPEG (Joint Photographic Expert Group)

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

Киев в Симпсонах

JPEG подходит для сохранения фотографий и картин

Особенность формата JPEG — сжатие

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

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

.jpg ≠ .jpeg

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

Предположим, у нас есть файл homer.jpeg

подключение файлов с разным расширением
Картинка отобразится на странице только в первом варианте, т.к. изображения homer.jpg в папке нет.

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

Формат GIF (Graphic Interchamge Format)

Долгое время был популярным в вебе за счёт своих особенностей. Но с развитием технологий утратил былую славу и на сегодняшний день практически не используется.

Особенности формата GIF

сравнение форматов JPG и PNG для фотографии

Слева JPEG, справа GIF. Пример упрощения цветовой схемы на фотографии в формате GIF

Раньше GIF использовали для изображений с малым количеством цветов и для анимации. Сегодня выгодней использовать видео для анимации и вектор для простых изображений. Они весят меньше.

Слева GIF (86KB), справа MP4 (20KB)

Формат PNG (Portable Network Graphics)

Формат PNG появился как альтернатива ГИФу, т.к. последний долгое время был платным. Изначально они были схожи, но потом PNG эволюционировал. Ключевым отличием стала анимация: PNG её не поддерживает. Позже был создан отдельный формат aPNG — Animated Portable Network Graphics.

PNG тоже поддерживал 256 цветов и прозрачность. Потом его улучшили, добавив полноцветность, аналогично формату JPEG, и поддержку альфа-канала.

Альфа-канал — это поддержка полупрозрачности. За счёт альфа-канала достигаются гладкие переходы у изображений на прозрачном фоне.

Пример полупрозрачных пикселей

Слева PNG с полупрозрачными пикселями, создающими эффект сглаживания. Справа GIF: пиксели залиты целиком, из-за чего картинка «лесенкой»

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

Формат WebP

Формат WebP (произносится как англ. weppy) — сравнительно молодой формат. Был предложен компанией Google в 2010 году. По сравнению с другими растровыми форматами имеет лучший алгоритм сжатия. Это позволяет уменьшить вес файла без потери качества.

На момент написания статьи этот формат поддерживают 72% браузеров. Что хорошо, но не достаточно. Ситуация изменится с выходом Firefox 65 — он будет поддерживать WebP. Из крупных игроков тормозит Safari.

Оптимизация растровой графики

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

В соотношении качество-вес, лучшие результаты показывает алгоритм tinypng. Если знаете вариант лучше — поделитесь в комментариях.

Сайт сервиса для сжатия изображений — tinypng.com

Резюме

Растровая графика развивается вместе с вебом. На смену былым лидерам приходят новые форматы. За этим нужно следить, как и за другими технологиями.

Невзирая на особенности формата, исходное изображение всегда можно оптимизировать и снизить вес.

Формат WebP можно использовать уже сегодня, отдавая браузерам без поддержки JPEG или PNG.

GIF устарел во всех смыслах. Он трудился на благо веба с 1987 года, пора дать старику отдохнуть 😉