В чем измеряют разрешение растровых файлов
Эти понятия часто путают и не совсем правильно применяют.
Разрешение — число дискретных элементов (пикселей) на стандартную единицу длину (дюйм = 25,4мм). Стандартная единица измерения — dpi ( dots per inch , количество точек на дюйм).
Разрешение является мерой детализации цифрового изображения, поскольку при заданном разрешении деталь рисунка меньше пикселя быть не может. Именно поэтому фрагмент изображения (sample) получившейся при фотографировании или сканировании меньше пикселя (pixel) по площади, обобщается и теряет свои мелкие детали.
Таким образом, чем больше разрешение, тем меньше площадь пикселя, следовательно более высокое разрешение позволяет передавать больше деталей и более точно воспроизводить оригинал.
Однако это правило справедливо только для этапа создания растрового изображения с помощью технических средств, коих как известно всего 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 метр.
Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.
Начнём с главного: растровые изображения состоят из пикселей. На этом можно было закончить данную статью, но не всем этого достаточно, поэтому поговорим о заблуждениях и мифах, которые я встречал на практике.
Средневековье
Восьмидесятые годы прошлого столетия стали временем становления растровой графики. Графика как таковая применялась и раньше, но теперь она стала гораздо более доступна, и не в последнюю очередь на неё повлияла игровая индустрия. Atari 2600 позволяла рисовать нечто более изысканное, чем белый прямоугольник. А Commodore 64 обладал видеопамятью, с настоящими пикселями, и работать с ним было удобнее, чем «переключи цвет не позже 31415-го такта».
Нарисовать на экране Мону Лизу, выставляя пиксели вручную по хитрому алгоритму, трудновато. Да и не нужно, потому что из видеопамяти выдернуть кусок данных и сохранить его в файл, а потом из файла вставить. Такой дамп памяти в Бейсике делался командой BSAVE , а сам формат назывался в честь неё BSAVE'd. Редактировать изображения стало намного удобней, и расцвели пышным цветом простенькие графредакторы, большей частью неотличимые друг от друга.
Но некоторые из редакторов переросли детский возраст и стали весьма удобным и полезным инструментом. Так в 1984 появился PCPaint, в котором можно было рисовать при помощи мыши. Помимо очевидных удобств пользовательсого интерфейса PCPaint давал еще одно преимущество. Дело в том, что дамп BSAVE не включал данных о размере изображения, глубине цвета и палитре, и если видеорежимов было немного (да и цветное изображение вменяемо показывалось в черно-белом режиме) то для палитры приходилось использовать отдельный файлик PAL. В формате PIC редактора PCPaint содержались и палитра, и дамп BSAVE. Это маленький шаг для программиста и гигантский скачок для всего человества. Что-то вроде «а давайте придумаем формат MKV, в котором субтитры можно будет хранить внутри, и чтобы не нужно было их в нужную папочку класть».
Но еще одна проблема оставалась нерешенной: на PC есть BSAVE и на Apple есть BSAVE , но они генерируют файлы разного формата. Это и не удивтельно, внутреннее представление картинки в памяти различалось. Существовали транскодеры, но стало понятно, что долго эта вендор-зависимая кутерьма не продержится. В 1984 компания Truevision представила формат TARGA, более известный как TGA. А в следующем 1985 году свет увидела рисовалка PC Paintbrush. Хотя PC Paintbrush и продавалась хуже, её формат PCX, переносимый и достаточно простой, прожил дольше, чем PIC.
И в TGA, и в PCX данные о размере изображения и палитре хранились в явном виде, без сильной привязки к железу. Это стало возможным, потому как пиксельные данные перестали зависеть о конкретной платформы и представляли из себя просто сканлайны: слева направо, сверху вниз.
Но была ещё одна важная особенность у этих двух форматов, растровые данные в них хранились в сжатом виде. Применяемый алгоритм RLE не был верхом эффективности, но это было уже весьма неплохо.
RLE (Run length encoding) достаточно простой алгоритм, но он хорошо показывает, как работает сжатие данных. Сжать данные без потерь означает, избавиться от избыточности в них. Для этого берем набор данных, находим в них цепочки повторяющихся значений и заменяем их на нечто более компактное.
Обычно RLE переводят как «кодирование длин серий», и такие повторяющиеся значения именуют «серии». И хотя мне больше по душе перевод «прогон», ничего не могу поделать, это уже устоявшися термин.
Скорее всего, Вы уже пользуетесь им. Посмотрим на строку « AAAAAAAAAAAABBBAAAAAAAAA ». Если нам придется продиктовать её по телефону, то это будет звучать как «двенадцать заглавных букв A, три заглавные B, девять заглавных A». Если записать это, получится « 12 A 3 B 9 A », а чтобы не было разночтений, то « 9 A 3 A 3 B 9 A ». Гораздо компактнее.
Возьмем теперь другую строку, « 0KXQsNCx0YDQsNGF0LDQsdGA », и попытаемся её так сжать. Получится « 1 0 1 K 1 X …», стоп-стоп-стоп! Строка получается вдвое длиннее, чем исходная, это же ни разу не сжатие. Модифицируем алгоритм и добавим к цифрам буквы: буква A означает, что следующий символ пишется «как есть»; если B, то два; если C, то три, и так далее. Выходит « X 0KXQsNCx0YDQsNGF0LDQsdGA ». Итого, в лучшем случае мы получаем сжатие в 350%, а худшем случае мы теряем только 4%.
Разумеется, в реальных условиях кодируются обычно байты, а не буквы латинского алфавита, и длины последовательностей кодируются значениями от 0 до 255. Плюс к тому, обычно бессмысленные значения длин серий игнорируются: в нашем примере 1 и A делают одно и тоже, а 0 вообще смысла не имеет. Но это детали, суть остается одна и та же.
Разрешение экрана монитора
Для типичных разрешений мониторов, индикаторных панелей и экранов устройств (inherent resolution) существуют устоявшиеся буквенные обозначения:
Данная схема изображает стандартные разрешения экрана, причём цвет каждого типа разрешения указывает соотношение сторон экрана (например, красный цвет обозначает соотношение, равное 4:3)
Разрешение изображения
Разрешение – это показатель изображения, на прямую означающий его качество, представляющий из себя количество точек (или пикселей) на единицу площади (или единицу длины).
В современной гонке технологий этот показатель наиболее знаком каждому рядовому покупателю техники. Любой магазин электроники пестрит всевозможными рекламными знаками «Full HD», «Настоящее 4к Разрешение!», «Кристальная чёткость изображения» и т.д.
Всё далеко не с проста, это самый главный показатель любого устройства для воспроизведения визуальной информации, будь то монитор ноутбука, экран телевизора, дисплей смартфона или электронной книги. Чем выше разрешение – тем чище и детальнее картинка. Прогресс картинки очевиден, стоит только, какое именно изображение мы лицезрели во времена VHS, ну или взглянуть на простейшее сравнение:
Качество изображения зависит так же и от его источника, скорость развития которого абсолютно разное. И во главе его стоит игровая индустрия, которая с каждым днём постоянно увеличивает технологические аспекты. Игровая индустрия не дремлет. Именно она больше всех толкает сейчас прогресс развития качества изображения. Поколения консолей, улучшение производительности систем — всё приводит к тому, что картинка становится реалистичнее, четче и детальнее.
Продолжение следует
Ну вот, пожалуй, и всё. Про TGA я рассказывать не буду, он хоть и отличается от PCX, но сходств гораздо больше, чем отличий. А других прямо уж примечательных графических форматов того времени и не было.
Кроме, конечно же, формата GIF компании CompuServe. В нем мы и покопаемся в следующий раз.
Разреше́ние — величина, определяющая количество точек (элементов растрового изображения) на единицу площади (или единицу длины). Термин обычно применяется к изображениям в цифровой форме, хотя его можно применить, например, для описания уровня грануляции фотопленки, фотобумаги или иного физического носителя. Более высокое разрешение (больше элементов) типично обеспечивает более точные представления оригинала. Другой важной характеристикой изображения является разрядность цветовой палитры.
Как правило, разрешение в разных направлениях одинаково, что даёт пиксель квадратной формы. Но это не обязательно — например, горизонтальное разрешение может отличаться от вертикального, при этом элемент изображения (пиксель) будет не квадратным, а прямоугольным.
Разрушители мифов
Современное информативное пространство породило множество мифов касательно частоты кадров, каждый из которых хотелось бы рассмотреть.
Человеческий глаз не видит больше 24 кадров в секунду
Данный миф родился, скорее всего, из-за стандарта киноиндустрии, но, что самое важное, он в корне ошибочен.
Видеть разницу частоты кадров, превышающей 24, способны абсолютно все, в чём Вы и убедились в уже показанной гифке. Другое дело – вопрос, способен ли мозг осознать информацию, показанную при высокой скорости. Тут уже далеко не всё так однозначно, однако исследования показали, что при должной тренировке, человек способен увидеть разницу картинки, помелькавшей лишь в одном кадре из всех.
Мистический эффект 25 кадра
Данный миф родился в 1957 году, когда американский ученый опубликовал исследование, в ходе которого якобы увеличились продажи попкорна последствием 25 кадра. Спустя 5 лет он признался, что полностью сфабриковал эксперимент. Не смотря на это, миф жив до сих пор, а в интернете можно найти множество роликов и сайтов, предлагающих за деньги чудо эффект 25 кадра (похудение, изучение языков и т.д.).
Никакого эффекта, уж тем более влияющего на разум, здесь попросту нет. В ином случае это бы означало, что абсолютно каждая игра, или тот же «Хоббит» Джексона, каждую секунду имела возможность обработать ваш мозг скрытой информацией. Что, очевидно, ну совсем глупость в чистом виде.
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, сантиметры, дюймы и т.д.) можно смело игнорировать и смотреть исключительно на размеры в пикселях.
Энтропия
Как бы ни хотелось избежать теории, эта вещь слишком важная, чтобы её игнорировать. Вы заметили, что не все последовательности получается сжать? Строки AAAAAAAAAAAABBBAAAAAAAAA и 0KXQsNCx0YDQsNGF0LDQsdGA одной длины, 24 символа, но во второй эти символы более хаотичны, и её сжать труднее.
Чтобы проиллюстрировать это, обратимся к тому, что на первый взгляд не имеет отношения к IT.
Судоку слева содержит 81 цифру и уже решен. Тот, что посередине, содержит меньше информации, 26 цифр, но решив его, можно восстановить все исходные 81.
А вот с судоку справа все очень плохо — из него удалено слишком много данных, и он уже не решается, т.е., исходный набор данных мы уже не получим.
Но вернемся к PCX и займемся тем, чего уже лет десять никто не делал, создадим файл PCX, причем вручную. Знать свой инструмент нужно, поэтому обратимся с спецификации, и узнаем, что представляет из себя этот формат. Вот основные тезисы:
- Изображение может иметь размеры до 65536×65536. Палитра до 256 цветов, либо 24-битный цвет без палитры. Заголовок всегда размером 128 байт, содержит размер изображения, количество цветов и палитру до 16 цветов по одному байту на канал. Естественно, 256-цветовая палитра в такой заголовок не влезет, и если она есть, она дописывается в конец файла и имеет размер 769 байт (1 байт сигнатуры и 256×3 байт данных). Есть ещё поле для палитры CGA, но она более не поддерживается.
- «Сырой» поток данных состоит из сканлайнов — горизонтальных линий в один писель. Внутри каждого сканлайна может быть до 4 битовых плоскостей: R, G, B, A. Все плоскости пишутся последовательно: RRRRGGGGBBBBAAAA . Плоскости состоят из строго чётного количества байтов, и при необходимости к сырым данным дописываются заполнители, чтобы это условие выполнялось. Такие данные-заполнители при декодировании игнорируются.
- Сжатие «сырых» растровых данных производится построчно, при помощи RLE. «Построчно» означает, что серия RLE не может выходить за пределы битовой плоскости.
- В RLE байтовые значения от 192 до 255 кодируют количество повторений символа от 0 до 63 раз соответственно. Остальные значения — литеральные, если ни встречаются на том месте, где ожидается количество повторений, считается, что они повторяются один раз.
Суперсэмплинг
Т.к. 4к-телевизоры и мониторы до сих пор не особо распространены (особенно в России, где ещё и половина населения не перешла на HD), а цены на них высоки, существует контингент людей, имеющих лишь FHD-экран, но при этом обладающих более производительным современным устройством. Конечно, любому пользователю хочется получать максимум от возможностей новой технике. Для этого и существует технология суперсэмплинг.
Суперсэмплинг – это технология, в результате которой картинка в игре сначала рендерится в 4K, а затем отображается в 1080p. Это дает возможность увидеть больше деталей на обычном телевизоре Full HD. В сравнение картинка будет в разы проигрывать, но наличие подобной технологии крайне удобно для временного решения. Так же это требует изначального создания картинки в большем разрешении, а значит, это требует приличной производительности системы.
Для примера возьмём скриншот безумно красивой технологической демки «Insects» в свободном доступе от «Microsoft», записанный на Full HD TV. Первый – без применения суперсэмплинга, второй – с использованием.
Как можно увидеть при увеличении, разница не огромна, но присутствует. Да, это и рядом не заменит использование 4к разрешение на таком же 4к экране, но будет приятной мелочью на время.
FPS (Frames Per Second)
FPS – показатель динамического изображения (не статичного), представляющий из себя количество кадров в секунду.
В настоящее время кинематограф и телевидение использует давно установленную норму в 24 кадра в секунду (ранее, во времена немого кино, стандарт составлял 16 кадров). Существуют и исключения, а именно:
- Спортивные трансляции матчей на некоторых стриминговых сервисах и каналах составляют 60 кадров
- «Хоббит» Питера Джексона, который снимался, а позже показывался в некоторых IMAX-кинотеатрах в 48 кадрах
- Искусственно интерполированные переиздания фильмов (разное количество)
- Будущие сиквелы «Аватара» Джеймса Кэмерона, которые он обещает снять в 60 кадрах
Естественно, чем больше этот показатель, тем плавнее изображение. Продемонстрировать разницу можно простейшей гифкой, в которой шар перекатывается за одинаковое время из левого угла в правый.
Как можно увидеть из гифки, разница заметно на любой даже не подготовленный взгляд. Да, разница не огромна, однако то, что плавность изображения на прямую зависит от частоты кадров, полагаю, очевидно всем.
Существуют и ухищрение, называемое интерполяцией кадров. Подобной системой пользуются при создании фанатских переизданий, а так же она встроена в некоторые телевизоры. Её суть в том, чтобы из исходных кадров рассчитывать новые дополнительные кадры, то есть между 2-мя соседними исходными кадрами программа дорисовывает новые, основываясь на данных движения из соседних. Система сей крайне довольно сложна в исполнении, а главное, рождает из себя множество артефактов, мешающих просмотру.
В игровой индустрии норма количества кадров заметно отличается от кино. 30 кадров в секунду – установленный стандарт для комфортного геймплея, но вариаций здесь куда больше. Спортивные симуляторы, файтинги, шутеры от первого лица и киберспортивные мультиплеерные жанры, где крайне важна скорость реакции, предпочтительно должны обладать 60 кадрами в секунду. Достичь подобных показателей часто бывает сложно, т.к. фпс прямо зависит от производительности системы.
Итого
Еще раз вкратце техники, помогающие уменьшить вес PCX:
- Выбор минимально возможной глубины цвета (размера палитры);
- Оптимизация мусорных данных;
- Удаление бессмысленных данных (серии длиной 0);
- Оптимизация палитры.
Разрешение изображения
4k разрешение
Когда мода на 3D-телевизоры быстро погасла, но её место пришёл иной технологический аспект — 4k разрешение экрана, рекламируемое со всех сторон.
Скорее всего, у всех Вас по большей части стоит дома Full Hd-телевизор. Нужно ли вам переходить на новое разрешение? Увидите ли Вы разницу?
Всё зависит от того, для чего вы собираетесь использовать его. Подобное разрешение до сих пор редкость. Современное телевидение, особенно в нашей стране, по большей части транслируется в скудном старейшем 480p (720х480 точек), лишь несколько каналов, и то порой за отдельную плату, перешли на HD (720p), и только парочка на FHD (1080p), например, «Первый Канал». Это означает, что, если вы используете телевизор только по прямому назначению, 4к разрешение в этом десятилетии вы не увидите точно.
Для того, чтобы всё-таки хоть как-то использовать возможности нового разрешения, вам понадобится либо покупать 4k blu-ray диски с фильмами (что у нас ещё мало распространено, а главное, недешево), либо искать 4k-стриминговые сервисы (аля Netflix, который, хоть и существует официально в России, не предоставляет локализацию ни одного своего творения), либо смотреть 4k-ролики на YouTube (количество которых крайне малое до сих пор), либо использовать для игровых целей в связке с высокотехнологичным устройством, таким как Xbox One X или Ps4 Pro. Но и в последнем случае использовать все возможности подобного телевизора вам далеко не всегда получится использовать. Существует множество ухищрений (способов), которым пользуются разработчики, т.к. техническая составляющая до сих не полностью подходит для новомодного разрешения.
Все вариации итогового разрешения перечислим:
Растровая графика
Ошибочно под разрешением понимают размеры фотографии, экрана монитора или изображения в пикселях [источник не указан 286 дней] . Размеры растровых изображений выражают в виде количества пикселов по горизонтали и вертикали, например: 1600×1200. В данном случае это означает, что ширина изображения составляет 1600, а высота — 1200 точек (такое изображение состоит из 1 920 000 точек, то есть примерно 2 мегапикселя). Количество точек по горизонтали и вертикали может быть разным для разных изображений. Изображения, как правило, хранятся в виде, максимально пригодном для отображения экранами мониторов — они хранят цвет пикселов в виде требуемой яркости свечения излучающих элементов экрана (RGB), и рассчитаны на то, что пикселы изображения будут отображаться пикселами экрана один к одному. Это обеспечивает простоту вывода изображения на экран.
При выводе изображения на поверхность экрана или бумаги, оно занимает прямоугольник определённого размера. Для оптимального размещения изображения на экране необходимо согласовывать количество точек в изображении, пропорции сторон изображения с соответствующими параметрами устройства отображения. Если пикселы изображения выводятся пикселами устройства вывода один к одному, размер будет определяться только разрешением устройства вывода. Соответственно, чем выше разрешение экрана, тем больше точек отображается на той же площади и тем менее зернистой и более качественной будет ваша картинка. При большом количестве точек, размещённом на маленькой площади, глаз не замечает мозаичности рисунка. Справедливо и обратное: малое разрешение позволит глазу заметить растр изображения («ступеньки»). Высокое разрешение изображения при малом размере плоскости отображающего устройства не позволит вывести на него всё изображение, либо при выводе изображение будет «подгоняться», например для каждого отображаемого пиксела будут усредняться цвета попадающей в него части исходного изображения. При необходимости крупно отобразить изображение небольшого размера на устройстве с высоким разрешением приходится вычислять цвета промежуточных пикселей. Изменение фактического количества пикселей изображения называется передискретизация, и для неё существуют целый ряд алгоритмов разной сложности.
При выводе на бумагу такие изображения преобразуются под физические возможности принтера: проводится цветоделение, масштабирование и растеризация для вывода изображения красками фиксированного цвета и яркости, доступными принтеру. Принтеру для отображения цвета разной яркости и оттенка приходится группировать несколько меньшего размера точек доступного ему цвета, например один серый пиксел такого исходного изображения, как правило, на печати представляется несколькими маленькими чёрными точками на белом фоне бумаги. В случаях, не касающихся профессиональной допечатной подготовки, этот процесс производится с минимальным вмешательством пользователя, в соответствии с настройками принтера и желаемым размером отпечатка. Изображения в форматах, получаемых при допечатной подготовке и рассчитанные на непосредственный вывод печатающим устройством, для полноценного отображения на экране нуждаются в обратном преобразовании.
Большинство форматов графических файлов позволяют хранить данные о желаемом масштабе при выводе на печать, то есть о желаемом разрешении в 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 пикселей.
Для обозначения разрешающей способности различных процессов преобразования изображений (сканирование, печать, растеризация и т. п.) используют следующие термины:
-
(англ.dots per inch ) — количество точек на дюйм. (англ.pixels per inch ) — количество пикселей на дюйм. (англ.lines per inch ) — количество линий на дюйм, разрешающая способность графических планшетов (дигитайзеров). (англ.samples per inch ) — количество сэмплов на дюйм; плотность дискретизации (sampling density), в том числе разрешение сканеров изображений (en:Samples per inchангл.)
По историческим причинам величины стараются приводить к dpi, хотя с практической точки зрения ppi более однозначно характеризует для потребителя процессы печати или сканирования. Измерение в lpi широко используется в полиграфии. Измерение в spi используется для описания внутренних процессов устройств или алгоритмов.
Значение разрядности цвета
Для создания реалистичного изображения средствами компьютерной графики цвет иногда оказывается важнее (высокого) разрешения, поскольку человеческий глаз воспринимает картинку с большим количеством цветовых оттенков как более правдоподобную. Вид изображения на экране напрямую зависит от выбранного видеорежима, основу которого составляют три характеристики: кроме собственно разрешения (кол-ва точек по горизонтали и вертикали), отличаются частота обновления изображения (Гц) и количество отображаемых цветов (цветорежим или разрядность цвета)). Последний параметр (характеристику) часто также называют разрешение цвета, или частота разрешения (частотность или разрядность гаммы) цвета.
Разница между 24- и 32-разрядным цветом на глаз отсутствует, потому как в 32-разрядном представлении 8 разрядов просто не используются, облегчая адресацию пикселов, но увеличивая занимаемую изображением память, а 16-разрядный цвет заметно «грубее». У профессиональных цифровых фотокамер у сканеров (например, 48 или 51 бит на пиксел) более высокая разрядность оказывается полезна при последующей обработке фотографий: цветокоррекции, ретушировании и т. п.
DPI/PPI экранов
Здесь мы подошли к вопросу разрешения и плотности пикселей экранов. Корректно эта плотность обозначается как PPI (pixels per inch) и показывает, сколько пикселей может быть отображено на одном дюйме экрана.
Здесь часто возникают мифические 72 и 96 PPI, которые должны показывать «стандартную» плотность пикселей для экранов. Для задач отображения графики в вебе они бесполезны. При этом реальная плотность пикселей экрана может быть совсем другой: типично что-то около 120 PPI (можете измерить и посчитать для своего экрана).
Но мы помним, что растровые картинки измеряются только в пикселях и никак иначе. Зачем мы вообще говорим о PPI экранов? Потому что есть «Retina» или «HiDPI» экраны.
Апскейлинг
Апскейлинг – самый простейший из всех методов преобразования разрешения картинки, в ходе которого процессор (даже рядового теливизора) самостоятельно дорисует дополнительный пиксели, дабы соответствовать собственному разрешению.
Итоговое изображение, хоть фактически и будет иметь соответствующее разрешение, на самом деле будет представлять собой множество новых усредненных пикселей, ужасное качество которых отразится итоговым полным замыливанием изображения, особенно в сравнении с иными методами преобразований картинки и разрешения.
Естественно, в итоге сравнивая все 3 метода построения, можно заявить, что натуральное нативное разрешение в итоге выдаёт наилучшую картинку. При этом, естественно, существует зависимость от необходимой мощности. Чем лучше картинку Вы хотите и чем лучше методом построения разрешения пользоваться, тем производительнее система Вам нужна.
Итоговое сравнение сгенерированной картинки взрыва можно увидеть на финальной картинке:
Векторная графика
Для векторных изображений, в силу принципа построения изображения, понятие разрешения неприменимо.
Содержание
PCX на практике
Теперь давайте на примере разберем этот шмат технических данных. Возьмем для примера такую вот картинку (17×8, для удобства увеличена в 8 раз):
Определимся с палитрой. В изображении три разных цвета, поэтому нам подходят палитры из 4, 16 и 256 цветов, а также Truecolor. В 4-цветовой палитре у нас будет в одном байте 4 значения (8 бит байта поделить на 2 бита номера в палитре); в 16-цветовой — 2 пикселя на байт; в 256-цветовой — пиксель на байт (плюс 769 байт дополнительной палитры); в Truecolor — три байта на пиксель. Выбор очевиден, 4 цвета.
Цвета расположим, например, так:
Теперь выписываем битовые значения первой строки, начиная со старших битов. Листинг в четверичной системе, разделители — границы байтов.
0000 0000 0000 0000 0
Получается 4,25 байта. RLE с дробными байтами не работает, добиваем до пяти.
0000 0000 0000 0000 0 000
В документации сказано, что в сканлайне должно быть чётное количество байт. Делать нечего, добиваем ещё.
0000 0000 0000 0000 0 000 0000
То же самое проделываем с остальными строками, получаем:
0000 0000 0000 0000 0 000 0000
0111 1111 1111 1111 0 000 0000
0121 2121 2121 2121 0 000 0000
0212 1212 1212 1212 0 000 0000
0222 2222 2222 2222 0 000 0000
0202 0202 0202 0202 0 000 0000
0020 2020 2020 2020 0 000 0000
0000 0000 0000 0000 0 000 0000
Теперь посмотрим, какие значения можно сжать. Отметим только последовательности одинаковых байтов длиннее 2, потому что кодирование серии в 2 байта займет 2 байта, и смысла в этом особого нет.
0000 0000 0000 0000 0 000 0000
0111 1111 1111 1111 0 000 0000
0121 2121 2121 2121 0 000 0000
0212 1212 1212 1212 0 000 0000
0222 2222 2222 2222 0 000 0000
0202 0202 0202 0202 0 000 0000
0020 2020 2020 2020 0 000 0000
0000 0000 0000 0000 0 000 0000
Обратите внимание, что хотя нулевые байты в конце предпоследней строки так и просятся прицепиться к последней строке, этого сделать не получится, границу сканлайна пересекать нелья.
Теперь ход конём. В спецификации нигде не написано, чем именно нужно добивать сканлайны до чётного количества байт. Все равно, эти значения декодер выкинет. Поэтому можем сэкономить аж два байта, сделав вот так:
0000 0000 0000 0000 0 000 0000
0111 1111 1111 1111 0 000 0000
0121 2121 2121 2121 0 000 0000
0212 1212 1212 1212 0 000 0000
0222 2222 2222 2222 0 000 0000
0202 0202 0202 0202 0 202 0202
0020 2020 2020 2020 0 000 0000
0000 0000 0000 0000 0 000 0000
Закодируем получившееся в RLE. Пожалуй, будет удобней перейти к более привычному шестнадцатеричному виду:
00 00 00 00 00 00
15 55 55 55 00 00
19 99 99 99 00 00
26 66 66 66 00 00
2A AA AA AA 00 00
22 22 22 22 22 22
08 88 88 88 00 00
00 00 00 00 00 00
Кодируем первую строку. 6 байт 0x00 . Повтору 6 раз соответсвует значение 192 + 6 = 198 или C6 . После него пишем, какое же значение мы собираемся повторять 6 раз, получается 0xC6 0x00 . Первый сканлайн готов.
Далее три одинаковых байта становятся 0xC3 0x55 .
И в конце строки два нулевых байта, которые можно представить двумя способами: в лоб, 0x00 0x00 , или более хитро, 0xC2 0x00 . И так и сяк два байта. На девушек произвести впечатление хитрым приёмом вряд ли получится, а других причин делать вещи заковыристее, чем требуется, нету, поэтому берем просто 0x00 0x00 .
Продолжая подобным образом, получим:
Нативное разрешение
Нативное разрешение – это настоящее (пиксель в пиксель) разрешение источника, совпадающего с отображающим устройством ( в нашем случае 4k ).
Именно подобное разрешение использует Netflix и 4k-видео в YouTube, однако в игровой индустрии достичь его сложно. На подобную картинку необходимо дорогостоящее оборудование, мощности которого может все равно не хватать для стабильной частоты кадров.
Естественно, именно такое настоящее разрешение даёт наиболее качественную картинку, тогда как использование ухищрений, например, шахматного рендеринга, ухудшает четкость. Особенно это видно по дальности прорисовке при 4-кратном приближении для сравнения. В качестве примера возьмём 4-ёх кратно приближенный скриншот двух версий игры (нативное разрешение 4к – слева, динамическое разрешение с шахматным рендерингом — справа) с прекрасного канала «Digital Foundry», где сравнивается игра «Rise of Tomb Raider».
PCX на практике 2: палитра
Возьмем теперь другое изображение и снова переведем его в PCX, пытаясь максимально сжать. На этот раз картинка поменьше, 7×5.
Это НЛО. Знаю, что не очень похоже.
Перво-наперво, выберем глубину цвета: 2 бита. Это четыре цвета, как раз, сколько нам и нужно. Определяем палитру, например, так:
Теперь очередь растровых данных. Второй раз утомительный процесс выписывания циферок производить не будем, сразу запишем сырые данные и то, что из них получилось, в шестнадцатеричном виде.
Сырые данные | Сжатые данные |
0F C0 3A B0 FF FF D9 9C 3F F0 | 0F C1 C0 3A B0 C2 FF C1 D9 9C 3F C1 F0 |
Упс! Сжатые данные получились больше по размеру, чем исходные. Это потому, что значения от 0xC0 до 0xFF — это маркеры количества повторений, и их нельзя записать просто так. Вместо 0xC0 пришлось подставить C1 C0 , вместо 0xF0 — 0xC1 0xF0 и так далее.
В случае 0xFF 0xFF нам повезло — там мы драгоценных байт не потеряли. Но в целом выходит унылая картина: теперь RLE вместо того, чтобы помогать, только мешает.
В сторону безысходность, посмотрим, что с этим можно сделать. Маркерами являются байты с двумя старшими битами равными единице, 11XXXXXX. Данные пишутся последовательно, начиная со старшего бита. Зачит, при двухбитной глубине цвета на то, будет ли байт маркером или нет, влияют пиксели по смещению 4×n. А именно, пиксели цвета под номером 3 (в нашем случае, темно-серый).
Вот они, виновники разрастания размеров файла. В третьей строке темно-серые пиксели тоже попадают в выделенные колонки, но погоды они нам не делают: сама строка при кодировании даст два одинаковых байта.
Порядок цветов в палитре мы определяем сами, поэтому выберем в качестве цвета номер 3 тот, который меньше всего встречается по смещению 4×n. Синий — лучший кандидат, он не встречается на таких местах вообще ни разу. Переопределяем палитру и делаем вторую попытку.
Сырые данные | Сжатые данные |
0A 80 25 60 AA AA B7 78 2A A0 | 0A 80 25 60 AA AA B7 78 2A A0 |
Сжатые данные оказались идентичны исходным. RLE это изображение пришлось не по зубам, но хотя бы нет и оверхеда. Так или иначе, растровые данные готовы, и это максимум, что можно выжать.
Retina и HiDPI экраны
Такие дисплеи широко распространены в мобильных устройствах и дорогих ноутбуках. По сути это количественное увеличение пикселей при сохранении физических размеров экрана (например, 5 дюймов по диагонали и 330 PPI).
Для нас, как веб-разработчиков это значит появление разных пикселей в браузере: CSS-пикселей (которые мы обычно указываем в размерах элементов) и физических пикселей (реальных пикселей на экране). Формула такая: Физические пиксели = CSS-пиксели * DPR.
DPR это device pixel ratio — коэффициент перевода CSS-пикселей в физические.
При размещении картинки мы можем написать тег img с размерами 20px, а картинка будет 40 пикселей. При этом на экране с DPR=2,0 мы увидим все пиксели картинки. Но в этой ситуации нас абсолютно не волнуют реальные значения PPI экрана.
При этом мы можем использовать картинки с высокой плотностью пикселей и для обычных экранов, браузер сам отмасштабирует изображение. И опять, DPI и PPI здесь ни при чем, а картинки измеряются в пикселях. Как их показать будет решать браузер, у которого уже есть два вида пикселей.
Вот и вся история, хотя я конечно ничего не говорил об адаптивных картинках, способах оптимизации их отдачи и client hints. Но это другая история.
В современном мире существует огромное множество всевозможных качественных измерителей изображения. Неопытный и непросвещенный человек может запросто запутаться в разнообразии узкоспециализированных терминов, попасть на уловки маркетологов или необдуманно лишить себя очередных технологических новшеств.
Данная статья позволит разобраться в большинстве значимых характеристиках, самостоятельно сравнить разные технологии и ухищрения, а так же решить, какой именно девайс необходим Вам в зависимости от требований и экономического достатка.
Разрешение устройства
Разрешение устройства (inherent resolution) описывает максимальное разрешение изображения, получаемого с помощью устройства ввода или вывода.
- Разрешение принтера, обычно указывают в dpi.
- Разрешение сканера изображений указывается в ppi (количество пикселей на один дюйм), а не в dpi.
- Разрешением экрана монитора обычно называют размеры получаемого на экране изображения в пикселах: 800×600, 1024×768, 1280×1024, подразумевая разрешение относительно физических размеров экрана, а не эталонной единицы измерения длины, такой как 1 дюйм. Для получения разрешения в единицах ppi данное количество пикселов необходимо поделить на физические размеры экрана, выраженные в дюймах. Двумя другими важными геометрическими характеристиками экрана являются размер его диагонали и соотношение сторон.
- Разрешение матрицы цифровой фотокамеры, так же как экрана монитора, характеризуется размером (в пикселах) получаемых изображений, но в отличие от экранов, популярным стало использование не двух чисел, а округлённого суммарного количества пикселов, выражаемое в мегапикселях. Говорить о фактическом разрешении матрицы можно лишь учитывая её размеры. Говорить о фактическом разрешении получаемых изображений можно либо в отношении устройство вывода — экранов и принтеров, либо в отношении сфотографированных предметов, с учётом их перспективных искажений при съёмке и характеристик объектива.
Шахматный рендеринг
Как можно уже было понять, нативное разрешение требует для себя огромной вычислительной мощности. Т.к. даже самые современные системы далеко не всегда могут его позволить, существуют ухищрения, с помощью которых разрешение добивается при меньших затратах производительности.
Шахматный рендеринг – теxнoлoгия, с помощью которой мoжнo гeнeрировaть изобрaжение бoлee выcoкoгo рaзрeшeния нa oснoве изoбражений меньшегo pазpeшeния и некоторыx дoпoлнительныx дaнных. По сути, она несильно уменьшает итоговое качество картинки за счёт сильного уменьшения необходимой мощности.
Работает технология, как можно понять по названию, за счёт удаления каждого 2 пикселя сцены, последующим склеивании недостающих и, при необходимости, их усреднения.
Для разбора метода возьмём объяснение с интереснейшего, но уже умершего сайта «NeoGAF». В нём рассматривается процесс рендеринга совсем простенького взрыва. На первой картинке изображено обычное (в нашем случае такой, например, используется при нативном разрешении) построение рендеринга.
На второй — с использованием технологии:
Как видим, процесс построения кадра сильно отличается. За счёт убавки пикселей, как на шахматной доске, система нагружается в меньшем количестве, однако это приводит, хоть и не к значительному, ухудшению качестве итогового изображения. Усреднённые пиксели больше всего бросаются во взор, ведь в итоге мы видим небольшое замыливание картинки.
Экономическая целесообразность
Как уже отмечалось в статье, всё зависит от того, для каких целей вы собираетесь приобретать 4k-телевизор или монитор. Контента подобного качества до сих пор очень мало. Более того, телевиденья в 4k-разрешении не существует ещё в принципе.
При применении телевизора по прямому назначению даже Ваш старый FHD-телевизор до сих пор не реализует все свои возможности. Как много HD-каналов в данный момент вы имеете? Можно с уверенностью сказать, что для перечисления их хватит пальцев одной руки. Из этого стоит сделать простой вывод, приобретать подобную технику Вам не имеет никакого смысла. Это пустая трата денег. Обещания маркетологов абсолютно новых ощущений от просмотра в таком случае чистейшая выдумка.
При применении телевизора в качестве мультимедийного устройства наконец-то появляется видимая разница. Однако стоит учесть, что и в данном случае контента крайне мало. Да, просматривать 4k-сериалы на «Netflix» безумно приятно, однако в России нету локализации, а значит, этим воспользоваться смогут лишь некоторые.
Главное и самое распространенное применение нового разрешения сейчас – игроиндустрия. Но и в этом случае стоит учесть, что Вам потребует высокопроизводительное (а значит недешевое) устройство (ПК, ps4 pro или Xbox One X), да и нативного разрешения, использующего все возможности вашего 4k-экрана, Вы увидите далеко не всегда. По большей части только для подобного применения новое разрешение будет иметь смысл.
Из всего выше сказанного следует, что новомодное 4k-разрешение ещё очень слабо распространено. Не стоит вестись на уловки маркетологов и бежать покупать новые устройства. Единственное, для чего это действительно востребовано, это сильно ограниченные в количестве стримминг-сервисы и современный гейминг. В последних случаях Вам надо детально рассмотреть, стоят ли такие небольшие преимущества тех денежных средств, которых потребуется потратить.
На что при загрузке сайта расходуется больше трафика? Чаще всего это картинки, и их суммарный «вес» частенько в несколько раз больше, чем у разметки, скриптов и стилей. В файлах изображений распространенных форматов растровые данные хранятся в сжатом виде, и это значительно лучше, чем несжатый BMP. А если хочется ещё лучше? Ведь в достаточно крупных проектах каждый байт на счету (например, в TradingView, чего уж там скромничать).
Существует множество утилит для пережатия графики, от узкоспециализированных до всемогущих комбайнов. На хабре уже есть замечательный обзор таких программ, и вопрос, чем можно пережать картинку, рассмотрен более, чем детально.
Но как работают такие программы, что можно улучшить и как сделать свою? Приглашаю на обзорную экскурсию по форматам изображений и алгоритмам сжатия растровых данных.
Читайте также: