Где используется растровое компьютерное изображение
Известно, что на компьютере изображения представляются в цифровом виде. Цифровое – значит, описано посредством чисел. Это позволяет хранить, просматривать и обрабатывать изображение в графических редакторах.
Принцип формирования изображения в растровом и векторных редакторах кардинально отличаются друг от друга.
В растровом редакторе (Gimp, Adobe Photoshop, Paint) изображение разбивается на квадратные элементы одинакового размера и каждый такой элемент описывается отдельно. Этот квадратный графический элемент называют пикселом (picture element, pixel).
Пиксель – наименьшая составляющая растровой графики. Один пиксель содержит в себе информацию о расположении по оси Х и Y , а так же информацию о цвете и прозрачности (альфа-канал).
Изображения, представленные посредством пикселей, называют растровыми, то есть разложенные на элементы.
Растровое изображение — это файл данных или структура, представляющая собой сетку пикселей на компьютерном мониторе или цветовых точек на бумаге и материалах.
Важными характеристиками для таких изображений являются:
- Количество пикселов - разрешение. Они могут указываться отдельно по ширине и высоте (640х480; 1024х768), но иногда указывается общее количество пикселов.
- Цветовое пространство (цветовая модель) RGB, CMYK, HSV и т.д.
- Количество используемых цветов или глубина цвета (эти характеристики имеют следующую зависимость: N= 2I , где N - количество цветов, а I - глубина цвета)
Разрешение
Разрешение - определяет количество единичных элементов растровой карты, приходящихся на единицу длины изображения.Наиболее распространенная единица измерения – dpi – количество пикселов на одном дюйме длины (1 дюйм = 2,54 см).
Но что да ет разрешение?
1 дюйм практически совпадает с 5ю клетками в тетради и если обвести их и закрасить одну клетку, то разрешение нашего «рисунка» будет 5 dpi .
Теперь уменьшим размер клетки-пикселя в 4 раза, закрасим только четверть клетки, в этом случае разрешение увеличится только в 2 раза, ведь на одну длину теперь приходится 10 клеток-пикселей
Они отличаются принципами формирования изображения при отображении на экране монитора или при печати на бумаге.
В растровой графике изображение представляется в виде набора окрашенных точек. Совокупность таких точек, образующих строки и столбцы, называют растр .
Применение растровой графики: обработка цифровых фотографий, сканированных изображений, создание коллажей, эмблем, логотипов. Растровые изображения чаще не создаются с помощью компьютера, а только обрабатываются. В Интернете используются только растровые изображения.
- Растровые изображения занимают большое количество памяти.
- Резкое ухудшение качества при редактировании изображения.
Векторная графика описывает изображения с использованием прямых и изогнутых линий, называемых векторами, а также параметров, описывающих цвета и расположение.
В отличие от растровой графики в векторной графике изображение строится с помощью математических описаний объектов, окружностей и линий.
Ключевым моментом векторной графики является то, что она использует комбинацию компьютерных команд и математических формул для объекта. Это позволяет компьютерным устройствам вычислять и помещать в нужном месте реальные точки при рисовании этих объектов. Такая особенность векторной графики дает ей ряд преимуществ перед растровой графикой, но в тоже время является причиной ее недостатков.
- Векторная графика не позволяет получать изображения фотографического качества.
- Векторные изображения описываются тысячами команд. В процессе печати эти команды передаются устройству вывода (принтеру). Иногда из–за проблем связи между двумя процессорами принтер не может распечатать отдельные детали рисунков.
Программные средства для работы с фрактальной графикой предназначены для автоматической генерации изображений путем математических расчетов. Создание фрактальной художественной композиции состоит не в рисовании или оформлении, а в программировании.
Фрактальную графику редко применяют для создания печатных или электронных документов, но ее часто используют в развлекательных программах.
В этой статье мы поговорим о том, что такое растровая графика, каковы ее главные характеристики, где она встречается, и в каких форматах чаще всего представлена. Каждый человек ежедневно, так или иначе, сталкивается с этим видом компьютерной графики, поэтому стоит узнать о ней больше.
Разбираемся в понятиях
Начнем с определения такого понятия как растровая графика: это изображения, состоящие из множества мелких квадратиков, собранных в одну прямоугольную сеть.
Квадратиками являются пикселы (их еще называют точками) — наименьшая единица измерения цифровой картинки; и чем их численность выше, тем большее количество деталей содержит файл, а значит, тем лучшего он качества.
Как вы уже и сами догадались, к растровым изображениям в первую очередь можно отнести фотографии. Попробуйте их максимально увеличить, и вы увидите описанные квадратики.
Разница с пиксельной графикой
Несмотря на то, что основной элемент в растровой графике — пикселы, не стоит путать ее с пиксельной графикой. Последняя тоже формируется на их основе, но такие изображения создаются исключительно на компьютере с помощью растровых редакторов. Они имеют настолько малое разрешение, что пикселы четко просматриваются.
Если грубо обобщить, то растровую графику вы можете встретить в реалистичных изображениях, а пиксельную — в сделанных на компе, с четко выраженными квадратиками. Но в сути своей, это одно и тоже.
Отличие от векторной графики
Есть еще один вид компьютерной графики — векторная — от которой вам стоит научиться отличать растровую. Векторные изображения состоят не из точек, а из линий и других примитивных геометрических элементов, формул и вычислений.
Они создаются в специальных программах, и находят применение в написании макетов, чертежей, схем, карт и пр.
При небольшой детализации векторные рисунки имеют гораздо меньший вес, чем растровые. Дело в том, что в файлах первых хранится не полная информация о содержимом, как у вторых, а лишь координаты картинки, по которым она заново воссоздается при открытии.
Допустим, чтобы нарисовать квадрат, вы задаете координаты углов, цвет заполнения и обводки. Закрывая редактор, в файле сохраняются только эти данные. И когда вы снова захотите его открыть, программа воспроизведет согласно им ваши труды.
Также в отличие от растровых картинок, векторные поддаются любому масштабированию без потери качества.
Характеристики растровых изображений
Основными свойствами растровых картинок являются:
- Разрешение. Показывает, сколько пикселов приходится на единицу площади. Измерение чаще всего производится в точках на дюйм — dpi. Чем больше эта цифра, тем качественнее изображение. Для размещения в интернете достаточно 72-100 dpi, а для печати на бумаге — минимум 300 dpi.
- Размер. Не путайте его с предыдущим параметром, как это делают многие. Эта характеристика указывает на общее количество пикселей в изображении или точное — по ширине и высоте. К примеру, картинка на 1600×1200px в общей сложности содержит 1 920 000 точек, что округленно составляет 2 мегапикселя.
Как правило, в фотобанках принимают фото максимум на 4 Мп, а для иллюстрирования — 25 Мп.
- Цветовое пространство. Способ отображения цветов в координатах. То есть каждый цвет представлен точкой, имеющий свое расположение в палитре. Если вы имели дело с Фотошопом, могли заметить, что при выборе какого-то оттенка, выводятся его точные координаты. Об этом и речь.
Цветовая модель бывает таких видов: RGB, CMYK, YCbCr, XYZ и пр.
- Глубина цвета. Вычисляется по формуле: N = 2ᵏ, где N — количество цветов, а k — глубина. Указывает, сколько бит приходится на цвет каждого пиксела. От этого зависит максимальное число оттенков, которое может содержать изображение. Чем оно больше, тем точнее будет картинка.
Плюсы и минусы
Растровая графика обладает такими преимуществами:
Реалистичность. С ее помощью создаются изображения любой сложности, включая множество деталей, плавных переходов от одного оттенка к другому.
- Популярность. Данный вид графики используется повсеместно.
- Возможность автоматизированного ввода информации. Например, когда вы с помощью сканера делаете из реальной фотографии цифровую копию.
- Быстрая обработка сложных картинок. Правда, за исключением случаев, когда требуется сильное увеличение.
- Адаптация под различные устройства ввода-вывода (мониторы, принтеры, фотоаппараты, телефоны и пр.), а также под множество программ для просмотра. Кстати, создать и редактировать растровые файлы вы можете в таких прогах как Adobe PhotoShop, Corel PhotoPaint, Ulead PhotoImpact GIMP и т. п.
Есть и отрицательные стороны:
- Большой вес изображений.
- Невозможность увеличения без снижения качества (проявляются пикселы);
- Невозможность уменьшения без потери деталей.
Форматы растровых картинок
Форматом, по сути, является то, что вы видите в названии изображения после точки (.jpg, .jpg, .raw и пр.). Также его еще называют расширением, которое многие путают с разрешением из-за схожести в звучании.
Расскажу об основных форматах растровой графики:
- JPEG (Joint Photographic Experts Group — наименование производителя).Наиболее распространенное расширение. Именно в нем чаще всего сохраняются фотографии. Но JPEG не годится для хранения чертежей и других рисунков с резкими переходами, так как в них будет проявляться сильный контраст. Также не сохраняйте в нем недоделанные до конца работы, потому что при каждом новом редактировании будете теряться качество.
- RAW. Переводится с английского как «сырой», что отображает суть этого формата. В нем чаще всего снимают профессиональные фотографы, чтобы потом можно было проводить глубокую обработку кадров. RAW является как бы отпечатком в палитре RGB (красном, зеленом и синем канале) на матрице фотоаппарата.
При выводе на компьютер через специальную программу этот «негатив» указывает, с какой интенсивностью нужно передать упомянутые цвета для тех или иных пикселов, определяет баланс белого, хранит настройки фототехники в момент съемки экспортируемого кадра и пр.
- TIFF (Tagged Image File Format). Альтернатива предыдущему варианту. Некоторые фотоаппараты, которые не поддерживают RAW, могут делать кадры в этом формате. В нем сохраняются изображения очень высокого качества с любыми цветовыми моделями. Но за это приходиться платить слишком большим весом файлов (от 8 до 20 Мб).
- GIF (Graphics Interchange Format). Еще одно из наиболее популярных расширений, хоть уже и устаревших, потому что поддерживает анимацию и хорошо сжимает файлы в размере. Но имеет и минус — отображает малое количество цветов (до 256).
Все больше вытесняет предыдущий формат, так как использует тот же алгоритм сжатия, но при этом не снижает качество и отображает все цвета.
Есть два вида картинок: в одной миллионы цветов и полный фотореализм; вторую можно увеличивать и уменьшать до бесконечности без потери качества. Вот как это всё работает.
👉 Как и большинство статей в журнале «Код», эта статья для начинающих. Юные Артемии, вам не сюда. Лучше порешайте наши задачки в паблике.
Растровая графика
Растр — это множество мелких точек, из которых может состоять изображение. В случае с компьютером растр — это пиксели, из которых состоит фотография.
Например, когда вы фотографируете на смартфон или цифровой фотоаппарат, вы получаете растровое изображение, которое состоит из множества отдельных точек. Если смотреть на экране телефона или компьютера, они не видны, но если сильно увеличить, то эти точки станут заметны.
Чем сильнее увеличим фотографию, тем больше видны пиксели
👉 У растровой графики есть два главных параметра: размер изображения и глубина цвета.
Размер изображения — это количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличивать картинку без потери качества. Например, возьмём одну и ту же фотографию, но у одной будет размер 100 на 200 пикселей, а у другой — 1000 на 2000 пикселей:
В одном и том же масштабе вторая картинка смотрится гораздо лучше, потому что в ней больше пикселей, которые передают больше деталей
Общее правило такое: чем больше пикселей на фотографии, тем больше мелких деталей можно на ней разглядеть. Именно поэтому производители камер и смартфонов постоянно увеличивают количество пикселей у себя в устройствах.
Глубина цвета. Представьте, что ваша камера в телефоне может различать только 16 цветов. В этом случае фотографии получались бы такими:
В целом понятно, что тут изображено, но выглядит странно
Это и есть глубина цвета — сколько разных оттенков присутствует на изображении. В нашем примере 16 цветов — это 4 бита, потому что 2 в 4 степени = 16. Сравните, как выглядит та же фотография с глубиной цвета 16 и 8 бит:
Чем больше глубина цвета, тем плавнее цветовые переходы на фото
Главное применение растровой графики — фотографии и изображения с большой глубиной цвета и множеством деталей. Фотографии — это растр. Рисунки от руки — чаще всего растр. Если на изображении природа, люди, водичка или что угодно со множеством деталей, скорее всего, такое изображение будет растровым.
Компьютеры классно справляются с растровыми изображениями, потому что растр довольно прост в обработке. Компьютер ставит подряд нужное количество пикселей и красит их в нужные цвета. Операция простая, математика минимальная, просто нужно повторить её много раз. Компьютеры в этом сильны.
Векторная графика
В отличие от растровой графики, векторная состоит не из пикселей, а из математических формул. В такой графике каждое изображение нарисовано с помощью отдельных элементов:
- точек,
- эллипсов,
- прямоугольников,
- многоугольников,
- кривых любой сложности.
Чтобы это нарисовать, у каждого элемента есть свои параметры, например:
- координаты,
- цвет,
- размер,
- толщина линии,
- толщина контура,
- цвет контура,
- прозрачность,
- радиус кривизны и так далее.
Если компьютеру нужно нарисовать звёздное небо, мы можем дать ему такие команды:
- Создай пустой рисунок.
- Залей его градиентом сверху вниз от тёмно-синего к синему.
- Поставь точку по координатам 10,8.
- Поставь точку по координатам 14,9.
- Поставь точку по координатам 19,31.
- … добавляем ещё 113 звёзд.
В итоге получим такой рисунок:
Так как мы не привязаны к размеру изображения, то по этим формулам компьютер может нам отрисовать звёздное небо любого размера — от обоев на телефон до рекламного билборда 4 на 6 метров. При этом при увеличении потери качества не происходит — компьютер просто получает от нас финальный размер изображения и рисует всё в нужных пропорциях.
👉 Сила векторной графики — в возможности бесконечно увеличивать и уменьшать размер изображения без потери качества. При изменении размера компьютер сразу пересчитывает все формулы и отрисовывает картинку заново. Поэтому при увеличении векторной графики не появляются пиксели и размытие, даже если нам нужно увеличить одну звезду в 100 раз:
Минус векторной графики в том, что в ней очень сложно создать фотореалистичное изображение. Дело в том, что каждая деталь, каждый новый цвет и каждый цветовой переход — это новая формула. Чтобы построить фотореалистичную картинку, нужно очень много формул, которые будут сложно обсчитываться, и всё равно по деталям можно понять, что перед нами не фотография:
Каждый элемент на этой картинке задаётся своей формулой. Здесь много деталей, но всё равно видно, что это не фотография, а векторная иллюстрация То же самое изображение в кривых
Векторная графика чаще всего применяется там, где не нужна фотореалистичность — иконки, пиктограммы, рекламные материалы. Главная задача такого изображения — чтобы его можно было увеличить или уменьшить как угодно без потери качества.
Что дальше
Будем осваивать векторную графику в CSS. Заодно потренируемся наводить красоту на страницах и попрактикуемся в коде.
Читайте также: