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

Для рисования нужен холст (рабочая область), краски и инструменты.

В каждом графическом редакторе есть возможность установить нужные размеры рабочей области. Так, в графическом редакторе Paint в меню Рисунок можно выбрать пункт Атрибуты и с его помощью установить нужные размеры рабочей области (белого холста).

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

По умолчанию используется чёрный основной и белый фоновый цвета.

Во многих графических редакторах реализована возможность конструирования цвета на основе цветовой модели HSB (по первым бук вам английских слов Hue — цветовой тон (оттенок), Saturation – насыщенность (контраст), Brightness – яркость).

Окно конструирования цвета в графическом редакторе Paint открывается командой Палитра , Изменить палитру , Определить цвет . Сначала выбирается цвет в радуге (перемещение крестообразного указателя слева направо), потом устанавливается его контрастность (перемещение того же указателя сверху вниз), а затем перемещением треугольного указателя задаётся яркость.

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

  • Карандаш — используется для прорисовки контуров предмета от руки; цвет карандаша выбирается на палитре.
  • Кисть — используется для рисования от руки; цвет краски выбирается на палитре, в дополнительном меню настройки выбирается один из двенадцати вариантов кисти.
  • Распылитель — напыляет точки выбранного цвета; можно выбрать один из трех вариантов области напыления.
  • Заливка — позволяет «залить» краской любую замкнутую область.
  • Ластик — позволяет стирать части изображения; в дополнительном меню настройки можно выбрать один из четырёх вариантов размера ластика.
  • Масштаб — позволяет увеличивать изображение; в меню настройки можно выбрать один из четырёх вариантов укрупнения.
  • Надпись — позволяет размещать на рисунке текст и таким образом создавать открытки, красочные объявления, пригласительные билеты, визитные карточки и т. д.

Основные инструменты рисования Карандаш и Кисть пользователь перемещает по экрану с помощью мыши. Получить таким способом нужную линию под силу только опытному пользователю, к тому же хорошо владеющему обычными карандашом и кистью. Начинающему художнику лучше всего использовать в своей работе инструменты Линия , Кривая , Прямоугольник , Эллипс и другие, позволяющие достаточно просто строить на экране компьютера простейшие геометрические фигуры, иначе называемые графическими примитивами . Из графических примитивов можно собирать достаточно сложные графические изображения.

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

  • удалить — выделенный фрагмент исчезнет, а его место заполнится цветом фона;
  • переместить методом перетаскивания в любое место рабочей области, при этом прежнее место расположения фрагмента заполнится цветом фона;
  • вырезать (команда Вырезать в меню Правка ) — выделенный фрагмент исчезает с экрана и помещается в специальную область оперативной памятибуфер обмена , а его место на холсте заполняется цветом фона;
  • копировать (команда Копировать в меню Правка ) – выделенный фрагмент остается на прежнем месте, а его точная копия помещается в буфер обмена;
  • размножить перетаскиванием при нажатой клавише Ctrl – очередная копия фрагмента будет появляться всякий раз, когда кнопка мыши будет отпущена;
  • преобразовать (повернуть , растянуть , наклонить )- в диалоговых окнах команд меню Рисунок точно указывается, как именно будет преобразован выделенный фрагмент.

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

Графический редактор Paint ориентирован на процесс рисования простых изображений и на комбинирование готовых фрагментов. Большинство растровых графических редакторов предназначены не столько для создания изображений, сколько для их обработки (Adobe Photoshop, GIMP). Они позволяют изменять цветовую палитру всего изображения и цвет каждого отдельного пикселя, проводить художественную обработку графических изображений.

Задача.
Некое растровое изображение было сохранено в файле p1.bmp как 24-разрядный рисунок (т. е. глубина цвета = 24). Во сколько раз будет меньше информационный объём файла p2.bmp, если в нём это же изображение сохранить как 256-цветный рисунок?

Решение:
Для кодирования 256 разных цветов требуется 8-разрядный двоичный код (256 = 2 8), т. е. для кодирования цвета каждого пикселя используется 8 битов. Для кодирования цвета каждого пикселя исходного изображения использовалось 24 бита. Так как количество пикселей в двух изображениях одинаково, то информационный объём файла p2.bmp в 3 раза меньше информационного объёма исходного файла.

Ответ: в 3 раза.

Самым мощным растровым графическим редактором, широко распространённым среди специалистов, работающих с растровыми изображениями, является Adobe Photoshop. Это коммерческий продукт, работающий под управлением ОС Microsoft Windows.

Самое главное:

  • Большинство растровых графических редакторов ориентированы не столько на создание изображений, сколько на их обработку.

Вопросы и задания:

  1. Опишите основные возможности растровых графических редакторов.
  2. Опишите основные приёмы работы в графическом редакторе Paint (Kolourpaint).
  3. Почему с помощью цветовой модели HSB человеку более удобно подбирать нужный цвет, чем с помощью цветовой модели RGB?
  4. В каком редакторе, растровом или векторном, вы будете редактировать фотографию?
  5. Некое растровое изображение было сохранено в файле как 256-цветный рисунок. Во сколько раз уменьшится информационный объём файла, если это же изображение сохранить как монохромный (чёрно-белый без градаций серого) рисунок?
    (Решение:
    Поскольку палитра оригинального изображения состояла из 256 цветов, то для кодирования одного пикселя использовалось 8 бит (256 = 2 8). Глубина цвета монохромного рисунка составляет 1 бит (2 = 2 1). Поэтому размер файла уменьшится в 8 раз.
    Ответ: в 8 раз)

Была прошлая пятница, однако Пятничного поста под N3 написать не удалось. Причина банальна — отсутствие свободного времени в связи с квартирным вопросом и рядом других проблем. Но, в эту пятницу фото будет точно. Оно уже есть и было готово вчера к публикации, но все же решил свободное вечернее время потратить на ремонтные работы в квартире. Поэтому, если не смотрели, то обязательно посмотрите и - поднимите себе настроение .

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

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

Разработчики предлагают немало растровых форматов , предназначенных для хранения файлов. Среди наиболее часто используемых стоит назвать следующие: BMP, TIFF, GIF, JPEG, PNG, PSD, ICO . Итак, рассмотрим некоторые плюсы и минусы, а также область применения перечисленных растровых форматов изображений .

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

  • BMP - (аббревиатура от Bit Map image) представляет собой стандартный растровый формат и имеет универсальное назначение. Он поддерживается большинством графических редакторов, включая довольно распространенный Paint . Изначально кодирование в нем выполнялось самым простым способом, по . Но это оказалось неэкономно, поскольку каждый пиксел был представлен лишь одним байтом. Следовательно, становились доступными всего 256 цветов, что существенно ограничивало возможности передачи изображений. В дальнейшем он несколько совершенствовался. Bit Map image почти оптимально подходит для хранения данных и обмена ими с другими подобными приложениями. Но, вместе с тем, занимает слишком много места в памяти, так как необходимо сберегать кодирование всех точек изображения. Файл BMP не поддерживает анимацию и черезстрочное отображение.
  • TIFF (от Taged Image File Format) – универсальный для издательских систем и топографической графики. Такие форматы растровых изображений обеспечивают высокое качество печати. Они создавались для поддержки практически всех программ, предназначенных для работы с файлами точечной графики, поэтому совмещаются со всеми платформами. Широко используют TIFF в полиграфии и издательском деле. Файлы (отсканированные изображения, иллюстрации, факсы и тому подобное) с расширением .tif в этом мощном формате хранят для дальнейшей цветной печати, хотя доступна и монохромная распечатка – в представлениях CMYK и RGB . Не применяется для публикации картинок в компьютерной сети или при создании веб-сайтов, ведь имеет довольно значительные размеры. Непригоден он также для анимации.
  • GIF (по первым буквам от Graphic Interchamge Format) служит для хранения растровых изображений в графике и для обмена ими. Он один из самых «старых» в Интернете, имеет хождение уже длительное время, несмотря на то, что в нем применяются индексированные цвета (в ограниченном наборе). Файлы с расширением .gif широко используют при конструировании Web-сайтов. Среди основных плюсов Graphic Interchamge Format стоит назвать то, что вид картинки не зависит от базовой платформы или от типа браузера, а сжатие происходит без потерь информации. Высококачественно в этом формате отображаются рисунки с незначительным количеством однородных цветов, чертежи, прозрачные картинки и анимация. GIF небольшой по размеру, поэтому быстро загружается, что немаловажно при создании HTML-страниц. Но все же формат имеет существенный недостаток – у него незначительный набор цветов, что ограничивает его возможности при хранении изображений, у которых плавные переходы.
  • JPEG (аббревиатура от Joint Photographic Expert Group) помогает избавиться от изъянов, которые возникают при создании и сбережении изображений в GIF. Здесь используется метод сжатия фотографий или прочих картинок. Эти форматы растровых графических файлов являются наиболее распространенными при хранении многоцветных картинок. Сжатие изображений (они хранятся в файлах с пометкой .jpg ).выполняется в плавном режиме, что обеспечивает высокую его степень и снижает потери данных. На жестком диске в JPEG удобно сберегать значительное число картинок, в частности – большие фотоснимки с плавными переходами. Это позволяет существенно сэкономить место на диске. Также с помощью JPEG доступно публиковать вполне приемлемого качества фото в компьютерной сети. Но следует учитывать, что при сжатии часть данных теряется, а при повторном сохранении того же изображения шансы необратимой утери информации возрастают. В этом плане намного улучшает положение усовершенствованная версия формата – JPEG 2000 . Правда, поддерживается он не всеми браузерами, что тормозит его распространение.
  • PNG (portable network graphics) позволяет хранить растровую графику в сжатом виде без потерь, причем файлы получаются меньше по объему, чем в GIF. В формате PNG доступно применение практически любого цвета, а также прозрачность. Это обстоятельство раскрывает широкие возможности в веб-конструировании. Сейчас пользуется постоянной популярностью, поскольку состыкуется со всеми платформами, поддерживает черезстрочное отображение, отличается значительной цветовой гаммой, поддерживает анимацию.
  • Внутренние форматы растровой графики PSD (сокращение от PhotoShop Document) предназначены для пакетов программы . Они поддерживают все типы изображений, а также их слои в ходе обработки. Сохраняются в файлах с пометкой расширения .psd .

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

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

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

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

