Известно, что на компьютере изображения представляются в цифровом виде. Цифровое – значит, описано посредством чисел. Это позволяет хранить, просматривать и обрабатывать изображение в графических редакторах.
Принцип формирования изображения в растровом и векторных редакторах кардинально отличаются друг от друга.
В растровом редакторе (Gimp, Adobe Photoshop, Paint) изображение разбивается на квадратные элементы одинакового размера и каждый такой элемент описывается отдельно. Этот квадратный графический элемент называют пикселом (picture element, pixel).
Изображения, представленные посредством пикселей, называют растровыми, то есть разложенные на элементы.
Растровое изображение — это файл данных или структура, представляющая собой сетку пикселей на компьютерном мониторе или цветовых точек на бумаге и материалах.
Важными характеристиками для таких изображений являются:
Разрешение
Наиболее распространенная единица измерения – dpi – количество пикселов на одном дюйме длины (1 дюйм = 2,54 см).
Но что да ет разрешение?
Теперь уменьшим размер клетки-пикселя в 4 раза, закрасим только четверть клетки, в этом случае разрешение увеличится только в 2 раза, ведь на одну длину теперь приходится 10 клеток-пикселей
Давайте попробуем разобраться, в чём отличие растровой графики от векторной?
Растровая графика
Растровое изображение, как мозаика, складывается из множества маленьких ячеек — пикселей, где каждый пиксель содержит информацию о цвете. Определить растровое изображение можно увеличив его масштаб: на определённом этапе станет заметно множество маленьких квадратов — это и есть пиксели.
Наиболее распространённые растровые форматы: JPEG, PNG.
Растровое изображение и его увеличенный фрагмент
Применение
Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий. Самый популярный редактор растровой графики — Adobe Photoshop.
Пример использования растровой графики: цифровой рисунок (автор изображения: Катя Климович) Пример использования растровой графики: фотография
Преимущества
Недостатки
Векторная графика
В отличие от растровых, векторные изображения состоят уже не из пикселей, а из множества опорных точек и соединяющих их кривых. Векторное изображение описывается математическими формулами и, соответственно, не требует наличия информации о каждом пикселе. Сколько ни увеличивай масштаб векторного изображения, вы никогда не увидите пикселей.
Самые популярные векторные форматы: SVG, AI.
Векторное изображение и его увеличенный фрагмент
Применение
Векторная графика используется для иллюстраций, иконок, логотипов и технических чертежей, но сложна для воспроизведения фотореалистичных изображений. Самый популярный редактор векторной графики — Adobe Illustrator.
Преимущества
Недостатки
Мы приходим к выводу, что не существует «серебряной пули»: и растровая, и векторная графика имеют свои достоинства и недостатки, соответственно, стоит выбирать формат, который подходит для решения поставленных перед вами задач.
Подробнее про форматы можно посмотреть в статье «Форматы изображений».
Целая глава о графике
Нажатие на кнопку — согласие на обработку персональных данных
Растровая графика представляет собой изображения, которые строятся из пикселей разного цвета, расположенных в определенной последовательности на сетке.
Такой вид графики используется повсеместно и является главным. Если вы работаете в сфере дизайна, графики или чего-то близкого по духу, то вам точно следует знать, что это такое.
В предыдущей публикации было подробно рассмотрено, что такое пиксель, сегодня мы рассмотрим, что такое растр, разберем это понятие и посмотрим на примерах растровые изображения.
Что такое растровая графика
Растровая графика (растр) — это изображение/я построенные из пикселей разного цвета, или по-другому, точек, расположенных в определенной последовательности в виде сетки / сот. Примерно это выглядит так — есть сетка на которой расположено множество точек самых разных цветов, при удалении от нее будет складываться целая картинка.
На скриншоте снизу можно четко увидеть, как растровое изображение формируется из пикселей и представлено в виде графической сетки.
К такой графике также относится и видео, так, как это просто множество растровых картинок, которые идут в определенной последовательности. Все, что отображается не вашем мониторе — представляется в виде растра, даже векторная графика трансформируется в него. Так, как на мониторах устанавливается графическая матрица, которая выводит картинку по пикселям.
Растровое изображение — это набор пикселей, представленных в виде сетки пикселей разных цветов из которых и формируется картинка. Можно дать и такое определение.
Характеристики растровой графики:
Растровые изображения создаются любым фотоаппаратом, камерой, когда вы делаете скриншот или просто в редакторе для компьютера, например, в GIMP.
Важно! Существует и другой вид — векторный, о том, что такое векторная графика, можете прочитать в соответствующей статье.
Достоинства растровой графики — плюсы
1. Можно создать абсолютно любое изображение, какой сложности бы оно не было. Полностью передать цветовую гамму, переходы — градиенты. В отличие от той же векторной графики.
2. Благодаря простоте создания может использоваться везде — в фотоаппаратах, печати, видео и т.д.
3. Быстрая скорость обработки и масштабирования.
4. Поддерживается всеми современными устройствами вывода информации на дисплее.
Недостатки — минусы
1. Может занимать много места если изображение сложное и используется высокая глубина цвета. Еще это зависит от его формата: PMG, JPG, BMP и т.д. Подробнее об этом написано ниже.
2. При масштабировании теряется четкость. Поэтому разрешение так важно.
3. Не вывести на печать на плоттер или это сделать довольно сложно.
Многие думают, что векторная графика намного лучше и занимает куда меньше места — это действует только на несложные изображения, где используется мало деталей. Правильно сохраненный растр тоже занимает немного места. Есть множество различных форматов картинок, которые хорошо сжимают исходник без сильной потери качества. О том, как уменьшить размер фото написано в соответствующей статье.
Форматы растровых изображений
Существует множество различных форматов. Все они имеют разное сжатие, а некоторые и вовсе без него. Рассмотрим только самые часто используемые типы растровых картинок, с которыми вы можете столкнуться.
JPG или JPEG — самый распространенный формат и используемый. Обладает отличными параметрами сжатия за счет усреднения цвета. Его вы можете видеть часто на сайтах, в том числе и на этом. Большинство всех картинок в интернете существуют именно в этом формате.
PNG — распространен для интернета, очень качественный формат. Отлично подходит, если вы хотите сохранить высокое качество или, наоборот, использовать минимум цветов.
BMP — формат операционной системы Виндовс. Обычно вообще без сжатия, поэтому используется редко — потому, что передавать огромные файлы по интернету нет смысла и на жестком диске они занимают много места.
GIF — анимация. Максимум 256 цветов. Раньше пользовался большой популярностью, да и сейчас на многих ресурсах есть. Но, с приходом HTML 5 практически потеряли всю надобность.
TIFF — часто используется для печати. Отличное качество — сохраняет исходные цвета в любом цветовом пространстве. Многие фотоаппараты делают снимки именно в этом формате.
RAW — наилучший формат для качественных снимков. Сохраняет изначальную картинку, которая попадает в объектив. В нем делают фото хорошие камеры. Такие снимки можно очень гибко редактировать. Но, занимают довольно много места.
В заключение
Теперь вы знаете, что это такое растровое изображение и как оно формируется. В следующей статье мы подробно рассмотрим другой важный формат графики — векторный, который используется в полиграфии.
Ра́стровое изображе́ние — представляет собой сетку пикселей или цветных точек (обычно прямоугольную) на компьютерном мониторе, бумаге и других отображающих устройствах и материалах (растр).
Важными характеристиками изображения являются:
Растровую графику редактируют с помощью растровых графических редакторов. Создается растровая графика фотоаппаратами, сканерами, непосредственно в растровом редакторе, также путем экспорта из векторного редактора или в виде Снимок экрана.
Содержание
Достоинства
Недостатки
Из‑за этих недостатков для хранения простых рисунков рекомендуют вместо даже сжатой растровой графики использовать векторную графику.
Форматы
Растровые изображения обычно хранятся в сжатом виде. В зависимости от типа сжатия может быть возможно или невозможно восстановить изображение в точности таким, каким оно было до сжатия (сжатие без потерь или сжатие с потерями соответственно). Так же в графическом файле может храниться дополнительная информация: об авторе файла, фотокамере и её настройках, количестве точек на дюйм при печати и др.
Сжатие без потерь
Использует алгоритмы сжатия, основанные на уменьшении избыточности информации.
Сжатие с потерями
Основано на отбрасывании части информации (как правило наименее воспринимаемой глазом).
Разное
История
Первые вычислительные машины не имели отдельных средств для работы с графикой, однако уже использовались для получения и обработки изображений. Программируя память первых электронных машин, построенную на основе матрицы ламп, можно было получать узоры.
В 1961 году программист С. Рассел возглавил проект по созданию первой компьютерной игры с графикой. Создание игры «Spacewar» («Космические войны») заняло около 200 человеко-часов. Игра была создана на машине PDP-1.
В 1963 году американский учёный Айвен Сазерленд создал программно-аппаратный комплекс Sketchpad, который позволял рисовать точки, линии и окружности на трубке цифровым пером. Поддерживались базовые действия с примитивами: перемещение, копирование и др. По сути, это был первый векторный редактор, реализованный на компьютере. Также программу можно назвать первым графическим интерфейсом, причём она являлась таковой ещё до появления самого термина.
В середине 1960-х гг. появились разработки в промышленных приложениях компьютерной графики. Так, под руководством Т. Мофетта и Н. Тейлора фирма Itek разработала цифровую электронную чертёжную машину. В 1964 году General Motors представила систему автоматизированного проектирования DAC-1, разработанную совместно с IBM.
В 1968 году группой под руководством Константинова Н. Н. была создана компьютерная математическая модель движения кошки. Машина БЭСМ-4, выполняя написанную программу решения дифференциальных уравнений, рисовала мультфильм «Кошечка», который для своего времени являлся прорывом. Для визуализации использовался алфавитно-цифровой принтер. Существенный прогресс компьютерная графика испытала с появлением возможности запоминать изображения и выводить их на компьютерном дисплее.
Всю двумерную компьютерную графику можно разделить на 2 больших класса – векторную и растровую.
Векторная графика – совокупность разнообразных геометрических форм и более сложных объектов, состоящих из прямых, дуг окружностей и кривых Безье. Главная отличительная черта – масштабируемость векторных изображений без потери качества. Однако ее возможности ограничены, в частности, создать фотографическое изображение средствами векторной графики невозможно.
Растровая – двумерный массив «квадратиков» (пикселей) различных цветов, малых настолько, что при взгляде на растровое изображение мы видим не набор пикселей, а целостную картину.
Параметры растрового изображения
Растровое изображение характеризуется двумя важными параметрами – размер и разрешение.
Размер – это размерность массива, количество пикселей по горизонтали и вертикали.
Разрешение – количество пикселей, приходящихся на дюйм (или другую единицу измерения) распечатанного изображения. Таким образом, разрешение связывает между собой размер растрового изображения в пикселях с физическим размером в дюймах или сантиметрах изображения, выведенного на печать. В то же время на отображение на экране монитора разрешение никоим образом не влияет.
Системы представления цвета
Существуют две основные системы представления цвета – RGB и CMYK. Первая применяется в компьютерных мониторах, вторая – при печати на бумаге. Главное их отличие – на экране отсутствие цвета представлено черным цветом, на бумаге – белым. Соответственно, смешению максимального количества цветов на экране соответствет белый, на бумаге – черный. Таким образом, системы противоположны друг другу. В RGB в качестве основных используются красный (Red), зеленый (Green) и синий (Blue) цвета, в CMYK – противоположные им голубой (Cyan), пурпурный (Magenta) и желтый (Yellow). Однако на бумаге из-за несовершенства печатных устройств не удается создать идеально черный цвет путем смешения, поэтому в системе CMYK добавляется еще один базовый цвет – черный (black).
Глубиной цвета называется количество бит, хранящих информацию о цвете, приходящихся на один пиксел изображения. От этого параметра зависит количество используемых в изображении цветов. Скажем, 8-битная глубина цвета – это 2^8 = 256 цветов. Уровень качества, при котором человеческий глаз неспособен отличить компьютерное фотографическое изображение от настоящего – 24 бита, т.е. около 16 миллионов цветов.
Форматы растровой графики для веба
Разумеется, от объема информации о цвете напрямую зависит объем графического файла в байтах. Поэтому необходим компромисс между качеством воспроизведения и объемом графического файла, что достигается, в частности, путем оптимизации графики. В вебе используются 2 основных формата растровой графики – GIF и JPG.
GIF способен хранить информацию о любом количестве цветов от 2 до 256, за счет сокращения количества цветов достигается резкое уменьшение объема файла.
В формате JPG изображение упрощается за счет дробления на прямоугольные участки различного размера, залитые одним цветом или двухцветным градиентом.
Пиксел
Каждый пиксел в растровом изображении имеет строго определенное положение и цвет. Любой объект интерпретируется как набор окрашенных пикселов. При обработке растровых изображений редактируются не конкретные объекты и контуры, а составляющие их группы пикселов. Растровые изображения обеспечивают высокую точность градации цветов и полутонов и хороши для отображения фотографий. Качество растровых изображений зависит от разрешающей способности оборудования, так как любой рисунок – это определенное количество пикселов. Некорректная обработка текста, например, изменение размера, может привести к тому, что границы рисунков получатся неровными, а мелкие детали могут быть потеряны.
Размер и разрешение
Основные характеристики растрового изображения: размер и разрешение.
Число пикселов на единицу длины называется разрешением изображения и измеряется в пикселах на дюйм ppi (pixels per inch) или в точках на дюйм, а dpi (dots per inch) – для монитора, принтера, сканера Она определяет, во сколько пикселов превратиться линия длиной 1 дюйм.
Изображение с большим разрешением содержит больше пикселов, имеющих меньший размер. Величина разрешения в значительной степени определяет качество изображения.
Размер изображения на экране определяет количество пикселов в изображении, размер монитора и его параметры. Большой монитор с экранной матрицей 640х480 имеет более крупные пикселы, чем маленький с той же размерностью. Разрешающая способность PC монитра 96 dpi. При размещении изображении надо это учитывать. Например, изображение с 144 ppi на экране с разрешающей способностью 72 dpi вдвое превышает реальный размер.
Если на мониторе представлено сканированное изображение, то качество закладывается во время сканирования в зависимости от установленного разрешения. Последующее увеличение разрешения в графическом редакторе не приводит к улучшению изображения, т. к. происходит перераспределение данных на большее количество пикселов.
Изображение состоит из конечного числа пиксел. Каждый пиксел на рисунке имеет определенный цвет, обозначенный цифрой.
Например, можно просмотреть изображение по порядку слева направо и сверху вниз и выписывать номера цветов встречающихся пикселов. Получится строка примерно соедующего вида :
Вот эта строка и есть наши оцифрованные данные. Теперь мы можем сжать их (так как несжатые графические данные обычно имеют достаточно большой размер) и сохранить в файл. Кроме того, этими данными графический редактор может манипулировать, реализовывая все самые смелые замыслы Вашей фантазии.
Кодирование цвета
Все пикселы имеют цвет, определенным образом указанный цифрой. А как определить, какая цифра необходима? Есть ряд способов кодирования цвета, которые разделяются на 2 основные группы: индексированные (с палитрой) и полноцветные.
Идея индексированных растров в том, что номер цвета на самом деле является номером «краски», которой закрашен данный пиксел. Поэтому кроме самих цветов пикселов программе необходимо также знать и «палитру» из которой эти цвета выбираются. Этот способ похож на методы настоящего художника, но не очень хорошо подходит для обработки на компьютере, так как программе кроме самих пикселов приходится мучаться еще и с палитрой, подбирая наиболее подходящие цвета.
Второй метод состоит в том, что по номеру цвета мы можем непосредственно определить сам цвет.
Установка этого параметра определяет следующие типы изображений.
Растровое изображение и его увеличенный фрагмент
Пример использования растровой графики: цифровой рисунок (автор изображения: Катя Климович) 
Пример использования растровой графики: фотография
Векторное изображение и его увеличенный фрагмент
