Что такое разрешение растрового изображения
Размер растрового изображения и его разрешение
Однако это правило справедливо только для этапа создания растрового изображения с помощью технических средств, коих как известно всего 2 — фотоаппарат и сканер. То есть для максимизации качества и детализации растрового изображения фотографировать и сканировать желательно в максимальном из имеющихся в аппарате разрешений. Именно на этом начальном этапе закладывается уровень детализации изображения. И последующее увеличение разрешения, например в программе Adobe Photoshop, не способно увеличить реальную детализацию изображения. Посудите сами — разве программа сможет восстановить утраченные детали, то есть добавить новую изобразительную информацию? Очевидно, что она сможет только перераспределить уже имеющиеся данные на большее число пикселей. В этом случае происходит не улучшение качества изображения, а скорее наоборот — ухудшение, например, резкости.
Тем не менее, возникает резонный вопрос — а для чего тогда нужна команда Фотошопа «Размер изображения» (Меню «Изображение»)?
А нужна она прежде всего для уменьшения пиксельного размера изображения, которое чаще всего необходимо при размещении фотографии в Internet. Но об этом есть отдельная статья. Подготовка фотографий для публикации в WEB. 
Нам же нужно обсудить еще понятие масштаба.
Прежде всего следует иметь в виду, что как устройства получения растровых изображений (устройства ввода), так и устройства вывода растровых изображений (мониторы и принтеры), также имеют пиксельную (растровую) природу. И разрешение всех этих устройств (и ввода и вывода) задаётся при их разработке и производстве. И увеличить его, больше чем оно было задано изначально, невозможно. И, естественно, разрешение всех этих приборов и самого растрового изображения могут быть весьма различны.
Для того чтобы не запутаться в этом разнообразии мы определим следующие понятия:
1. Пиксель — это мельчайший элемент растрового изображения.
2. Видеопиксель — это мельчайший элемент монитора.
3. Точка — это мельчайший элемент напечатанного на бумаге принтером изображения.
4. Масштаб — это соотношение разрешения растрового изображения и монитора. Отображается масштаб в левом нижнем углу рабочего экрана Фотошопа (см картинку выше 16,67% — это как раз масштаб). Измеряется в процентах. 100% масштаб — это когда один пиксель растрового изображения отображается одним видеопикселем монитора. При масштабе менее 100% происходит сжатие (интерполяция) изображения. Растягивание изображения с масштабом более 100% называют экстраполяцией. Интерполяция и, особенно, экстраполяция могут существенно ухудшить качество выводимого на монитор изображения. Поэтому только при масштабе 100% можно оценивать его резкость, поскольку изображение отображается при этом без искажений.
При этом надо иметь в виду следующие простые эмпирические закономерности:
1. Сам файл растрового изображения не имеет никакого разрешения, поскольку файл в компьютере не имеет физического размера, измеряемого в единицах длины — дюймах, метрах, сантиметрах или миллиметрах.
2. Говорить о разрешении растрового изображения можно только применительно к его выводу на техническим устройстве, которое только и обладает заданным на заводе максимальным разрешением, которое можно уменьшить, но увеличить нельзя.
3. В силу своей различной физической природы (светимости) пиксели монитора в 3 раза хуже различимы, чем точки напечатанные на бумаге. Поэтому разрешение изображения для печати должно быть в 3 раза больше, чем разрешение изображения для публикации в Интернете.
4. Нормальное разрешение монитора от 72 до 150 dpi. У мониторов телефонов и планшетов оно может быть и еще больше, но это связано с тем, что телефон мы можем подносить к глазам существенно ближе, чем монитор. Кроме того рост разрешения имеет и часто и маркетинговый характер и не подтвержден технической необходимостью.
5. Нормальное разрешение для печати, которое гарантирует неразличимость точек невооруженным глазом, составляет 300dpi. Если изображение будет напечатано довольно крупным размером, например 300*450 мм, то у такого изображения возможно снижение разрешения до 200dpi, поскольку рассматривать его будут скорее всего с расстояния не менее 0,5м. Для более крупных изображений, например с размером длинной стороны более 1 метра (фото-обои) можно уменьшить разрешение и до 100dpi, поскольку вряд ли это изображение будут рассматривать с расстояния ближе сем 1 метр.
Размеры растровых изображений: пиксели, DPI, PPI, сантиметры — вы ничего не путаете?
Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.
Начнём с главного: растровые изображения состоят из пикселей. На этом можно было закончить данную статью, но не всем этого достаточно, поэтому поговорим о заблуждениях и мифах, которые я встречал на практике.
DPI, PPI и изменение размеров
Самое частое заблуждение — использование единиц DPI (dots per inch — точек на дюйм) и PPI (pixels per inch — пикселей на дюйм). На самом деле эти единицы относятся к принтерам и сканерам соответственно. Также их можно применять в характеристиках экранов. По сути это коэффициенты для перевода между физическими размерами в аналоге (в сантиметрах или дюймах) и размерами в пикселях для цифрового изображения.
Например, изображение в 100 пикселей, распечатанное с разрешением 100 DPI будет иметь размер 1 дюйм. Всё просто и понятно.
Однако, при изменении размеров в графических редакторах нам предлагают указать размеры в удобных нам измерениях, в том числе в DPI. Здесь и начинается путаница.
На самом деле физические размеры изображения (в сантиметрах, дюймах и т.д.) и значение DPI это всего лишь мета-информация в свойствах файла. Но редактор может использовать эти значения как средство указания требуемых размеров в пикселях.
Допустим, у нас изображение размером 3000 пикселей (квадратное), у которого стоит значение 300 DPI. Получаем: 3000 пикселей / 300 DPI = 10 дюймов. А теперь заходим в редактор (Photoshop) и изменяем значение DPI на 600. Что мы получим? А это зависит от галки «Resample». Если она стоит, мы получим upsampling (увеличение) изображения до 6000 пикселей. Если не стоит, то размер в дюймах станет 5 вместо 10.
Таким образом, для веб-разработки все значения физических размеров (DPI, сантиметры, дюймы и т.д.) можно смело игнорировать и смотреть исключительно на размеры в пикселях.
DPI/PPI экранов
Здесь мы подошли к вопросу разрешения и плотности пикселей экранов. Корректно эта плотность обозначается как PPI (pixels per inch) и показывает, сколько пикселей может быть отображено на одном дюйме экрана.
Здесь часто возникают мифические 72 и 96 PPI, которые должны показывать «стандартную» плотность пикселей для экранов. Для задач отображения графики в вебе они бесполезны. При этом реальная плотность пикселей экрана может быть совсем другой: типично что-то около 120 PPI (можете измерить и посчитать для своего экрана).
Но мы помним, что растровые картинки измеряются только в пикселях и никак иначе. Зачем мы вообще говорим о PPI экранов? Потому что есть «Retina» или «HiDPI» экраны.
Retina и HiDPI экраны
Такие дисплеи широко распространены в мобильных устройствах и дорогих ноутбуках. По сути это количественное увеличение пикселей при сохранении физических размеров экрана (например, 5 дюймов по диагонали и 330 PPI).
Для нас, как веб-разработчиков это значит появление разных пикселей в браузере: CSS-пикселей (которые мы обычно указываем в размерах элементов) и физических пикселей (реальных пикселей на экране). Формула такая: Физические пиксели = CSS-пиксели * DPR.
DPR это device pixel ratio — коэффициент перевода CSS-пикселей в физические.
При размещении картинки мы можем написать тег img с размерами 20px, а картинка будет 40 пикселей. При этом на экране с DPR=2,0 мы увидим все пиксели картинки. Но в этой ситуации нас абсолютно не волнуют реальные значения PPI экрана.
При этом мы можем использовать картинки с высокой плотностью пикселей и для обычных экранов, браузер сам отмасштабирует изображение. И опять, DPI и PPI здесь ни при чем, а картинки измеряются в пикселях. Как их показать будет решать браузер, у которого уже есть два вида пикселей.
Вот и вся история, хотя я конечно ничего не говорил об адаптивных картинках, способах оптимизации их отдачи и client hints. Но это другая история.
Что такое разрешение растрового изображения
Всю двумерную компьютерную графику можно разделить на 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 основные группы: индексированные (с палитрой) и полноцветные.
Идея индексированных растров в том, что номер цвета на самом деле является номером «краски», которой закрашен данный пиксел. Поэтому кроме самих цветов пикселов программе необходимо также знать и «палитру» из которой эти цвета выбираются. Этот способ похож на методы настоящего художника, но не очень хорошо подходит для обработки на компьютере, так как программе кроме самих пикселов приходится мучаться еще и с палитрой, подбирая наиболее подходящие цвета.
Второй метод состоит в том, что по номеру цвета мы можем непосредственно определить сам цвет.
Установка этого параметра определяет следующие типы изображений.
Разрешение (компьютерная графика)
Разреше́ние — величина, определяющая количество точек (элементов растрового изображения) на единицу площади (или единицу длины). Термин обычно применяется к изображениям в цифровой форме, хотя его можно применить, например, для описания уровня грануляции фотопленки, фотобумаги или иного физического носителя. Более высокое разрешение (больше элементов) типично обеспечивает более точные представления оригинала. Другой важной характеристикой изображения является разрядность цветовой палитры.
Как правило, разрешение в разных направлениях одинаково, что даёт пиксель квадратной формы. Но это не обязательно — например, горизонтальное разрешение может отличаться от вертикального, при этом элемент изображения (пиксель) будет не квадратным, а прямоугольным.
Содержание
Разрешение изображения
Растровая графика
При выводе изображения на поверхность экрана или бумаги, оно занимает прямоугольник определённого размера. Для оптимального размещения изображения на экране необходимо согласовывать количество точек в изображении, пропорции сторон изображения с соответствующими параметрами устройства отображения. Если пикселы изображения выводятся пикселами устройства вывода один к одному, размер будет определяться только разрешением устройства вывода. Соответственно, чем выше разрешение экрана, тем больше точек отображается на той же площади и тем менее зернистой и более качественной будет ваша картинка. При большом количестве точек, размещённом на маленькой площади, глаз не замечает мозаичности рисунка. Справедливо и обратное: малое разрешение позволит глазу заметить растр изображения («ступеньки»). Высокое разрешение изображения при малом размере плоскости отображающего устройства не позволит вывести на него всё изображение, либо при выводе изображение будет «подгоняться», например для каждого отображаемого пиксела будут усредняться цвета попадающей в него части исходного изображения. При необходимости крупно отобразить изображение небольшого размера на устройстве с высоким разрешением приходится вычислять цвета промежуточных пикселей. Изменение фактического количества пикселей изображения называется передискретизация, и для неё существуют целый ряд алгоритмов разной сложности.
При выводе на бумагу такие изображения преобразуются под физические возможности принтера: проводится цветоделение, масштабирование и растеризация для вывода изображения красками фиксированного цвета и яркости, доступными принтеру. Принтеру для отображения цвета разной яркости и оттенка приходится группировать несколько меньшего размера точек доступного ему цвета, например один серый пиксел такого исходного изображения, как правило, на печати представляется несколькими маленькими чёрными точками на белом фоне бумаги. В случаях, не касающихся профессиональной допечатной подготовки, этот процесс производится с минимальным вмешательством пользователя, в соответствии с настройками принтера и желаемым размером отпечатка. Изображения в форматах, получаемых при допечатной подготовке и рассчитанные на непосредственный вывод печатающим устройством, для полноценного отображения на экране нуждаются в обратном преобразовании.
Большинство форматов графических файлов позволяют хранить данные о желаемом масштабе при выводе на печать, то есть о желаемом разрешении в dpi (англ. dots per inch — эта величина говорит о каком-то количестве точек на единицу длины, например 300 dpi означает 300 точек на один дюйм). Это исключительно справочная величина. Как правило, для получения распечатка фотографии, который предназначен для рассматривания с расстояния порядка 20-30 сантиметров, достаточно разрешения 300 dpi. Исходя из этого можно прикинуть, какого размера отпечаток можно получить из имеющегося изображения или какого размера изображение надо получить, чтоб затем сделать отпечаток нужного размера.
Например, надо напечатать с разрешением в 300 dpi изображение на бумаге размером 10×10 см. Переведя размер в дюймы получим 3,9×3,9 дюймов. Теперь, умножив 3,9 на 300 и получаем размер фотографии в пикселях: 1170×1170. Таким образом, для печати изображения приемлемого качества размером 10×10 см, размер исходного изображения должен быть не менее 1170×1170 пикселей.
Для обозначения разрешающей способности различных процессов преобразования изображений (сканирование, печать, растеризация и т. п.) используют следующие термины:
По историческим причинам величины стараются приводить к dpi, хотя с практической точки зрения ppi более однозначно характеризует для потребителя процессы печати или сканирования. Измерение в lpi широко используется в полиграфии. Измерение в spi используется для описания внутренних процессов устройств или алгоритмов.
Значение разрядности цвета
Для создания реалистичного изображения средствами компьютерной графики цвет иногда оказывается важнее (высокого) разрешения, поскольку человеческий глаз воспринимает картинку с большим количеством цветовых оттенков как более правдоподобную. Вид изображения на экране напрямую зависит от выбранного видеорежима, основу которого составляют три характеристики: кроме собственно разрешения (кол-ва точек по горизонтали и вертикали), отличаются частота обновления изображения (Гц) и количество отображаемых цветов (цветорежим или разрядность цвета)). Последний параметр (характеристику) часто также называют разрешение цвета, или частота разрешения (частотность или разрядность гаммы) цвета.
Разница между 24- и 32-разрядным цветом на глаз отсутствует, потому как в 32-разрядном представлении 8 разрядов просто не используются, облегчая адресацию пикселов, но увеличивая занимаемую изображением память, а 16-разрядный цвет заметно «грубее». У профессиональных цифровых фотокамер у сканеров (например, 48 или 51 бит на пиксел) более высокая разрядность оказывается полезна при последующей обработке фотографий: цветокоррекции, ретушировании и т. п.
Векторная графика
Для векторных изображений, в силу принципа построения изображения, понятие разрешения неприменимо.
Разрешение устройства
Разрешение устройства (inherent resolution) описывает максимальное разрешение изображения, получаемого с помощью устройства ввода или вывода.
Разрешение экрана монитора
Для типичных разрешений мониторов, индикаторных панелей и экранов устройств (inherent resolution) существуют устоявшиеся буквенные обозначения:
Разрешение растрового изображения для печати
В онлайн-типографии сайтов при подготовке графических макетов часто используются скачанные из интернета фотографии и картинки. Эти изображения, в формате jpeg, называются растровыми.
Что такое растровое изображение?
Rastrum или грабли (в переводе с латинского), более напоминает сетку из пикселей, в виде цветных точечных прямоугольников на мониторе, бумаге или других устройствах.
Чтобы получить достаточно четкое изображение после печати, необходимо использовать разрешение с плотностью пикселей на единицу площади примерно от 250 до 300 DPI.
Справка: DPI расшифровывается, как: dots per inch или количество точек на один дюйм.
Требование к разрешению в 300 DPI определенно с некоторым запасом, в качестве образца с наиболее приемлемого отпечатка размера А4, снятого с расстояния 25–30 см.
Чёткость полученной картинки прямо пропорционально зависит от плотности пикселей на единицу площади, при этом они становятся практически незаметными и создают качественное изображение.
Итак, условиями идеальной картинки для профессионального макета являются:
Важно: следует учитывать качество и особенности камеры, особенности объектива и т. д.
При необходимости уменьшения иллюстрации печатаются с запасом dots per inch, а избыточное разрешение отрезается специальным печатным оборудованием. Этот процесс несколько замедляет печатание.
Как определить разрешение изображения?
Разрешение изображения определяется следующим образом:
Последнее и определяет разрешение изображения.
Где найти изображения для печати?
Этот вопрос остается актуальным для многих начинающих пользователей.
В сети существует множество фотостоков, содержащих брендовые изображения для макетов с высоким качеством съемки и разрешения.
KABOOMPICS.COM — крупный фотобанк креативного контента, созданный известным фотографом и веб-дизайнером. Ресурс отличается обширными коллекциями лайфстайл-снимков. Представлены великолепные фотографии интерьеров и предметов.
PEXELS.COM — платформа с бесплатным доступом к большой библиотеке с полным собранием изображений для сайтов, приложений и другой дизайнерской продукции.
UNSPLASH.COM — проект с бесплатной регистрацией, один из лучших стоков ультрасовременных изображений на рынке. Создатели платформы регулярно публикуют десятки «photo of the day». Пейзажи, архитектура, интерьеры, еда, портреты, животные и др.
PIXABAY.COM — сайт содержит более 1 миллиона бесплатных Royalty-Free фотографий, видео, иллюстраций, векторов. Сервис предоставляет всем желающим расширенный поиск по категориям:
SITEBUILDERREPORT.COM — красивые шаблоны и лучшие фотографии ресурса от его создателя Стива. Ресурс собрал изображения со многих бесплатных и платных стоковых сайтов. Коллекция регулярно обновляется и пополняется и содержит более 20 тысяч качественных снимков.
PICJUMBO.COM — сток чешского фотографа Viktor Hanacek. Успешный проект для личного и коммерческого пользования маркетологов и блогеров с большим количеством стильных политематических фотографий, в том числе и фонов, обоев, пространств для текста и т.д.
GETREFE.COM — ресурс снимков от талантливых фотографов многих стран. Слоган которого звучит: «бесплатные, высококачественные, естественно выглядящие фотографии».
Внимание: кураторские снимки выбираются администрацией сайта вручную.
JAYNANTRY.COM — еще одна альтернативная подборка бесплатных фотографий СС0 от создателя Аджай Мантри, предлагающая творить магию с дизайнерским портфолио.
Индустрия сайтов стремительно развивается, помощь в дизайнерских проектах и выборе правильного конструктора сайтов продолжает осуществляться. Поэтому стоит учиться и периодически знакомиться с обзорами новых предложений.