Информационный объём растрового изображения (\(V\)) определяется как произведение числа входящих в изображение точек (\(N\)) на информационный объём одной точки (\(q\)), который зависит от количества возможных цветов, т. е. V = N ⋅ q .

При чёрно-белом изображении \(q\) \(=\) \(1\) бит (например, \(1\) - точка подсвечивается и \(0\) - точка не подсвечивается). Поэтому для хранения чёрно-белого (без оттенков) изображения размером \(100\)x\(100\) точек требуется \(10 000 \)бит.

Если между чёрным и белым цветами имеется ещё шесть оттенков серого (всего \(8\)), то информационный объём точки равен \(3\) бита (log 2 8 = 3). Информационный объём такого изображения увеличивается в три раза: \(V\) \(=\) \(30 000 \)бит.

Рассмотрим, сколько потребуется бит для отображения цветной точки: для \(8\) цветов необходимо \(3\) бита; для \(16\) цветов - \(4\) бита; для \(256\) цветов - \(8\) битов (\(1\) байт). В таблице ниже представлено кодирование цветовой палитры из \(16\) цветов.


Разные цвета и их оттенки получаются за счёт наличия или отсутствия трёх основных цветов (красного, синего, зеленого) и степени их яркости. Каждая точка на экране кодируется с помощью \(4\) битов.

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


Описание цвета пикселя является кодом цвета.

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

Наиболее распространенными значениями глубины цвета являются \(8\), \(16\), \(24\) или \(32\) бита.

Чем больше глубина цвета, тем больше объем графического файла.

Для хранения растрового изображения размером 32 x32 пикселя отвели 512 байтов памяти.

Каково максимально возможное число цветов в палитре изображения?

Решение . Число точек изображения равно 32 ⋅ 32 = 1024 . Мы знаем, что 512 байтов \(=\) 512 ⋅ 8 \(=\) 4096 бит. Найдём глубину цвета 4096 ÷ 1024 = 4 . Число цветов равно 2 4 = 16 .

Цвет на Web-страницах кодируется в виде RGB -кода в шестнадцатеричной системе: #RRGGBB , где RR , GG и BB - яркости красного, зеленого и синего, записанные в виде двух шестнадцатеричных цифр; это позволяет закодировать \(256\) значений от \(0\) (00 16) до \(255\) (FF 16) для каждой составляющей.

Коды некоторых цветов:


При обозначении цветов в HTML-документах вначале ставят знак номера # . В HTML: \(#FF0000\) - интенсивно красный цвет, #00FF00 - зелёный цвет, #0000FF - синий цвет. Отсутствие цветов (#000000 ) даёт чёрный цвет, а самое интенсивное сочетание всех трёх каналов (#FFFFFF ) даёт белый цвет.

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

Чтобы получить светлый оттенок какого-то «чистого» цвета, нужно одинаково увеличить нулевые составляющие; например, чтобы получить светло-красный цвет, нужно сделать максимальной красную составляющую и, кроме этого, одинаково увеличить остальные - синюю и зелёную: #FF9999 (сравните с красным: #FF0000 ).

Чтобы получить тёмный оттенок чистого цвета, нужно одинаково уменьшить все составляющие, например, #660066 - это тёмно-фиолетовый цвет (сравните с фиолетовым #FF00FF ).

Заметим, что если старший бит в коде (первая, третья или пятая цифра) находится в диапазоне от \(0\) до \(3\), то можно считать, что эта цветовая компонента отсутствует в цвете, то есть #0F0F0F - это чёрный цвет.

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

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

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

Рассмотрим, например, такой графический примитив, как окружность радиуса \(r\). Для её построения необходимо и достаточно следующих исходных данных:

Координаты центра окружности;
- значение радиуса \(r\);
- цвет заполнения (если окружность не прозрачная);
- цвет и толщина контура (в случае наличия контура).

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

Источники:

Самылкина Н. Н. Информатика: все темы для подготовки к ЕГЭ / Н. Н. Самылкина, А. П. Сильченко. - М. : Эксмо, 2011, стр. 40-43