Ра́стровое изображе́ние — представляет собой сетку пикселей или цветных точек (обычно прямоугольную) на компьютерном мониторе, бумаге и других отображающих устройствах и материалах (растр).
Важными характеристиками изображения являются:
Растровую графику редактируют с помощью растровых графических редакторов. Создается растровая графика фотоаппаратами, сканерами, непосредственно в растровом редакторе, также путем экспорта из векторного редактора или в виде Снимок экрана.
Содержание
Достоинства
Недостатки
Из‑за этих недостатков для хранения простых рисунков рекомендуют вместо даже сжатой растровой графики использовать векторную графику.
Форматы
Растровые изображения обычно хранятся в сжатом виде. В зависимости от типа сжатия может быть возможно или невозможно восстановить изображение в точности таким, каким оно было до сжатия (сжатие без потерь или сжатие с потерями соответственно). Так же в графическом файле может храниться дополнительная информация: об авторе файла, фотокамере и её настройках, количестве точек на дюйм при печати и др.
Сжатие без потерь
Использует алгоритмы сжатия, основанные на уменьшении избыточности информации.
Сжатие с потерями
Основано на отбрасывании части информации (как правило наименее воспринимаемой глазом).
Разное
История
Первые вычислительные машины не имели отдельных средств для работы с графикой, однако уже использовались для получения и обработки изображений. Программируя память первых электронных машин, построенную на основе матрицы ламп, можно было получать узоры.
В 1961 году программист С. Рассел возглавил проект по созданию первой компьютерной игры с графикой. Создание игры «Spacewar» («Космические войны») заняло около 200 человеко-часов. Игра была создана на машине PDP-1.
В 1963 году американский учёный Айвен Сазерленд создал программно-аппаратный комплекс Sketchpad, который позволял рисовать точки, линии и окружности на трубке цифровым пером. Поддерживались базовые действия с примитивами: перемещение, копирование и др. По сути, это был первый векторный редактор, реализованный на компьютере. Также программу можно назвать первым графическим интерфейсом, причём она являлась таковой ещё до появления самого термина.
В середине 1960-х гг. появились разработки в промышленных приложениях компьютерной графики. Так, под руководством Т. Мофетта и Н. Тейлора фирма Itek разработала цифровую электронную чертёжную машину. В 1964 году General Motors представила систему автоматизированного проектирования DAC-1, разработанную совместно с IBM.
В 1968 году группой под руководством Константинова Н. Н. была создана компьютерная математическая модель движения кошки. Машина БЭСМ-4, выполняя написанную программу решения дифференциальных уравнений, рисовала мультфильм «Кошечка», который для своего времени являлся прорывом. Для визуализации использовался алфавитно-цифровой принтер. Существенный прогресс компьютерная графика испытала с появлением возможности запоминать изображения и выводить их на компьютерном дисплее.
Известно, что на компьютере изображения представляются в цифровом виде. Цифровое – значит, описано посредством чисел. Это позволяет хранить, просматривать и обрабатывать изображение в графических редакторах.
Принцип формирования изображения в растровом и векторных редакторах кардинально отличаются друг от друга.
В растровом редакторе (Gimp, Adobe Photoshop, Paint) изображение разбивается на квадратные элементы одинакового размера и каждый такой элемент описывается отдельно. Этот квадратный графический элемент называют пикселом (picture element, pixel).
Изображения, представленные посредством пикселей, называют растровыми, то есть разложенные на элементы.
Растровое изображение — это файл данных или структура, представляющая собой сетку пикселей на компьютерном мониторе или цветовых точек на бумаге и материалах.
Важными характеристиками для таких изображений являются:
Разрешение
Наиболее распространенная единица измерения – dpi – количество пикселов на одном дюйме длины (1 дюйм = 2,54 см).
Но что да ет разрешение?
Теперь уменьшим размер клетки-пикселя в 4 раза, закрасим только четверть клетки, в этом случае разрешение увеличится только в 2 раза, ведь на одну длину теперь приходится 10 клеток-пикселей
Растровая графика была впервые запатентована компанией Texas Instruments в 1970-х годах и теперь является повсеместной формой представления цифровых изображений. Фотографии с цифровой камеры являются примером растровой графики.
Характеристики растровой графики
Качество изображения и размер файла
Качество растрового изображения определяется общим количеством пикселей(размером изображения) и объемом информации, хранящейся в каждом пикселе(глубиной цвета). Например, изображение с 24 битами информации о цвете(стандарт для большинства дисплеев 21-го века) может показывать более мягкое затенение, чем изображение, имеющее только 16 бит информации на пиксель, но оно также не будет показывать более мягкое затенение, чем изображение с 48 битами на пиксель. Точно так же изображение с соотношением сторон 640 на 480 пикселей(содержащее 307 200 пикселей) будет выглядеть неровным и грубым по сравнению с изображением размером 1280 еа 1024 пикселей (содержащее 1310 720 пикселей).
Поскольку графика, сохраненная в растровой форме, часто представляет собой большой объем данных, часто используется соответствующий метод сжатия, чтобы уменьшить объём памяти. Сжатие без потерь растровых изображений возможно с такими форматами файлов, как PNG, TIFF или JPEG 2000 с потерями. Можно провести обратный процесс и получить несжатую графику, не отличающуюся от оригинала. Однако некоторые форматы файлов(например JPEG) используют сжатие с потерями, которое работает путем моделирования значений отдельных пикселей с параметризованными математическими формулами, что позволяет получить выходной файл гораздо меньшего размера за счет исключения некоторых деталей.
Размеры и разрешение
Размер растрового изображения нельзя увеличить без уменьшения его резкости. Это функция, неизвестная векторной графике, которую можно легко масштабировать в соответствии с устройством, на котором отображается изображение. Однако растровая графика более полезна, чем векторная графика, для сохранения фотографий и реалистичных изображений, тогда как векторная графика чаще используется для изображений, состоящих из геометрических фигур, и для представления текста(включая таблицы и формулы).
Сегодня большинство компьютерных мониторов отображают от 72 до 130 пикселей на дюйм(экраны современных телефонов и планшетов часто имеют разрешение более 300 пикселей на дюйм), в то время как принтеры могут печатать с разрешением 1200 точек на дюйм(dpi) или выше. Определение наиболее подходящего разрешения изображения для данного разрешения принтера может быть очень трудным, поскольку распечатанный документ может содержать больше деталей (может иметь более высокое разрешение), чем то, что отображается на экране монитора.
Программой, традиционно считающейся редактором растровой графики является Adobe Photoshop, отличается самым максимальным перечнем инструментов и возможностей по работе с растровами изображениями. Научиться работать с растровой графикой в программе Фотошоп, вы можете у нас на курсах:
Есть два вида картинок: в одной миллионы цветов и полный фотореализм; вторую можно увеличивать и уменьшать до бесконечности без потери качества. Вот как это всё работает.
👉 Как и большинство статей в журнале «Код», эта статья для начинающих. Юные Артемии, вам не сюда. Лучше порешайте наши задачки в паблике.
Растровая графика
Растр — это множество мелких точек, из которых может состоять изображение. В случае с компьютером растр — это пиксели, из которых состоит фотография.
Например, когда вы фотографируете на смартфон или цифровой фотоаппарат, вы получаете растровое изображение, которое состоит из множества отдельных точек. Если смотреть на экране телефона или компьютера, они не видны, но если сильно увеличить, то эти точки станут заметны.
Чем сильнее увеличим фотографию, тем больше видны пиксели
👉 У растровой графики есть два главных параметра: размер изображения и глубина цвета.
Размер изображения — это количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличивать картинку без потери качества. Например, возьмём одну и ту же фотографию, но у одной будет размер 100 на 200 пикселей, а у другой — 1000 на 2000 пикселей:
В одном и том же масштабе вторая картинка смотрится гораздо лучше, потому что в ней больше пикселей, которые передают больше деталей
Общее правило такое: чем больше пикселей на фотографии, тем больше мелких деталей можно на ней разглядеть. Именно поэтому производители камер и смартфонов постоянно увеличивают количество пикселей у себя в устройствах.
Глубина цвета. Представьте, что ваша камера в телефоне может различать только 16 цветов. В этом случае фотографии получались бы такими:
В целом понятно, что тут изображено, но выглядит странно
Это и есть глубина цвета — сколько разных оттенков присутствует на изображении. В нашем примере 16 цветов — это 4 бита, потому что 2 в 4 степени = 16. Сравните, как выглядит та же фотография с глубиной цвета 16 и 8 бит:
Чем больше глубина цвета, тем плавнее цветовые переходы на фото
Главное применение растровой графики — фотографии и изображения с большой глубиной цвета и множеством деталей. Фотографии — это растр. Рисунки от руки — чаще всего растр. Если на изображении природа, люди, водичка или что угодно со множеством деталей, скорее всего, такое изображение будет растровым.
Компьютеры классно справляются с растровыми изображениями, потому что растр довольно прост в обработке. Компьютер ставит подряд нужное количество пикселей и красит их в нужные цвета. Операция простая, математика минимальная, просто нужно повторить её много раз. Компьютеры в этом сильны.
Векторная графика
В отличие от растровой графики, векторная состоит не из пикселей, а из математических формул. В такой графике каждое изображение нарисовано с помощью отдельных элементов:
Чтобы это нарисовать, у каждого элемента есть свои параметры, например:
Если компьютеру нужно нарисовать звёздное небо, мы можем дать ему такие команды:
В итоге получим такой рисунок:
Избражение: wallpapersafari.com
Так как мы не привязаны к размеру изображения, то по этим формулам компьютер может нам отрисовать звёздное небо любого размера — от обоев на телефон до рекламного билборда 4 на 6 метров. При этом при увеличении потери качества не происходит — компьютер просто получает от нас финальный размер изображения и рисует всё в нужных пропорциях.
👉 Сила векторной графики — в возможности бесконечно увеличивать и уменьшать размер изображения без потери качества. При изменении размера компьютер сразу пересчитывает все формулы и отрисовывает картинку заново. Поэтому при увеличении векторной графики не появляются пиксели и размытие, даже если нам нужно увеличить одну звезду в 100 раз:
Минус векторной графики в том, что в ней очень сложно создать фотореалистичное изображение. Дело в том, что каждая деталь, каждый новый цвет и каждый цветовой переход — это новая формула. Чтобы построить фотореалистичную картинку, нужно очень много формул, которые будут сложно обсчитываться, и всё равно по деталям можно понять, что перед нами не фотография:
Каждый элемент на этой картинке задаётся своей формулой. Здесь много деталей, но всё равно видно, что это не фотография, а векторная иллюстрация То же самое изображение в кривых
Векторная графика чаще всего применяется там, где не нужна фотореалистичность — иконки, пиктограммы, рекламные материалы. Главная задача такого изображения — чтобы его можно было увеличить или уменьшить как угодно без потери качества.
‘ src=’https://thecode.media/wp-content/uploads/2021/01/image9.png’ alt=’Векторная графика’> Иконки — Сергей Чикин
Что дальше
Будем осваивать векторную графику в CSS. Заодно потренируемся наводить красоту на страницах и попрактикуемся в коде.
Растровая графика представляет собой изображения, которые строятся из пикселей разного цвета, расположенных в определенной последовательности на сетке.
Такой вид графики используется повсеместно и является главным. Если вы работаете в сфере дизайна, графики или чего-то близкого по духу, то вам точно следует знать, что это такое.
В предыдущей публикации было подробно рассмотрено, что такое пиксель, сегодня мы рассмотрим, что такое растр, разберем это понятие и посмотрим на примерах растровые изображения.
Что такое растровая графика
Растровая графика (растр) — это изображение/я построенные из пикселей разного цвета, или по-другому, точек, расположенных в определенной последовательности в виде сетки / сот. Примерно это выглядит так — есть сетка на которой расположено множество точек самых разных цветов, при удалении от нее будет складываться целая картинка.
На скриншоте снизу можно четко увидеть, как растровое изображение формируется из пикселей и представлено в виде графической сетки.
К такой графике также относится и видео, так, как это просто множество растровых картинок, которые идут в определенной последовательности. Все, что отображается не вашем мониторе — представляется в виде растра, даже векторная графика трансформируется в него. Так, как на мониторах устанавливается графическая матрица, которая выводит картинку по пикселям.
Растровое изображение — это набор пикселей, представленных в виде сетки пикселей разных цветов из которых и формируется картинка. Можно дать и такое определение.
Характеристики растровой графики:
Растровые изображения создаются любым фотоаппаратом, камерой, когда вы делаете скриншот или просто в редакторе для компьютера, например, в GIMP.
Важно! Существует и другой вид — векторный, о том, что такое векторная графика, можете прочитать в соответствующей статье.
Достоинства растровой графики — плюсы
1. Можно создать абсолютно любое изображение, какой сложности бы оно не было. Полностью передать цветовую гамму, переходы — градиенты. В отличие от той же векторной графики.
2. Благодаря простоте создания может использоваться везде — в фотоаппаратах, печати, видео и т.д.
3. Быстрая скорость обработки и масштабирования.
4. Поддерживается всеми современными устройствами вывода информации на дисплее.
Недостатки — минусы
1. Может занимать много места если изображение сложное и используется высокая глубина цвета. Еще это зависит от его формата: PMG, JPG, BMP и т.д. Подробнее об этом написано ниже.
2. При масштабировании теряется четкость. Поэтому разрешение так важно.
3. Не вывести на печать на плоттер или это сделать довольно сложно.
Многие думают, что векторная графика намного лучше и занимает куда меньше места — это действует только на несложные изображения, где используется мало деталей. Правильно сохраненный растр тоже занимает немного места. Есть множество различных форматов картинок, которые хорошо сжимают исходник без сильной потери качества. О том, как уменьшить размер фото написано в соответствующей статье.
Форматы растровых изображений
Существует множество различных форматов. Все они имеют разное сжатие, а некоторые и вовсе без него. Рассмотрим только самые часто используемые типы растровых картинок, с которыми вы можете столкнуться.
JPG или JPEG — самый распространенный формат и используемый. Обладает отличными параметрами сжатия за счет усреднения цвета. Его вы можете видеть часто на сайтах, в том числе и на этом. Большинство всех картинок в интернете существуют именно в этом формате.
PNG — распространен для интернета, очень качественный формат. Отлично подходит, если вы хотите сохранить высокое качество или, наоборот, использовать минимум цветов.
BMP — формат операционной системы Виндовс. Обычно вообще без сжатия, поэтому используется редко — потому, что передавать огромные файлы по интернету нет смысла и на жестком диске они занимают много места.
GIF — анимация. Максимум 256 цветов. Раньше пользовался большой популярностью, да и сейчас на многих ресурсах есть. Но, с приходом HTML 5 практически потеряли всю надобность.
TIFF — часто используется для печати. Отличное качество — сохраняет исходные цвета в любом цветовом пространстве. Многие фотоаппараты делают снимки именно в этом формате.
RAW — наилучший формат для качественных снимков. Сохраняет изначальную картинку, которая попадает в объектив. В нем делают фото хорошие камеры. Такие снимки можно очень гибко редактировать. Но, занимают довольно много места.
В заключение
Теперь вы знаете, что это такое растровое изображение и как оно формируется. В следующей статье мы подробно рассмотрим другой важный формат графики — векторный, который используется в полиграфии.
Чем сильнее увеличим фотографию, тем больше видны пиксели
В одном и том же масштабе вторая картинка смотрится гораздо лучше, потому что в ней больше пикселей, которые передают больше деталей
В целом понятно, что тут изображено, но выглядит странно
Чем больше глубина цвета, тем плавнее цветовые переходы на фото
Избражение: wallpapersafari.com
Каждый элемент на этой картинке задаётся своей формулой. Здесь много деталей, но всё равно видно, что это не фотография, а векторная иллюстрация 
То же самое изображение в кривых
