Не более 256 цветов в одном файле

Обновлено: 04.07.2024

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP. Подробнее о растровой графике можно прочитать в статье «Растровая и векторная графика».

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

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.

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

Таким образом, формат GIF подходит если:

изображение не многоцветное;
нужна простейшая прозрачность;
нужна анимация.

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.

Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.

Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Пример изображения в формате PNG (источник изображения: Wikimedia Commons)

Итак, формат PNG подходит для:

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

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

JPEG: 44 килобайт WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Вам известна разница между JPEG, GIF, PNG и другими графическими форматами? Когда нужно использовать тот или иной формат, или какой лучше всего подойдет для сохранения фотографий? Ниже вы найдете ответы на все эти вопросы.

Алгоритмы сжатия данных с потерями / без потерь

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

Формат файлов, содержащий необработанную информацию, поступающую напрямую с матрицы полупрофессиональной и профессиональной фотокамер. Эти файлы не обрабатываются процессором камеры и содержат всю отснятую информацию в «сыром» виде. Размер таких файлов может превышать 25 МБ. Файлы RAW отлично подойдут для редактирования, однако из-за большого размера хранить их не слишком удобно.

.JPEG (JPG)

Это, пожалуй, самый распространенный графический формат. Обычно он используется для публикации в интернете фотографий и изображений с текстом. JPEG является TrueColor-форматом, то есть может хранить изображения с глубиной цвета 24 бит/пиксель. Данный формат может отображать более 16 млн цветов.

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

JPEG с высоким качеством (100). Размер 113 КБ

JPEG со средним качеством (50). Размер 59 КБ

JPEG с низким качеством (20). Размер 27 КБ

Формат GIF (Graphics Interchange Format) не радует глубиной цвета (8 бит). Он может хранить сжатые без потери данных изображения в формате не более 256 цветов. Одной из особенностей GIF является поддержка анимации.

ПО ТЕМЕ:

Данный формат был разработан в качестве замены GIF. Расшифровывается PNG как Portable Network Graphics. В отличии от GIF, у PNG есть поддержка градаций прозрачности за счет дополнительного альфа-канала. Обычно на прозрачность указывает шахматный фон, как видно из расположенного ниже изображения.

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

Данная аббревиатура расшифровывается как Tagged Image File Format. Это высококачественный формат, использующийся для хранения изображений с большой глубиной цвета. Файлы TIFF могут храниться как в сжатом, так и в распакованном виде. Большим достоинством формата остается поддержка практически любого алгоритма сжатия.

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

Формат BMP (bitmap) один из первых графических форматов и в настоящее время не слишком популярен. BMP хранит изображения с глубиной цвета до 64 бит. Данный формат поддерживает прозрачность, однако он не читается некотороми приложениями Microsoft. Иными словами, файлы BMP лучше конвертировать в другие форматы.

Так какой же формат следует использовать?

Оптимальным выбором будет формат PNG. Он отлично подойдет для изображений большого размера. Если требуется большая степень сжатия, например, для отправки фото по электронной почте, лучше воспользоваться JPEG. Формат TIFF достаточно сложен для работы и практически не поддерживается в браузерах.

Ниже опубликована сравнительная таблица характеристик различных форматов.

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

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

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

Полутоновые изображения.

Эти изображения содержат пиксели одного цвета, но разной яркости. Каждый пиксель может принимать 256 различных значений яркости от 0 (черный) до 255 (белый). Этого вполне достаточно, чтобы правильно отобразить изображение, например, черно-белую фотографию.

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

Изображения с индексированными цветами

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

Рис. 1.8. Изображение с индексированными цветами

Полноцветные изображения

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

Форматы графических файлов

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

Расширение — это несколько букв или цифр, находящихся после точки в имени файла.

Например, окончание имени (расширение) ".txt" обычно используют для обозначения файлов, содержащих только текстовую информацию, а ".doc" — содержащих текстовую информацию, структурированную в соответствии со стандартами программы Microsoft Word. Файлы, содержимое которых соответствует одному формату, называют файлами одного типа.

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

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

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

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

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

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

Наиболее распространенные растровые форматы — это BMP, GIF, TIFF, JPEG и PSD.

— формат хранения растровых изображений, разработанный компанией Microsoft.

С форматом BMP работает огромное количество программ, так как его поддержка интегрирована в операционные системы Windows и OS/2.

Формат BMP поддерживается всеми графическими редакторами, работающими под ее управлением, способен хранить как индексированный (до 256 цветов), так и RGB-цвет ( 16,7 млн. оттенков).

Имена файлов BMP используют расширения *.bmp, *.dib и *.rle

— стандартный растровый формат представления изображений в WWW.
Формат GIF позволяет хорошо сжимать файлы, в которых много однородных заливок (логотипы, надписи, схемы), записывать изображение "через строчку" (Interlaced mode), благодаря чему, имея только часть файла, можно увидеть изображение целиком, но с меньшим разрешением.
Применяется для хранения рисунков и анимации в Интернете.

Имена файлов GIF используют расширение *.jpg .

TIFF используется в полиграфии, при печати изображений.

TIFF может сохранять векторную графику программы Photoshop, Alpha-каналы для создания масок в видеоклипах Adobe Premiere и др.
Имена файлов TIFF используют расширение *.tiff и *.tif.

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

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

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

Имена файлов JPEG используют расширения: .jpg, .jfif, .jpg, .JPG, или .JPE.

— формат фирмы Adobe Photoshop с неразрушаемым сжатием.

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

Имена файлов PSD используют расширение *.psd.

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

Векторные изображения различных форматов различает способ их создания и принципы кодирования графических объектов.

Наиболее распространенных векторных форматов — WMF и CDR.

Читайте также: