это как? — Журнал «Код»

Есть два вида картинок: в одной миллионы цветов и полный фотореализм; вторую можно увеличивать и уменьшать до бесконечности без потери качества. Вот как это всё работает.

👉 Как и большинство статей в журнале «Код», эта статья для начинающих. Юные Артемии, вам не сюда. Лучше порешайте наши задачки в паблике. 

Растровая графика

Растр — это множество мелких точек, из которых может состоять изображение. В случае с компьютером растр — это пиксели, из которых состоит фотография. 

Например, когда вы фотографируете на смартфон или цифровой фотоаппарат, вы получаете растровое изображение, которое состоит из множества отдельных точек. Если смотреть на экране телефона или компьютера, они не видны, но если сильно увеличить, то эти точки станут заметны.

Чем сильнее увеличим фотографию, тем больше видны пиксели

👉 У растровой графики есть два главных параметра: размер изображения и глубина цвета.

Размер изображения — это количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличивать картинку без потери качества. Например, возьмём одну и ту же фотографию, но у одной будет размер 100 на 200 пикселей, а у другой — 1000 на 2000 пикселей:

В одном и том же масштабе вторая картинка смотрится гораздо лучше, потому что в ней больше пикселей, которые передают больше деталей

Общее правило такое: чем больше пикселей на фотографии, тем больше мелких деталей можно на ней разглядеть. Именно поэтому производители камер и смартфонов постоянно увеличивают количество пикселей у себя в устройствах.

Глубина цвета. Представьте, что ваша камера в телефоне может различать только 16 цветов. В этом случае фотографии получались бы такими:

В целом понятно, что тут изображено, но выглядит странно

Это и есть глубина цвета — сколько разных оттенков присутствует на изображении. В нашем примере 16 цветов — это 4 бита, потому что 2 в 4 степени = 16. Сравните, как выглядит та же фотография с глубиной цвета 16 и 8 бит:

Чем больше глубина цвета, тем плавнее цветовые переходы на фото

Главное применение растровой графики — фотографии и изображения с большой глубиной цвета и множеством деталей. Фотографии — это растр. Рисунки от руки — чаще всего растр. Если на изображении природа, люди, водичка или что угодно со множеством деталей, скорее всего, такое изображение будет растровым. 

Компьютеры классно справляются с растровыми изображениями, потому что растр довольно прост в обработке. Компьютер ставит подряд нужное количество пикселей и красит их в нужные цвета. Операция простая, математика минимальная, просто нужно повторить её много раз. Компьютеры в этом сильны.

Векторная графика

В отличие от растровой графики, векторная состоит не из пикселей, а из математических формул. В такой графике каждое изображение нарисовано с помощью отдельных элементов:

• точек,
• эллипсов,
• прямоугольников,
• многоугольников,
• кривых любой сложности.

Чтобы это нарисовать, у каждого элемента есть свои параметры, например:

• координаты,
• цвет,
• размер,
• толщина линии,
• толщина контура,
• цвет контура,
• прозрачность,
• радиус кривизны и так далее.

Если компьютеру нужно нарисовать звёздное небо, мы можем дать ему такие команды:

1. Создай пустой рисунок.
2. Залей его градиентом сверху вниз от тёмно-синего к синему.
3. Поставь точку {белая, размер 0,5, непрозрачность 100%} по координатам 10,8.
4. Поставь точку {белая, размер 0,4, непрозрачность 100%} по координатам 14,9.
5. Поставь точку {белая, размер 1,1, непрозрачность 80%} по координатам 19,31.
6. … добавляем ещё 113 звёзд.

В итоге получим такой рисунок:

Избражение: wallpapersafari.com

Так как мы не привязаны к размеру изображения, то по этим формулам компьютер может нам отрисовать звёздное небо любого размера — от обоев на телефон до рекламного билборда 4 на 6 метров. При этом при увеличении потери качества не происходит — компьютер просто получает от нас финальный размер изображения и рисует всё в нужных пропорциях.

Программируем скринсейвер для Илона

👉 Сила векторной графики — в возможности бесконечно увеличивать и уменьшать размер изображения без потери качества. При изменении размера компьютер сразу пересчитывает все формулы и отрисовывает картинку заново. Поэтому при увеличении векторной графики не появляются пиксели и размытие, даже если нам нужно увеличить одну звезду в 100 раз:

Минус векторной графики в том, что в ней очень сложно создать фотореалистичное изображение. Дело в том, что каждая деталь, каждый новый цвет и каждый цветовой переход — это новая формула. Чтобы построить фотореалистичную картинку, нужно очень много формул, которые будут сложно обсчитываться, и всё равно по деталям можно понять, что перед нами не фотография:

Каждый элемент на этой картинке задаётся своей формулой. Здесь много деталей, но всё равно видно, что это не фотография, а векторная иллюстрация То же самое изображение в кривых

Векторная графика чаще всего применяется там, где не нужна фотореалистичность — иконки, пиктограммы, рекламные материалы. Главная задача такого изображения — чтобы его можно было увеличить или уменьшить как угодно без потери качества.

Иконки — Сергей Чикин

Что дальше

Будем осваивать векторную графику в CSS. Заодно потренируемся наводить красоту на страницах и попрактикуемся в коде.

Текст и иллюстрации:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Олег Вешкурцев

Растровая и векторная графика — журнал «Доктайп»

Давайте попробуем разобраться, в чём отличие растровой графики от векторной?

Растровая графика

Растровое изображение, как мозаика, складывается из множества маленьких ячеек — пикселей, где каждый пиксель содержит информацию о цвете. Определить растровое изображение можно увеличив его масштаб: на определённом этапе станет заметно множество маленьких квадратов — это и есть пиксели.

Наиболее распространённые растровые форматы: JPEG, PNG.

Растровое изображение и его увеличенный фрагмент

Применение

Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий. Самый популярный редактор растровой графики — Adobe Photoshop.

Пример использования растровой графики: цифровой рисунок (автор изображения: Катя Климович)Пример использования растровой графики: фотография

Преимущества

• Возможность создать изображение любой сложности — с огромным количеством деталей и широкой цветовой гаммой.
• Растровые изображения наиболее распространённые.
• Работать с растровой графикой проще, так как механизмы её создания и редактирования более привычны и распространены.

Недостатки

• Большой занимаемый объём памяти: чем больше «размер» изображения, тем больше в нём пикселей и, соответственно, тем больше места нужно для хранения/передачи такого изображения.
• Невозможность масштабирования: растровое изображение невозможно масштабировать без потерь. При изменении размера оригинального изображения неизбежно (в результате процесса интерполяции) произойдёт потеря качества.

Векторная графика

В отличие от растровых, векторные изображения состоят уже не из пикселей, а из множества опорных точек и соединяющих их кривых. Векторное изображение описывается математическими формулами и, соответственно, не требует наличия информации о каждом пикселе. Сколько ни увеличивай масштаб векторного изображения, вы никогда не увидите пикселей.

Самые популярные векторные форматы: SVG, AI.

Векторное изображение и его увеличенный фрагмент

Применение

Векторная графика используется для иллюстраций, иконок, логотипов и технических чертежей, но сложна для воспроизведения фотореалистичных изображений. Самый популярный редактор векторной графики — Adobe Illustrator.

Пример использования векторной графики: социальные иконки (источник изображения)Пример использования векторной графики: иллюстрация (автор изображения: Катя Климович)

Преимущества

• Малый объём занимаемой памяти — векторные изображения имеют меньший размер, так как содержат в себе малое количество информации.
• Векторные изображения отлично масштабируются — можно бесконечно изменять размер изображения без потерь качества.

Недостатки

• Чтобы отобразить векторное изображение требуется произвести ряд вычислений, соответственно, сложные изображения могут требовать повышенных вычислительных мощностей.
• Не каждая графическая сцена может быть представлена в векторном виде: для сложного изображения с широкой цветовой гаммой может потребоваться огромное количество точек и кривых, что сведёт «на нет» все преимущества векторной графики.
• Процесс создания и редактирования векторной графики отличается от привычной многим модели — для работы с вектором потребуются дополнительные знания.

Итог

Мы приходим к выводу, что не существует «серебряной пули»: и растровая, и векторная графика имеют свои достоинства и недостатки, соответственно, стоит выбирать формат, который подходит для решения поставленных перед вами задач.

Что ещё знать о графике

• Форматы изображений для веба
• Как правильно написать alt-текст
• Фигма или Фотошоп. Что выбрать новичку

Файлы растровых изображений : TechWeb : Бостонский университет

Файл растрового изображения представляет собой прямоугольный массив регулярно выбираемых значений, известных как пиксели. С каждым пикселем (элементом изображения) связано одно или несколько чисел, определяющих цвет, в котором пиксель должен отображаться. в диапазоне от 0 до 255), определяя количество красного, зеленого и синего соответственно в каждом пикселе. В правильных пропорциях красный, зеленый и синий можно комбинировать, чтобы получить черный, белый, 254 оттенка серого и огромное количество цветов (всего 16 777 216 цветов). Ниже приведено очень простое определение изображения (изображение 3×3 в формате ascii PPM — сверху слева, черный, средне-красный, полностью красный, средне-серый, средне-зеленый, полностью зеленый, белый, средне-синий, полностью синий). Он также отображается в виде увеличенного изображения (в формате GIF, поскольку показанный формат PPM не может отображаться в большинстве веб-браузеров), где каждый пиксель воспроизводится как сплошной цветной квадрат 50 × 50.

 Р3
3 3
255
0 0 0 128 0 0 255 0 0
128 128 128 0 128 0 0 255 0
255 255 255 0 0 128 0 0 255 

Однако это очень простой способ представления изображения, занимающий очень много места на диске. Поэтому большинство форматов изображений сжимаются для уменьшения размера изображения. Кроме того, некоторые форматы изображений допускают гораздо меньший диапазон цветов (например, GIF — это 8-битный формат, который позволяет использовать только 256 различных цветов в любом изображении). Форматы изображений, такие как GIF, также, как правило, не определяют цвета напрямую, как показано выше. Вместо этого каждый пиксель представлен одним числом (для 8-битных изображений значение от 0 до 255), которое является индексом в 9-битном изображении.0011 таблица поиска цветов . Таким образом, для представления каждого пикселя требуется всего 8 бит (1/3 пространства). Затем таблица поиска цветов задает цвета в полном 24-битном представлении истинного цвета, но она настолько мала по сравнению с изображением нормального размера, что занимает незначительное место. Для сравнения 24-битного и 8-битного цвета см. следующую страницу (соответственно в 24-битном формате PNG и 8-битном GIF)

В следующем списке указаны форматы файлов изображений и размеры одного изображения в различных форматах для для сравнения — все эти изображения имеют разрешение 800×600. Для просмотра первых трех из этих примеров вам, вероятно, потребуется использовать внешнее приложение для просмотра изображений — веб-браузеры могут отображать только ограниченное количество форматов, обычно включая JPEG, GIF и PNG. Пример изображения был сгенерирован Эриком Бриссоном из группы научных вычислений и визуализации Бостонского университета для доктора Брюса Богосяна из Бостонского университета для проекта «Моделирование двумерной дрейфовой турбулентности частицами в ячейках в плазменной колонне с чистыми электронами».

 ИМЯ ФАЙЛА КОЛ-ВО БАЙТОВ КОЛ-ВО БИТ НА ПИКСЕЛЬ СЖАТИЕ РАСТР ИЛИ ВЕКТОР
sample.ppm 6336015 24 НЕТ РАСТР
sample.ps 2926048 СПЕЦИАЛЬНЫЙ/24 СПЕЦИАЛЬНЫЙ ВЕКТОР
sample.rgb 1440512 24 РАСТР БЕЗ ПОТЕРЬ
sample.png 140557 24 РАСТР БЕЗ ПОТЕРЬ
sample.gif 61346 8 РАСТР БЕЗ ПОТЕРЬ
sample.jpg 59575 24 РАСТР С ПОТЕРЯМИ 

Все вышеперечисленные файлы в основном представляют одно и то же изображение, но есть существенные различия. Файл GIF имеет только 8-битный цвет и поэтому в основном имеет худшее качество, чем другие изображения (конечно, он также меньше и на 8-битном цветном мониторе будет так же хорош, как 24-битное цветное изображение). Файл PPM несжатый и, следовательно, очень большой и имеет качество, абсолютно эквивалентное изображению PNG, которое составляет менее сороковой его размера . Файл PostScript (.ps) необычен тем, что это вовсе не растровое изображение, а векторное изображение (см. обсуждение файлов PostScript). Наконец, изображение в формате JPEG (.jpg) является наименьшим изображением и представляет собой полноцветное 24-битное изображение, но оно сжато с использованием 9Схема сжатия 0011 с потерями . Это означает, что, в отличие от файлов PPM, RGB и PNG, которые полностью эквивалентны, файл JPEG не является таковым. Если вы конвертируете изображение из RGB в JPEG и обратно в RGB, вы потеряете некоторый уровень качества при переходе в JPEG и никогда не сможете вернуть его обратно . Размер потерь зависит от выбранного вами уровня сжатия изображения и от характера сжимаемого изображения.

Существует много других различий между форматами файлов, но большинство из них не важны для обычного пользователя.

Почему существует так много различных форматов файлов изображений?

Причин тому много, но главные из них — деньги и практичность. Некоторые разработчики форматов файлов (такие как CompuServe с GIF) пытаются поддерживать определенный уровень контроля над своими форматами. Другие пользователи и разработчики, конечно же, не хотят этому подчиняться и поэтому разрабатывают свои форматы. Кроме того, существует реальных различий между форматами (см. таблицу выше), и некоторые форматы действительно лучше подходят для определенных приложений. Например, если файл должен быть высокого качества, но очень маленьким, подойдет JPEG. Для максимального качества лучше всего подходит формат TIFF. Для максимальной совместимости форматы GIF и TIFF являются хорошим выбором, поскольку они очень широко используются. Для Интернета единственными вариантами, как правило, являются JPEG, GIF и PNG. Для печати PostScript является четким стандартом, и часто вы должен преобразовать ваш файл в формат PostScript перед его печатью (или программное обеспечение для печати сделает это за вас). Список форматов и конкретных преимуществ можно продолжать бесконечно, поэтому используйте тот формат, который лучше всего подходит для вашего индивидуального приложения.

Разрешение изображения — DPI

Растровые изображения имеют определенный размер, например 800×600 для приведенного выше образца изображения, что указывает на то, что изображение имеет ширину 800 пикселей и высоту 600 пикселей. Этот размер влияет как на размер файла изображения, так и на то, как изображение выглядит на экране или при печати. Что касается размера файла, помните, что обычно удвоение размера изображения (например, получение изображения 100×100 и преобразование его в изображение 200×200) фактически увеличивает площадь экрана и размер файла на в четыре раза .

Какое разрешение следует использовать, во многом зависит от вашего приложения. Если вы показываете изображение в Интернете, многие окна веб-браузеров будут иметь ширину всего 1000 пикселей или меньше, поэтому отображение изображений большего размера, как правило, не будет для вас выгодным. Аналогичные цифры верны для таких приложений, как PowerPoint, хотя он может использовать весь экран, поэтому, в зависимости от разрешения вашего монитора, ширина до 2000 пикселей может быть полезна, если вы хотите получить изображение самого высокого качества. С другой стороны, если вы распечатываете изображение, чтобы заполнить область размером 8 x 6 дюймов, используя принтер с разрешением 600 DPI (точек на дюйм) (что является обычным разрешением принтера), изображение будет выглядеть лучше, если оно имеет разрешение 4800 × 3600. — если он меньше, его нужно увеличить.

Итак, какой формат следует использовать?

JPEG — Формат JPEG был разработан как формат с высокой степенью сжатия (и с потерями), оптимизированный для фотографий. Формат поддерживает 24 битные изображения и хотя данные отбрасываются , это сделано таким образом, что они не будут видны большинству людей. Этот формат чрезвычайно популярен в Интернете и в любой ситуации, когда размер файла имеет большое значение (например, при хранении большого количества изображений на карте памяти цифровой камеры). Однако этого следует избегать в любой ситуации, когда требуется изображение самого высокого качества, например, в графике печатных изданий. Кроме того, если вы работаете с изображением, чтобы каким-то образом манипулировать им (например, с помощью Photoshop ), вы должны работать с ним в формате без потерь (например, TIFF или, с Photoshop, PSD), а затем, только когда вы закончите, сохранить файл как JPEG .

PNG — этот формат является третьим наиболее часто просматриваемым форматом в Интернете и поддерживается большинством современных веб-браузеров. Он поддерживает полное сжатие без потерь 24-битного цвета и является предпочтительным форматом для веб-изображений, которые должны быть самого высокого качества. Качество сжатия файлов PNG также превосходно, так как в целом используется более эффективный алгоритм, чем в других форматах, таких как GIF или TIFF.

GIF . Формат GIF также очень популярен для графики в Интернете, но поддерживает только 8-битный цвет, поэтому его следует избегать для большинства приложений. Как правило, есть только две ситуации, когда мы рекомендуем использовать формат GIF. Во-первых, если ваше изображение имеет 256 или меньше цветов и вам нужна максимальная веб-совместимость. Второй предназначен для анимированных последовательностей изображений в Интернете, где формат Animated GIF является стандартом для пользователей, которые не хотят или не могут использовать такие приложения, как Adobe Flash.

TIFF, RGB, PPM — все эти 24-битные цветные форматы высокого качества широко распространены. Большинство веб-браузеров не смогут просматривать эти изображения, кроме как через внешнее приложение, но для не-веб-приложений все эти форматы весьма полезны.

PSD — этот формат является внутренним форматом, используемым популярной программой редактирования изображений Adobe Photoshop. Он хранит больше, чем просто изображение, например информацию о слоях, текст и т. д. Используйте этот формат при работе в Photoshop, но когда вы закончите, если вы хотите поделиться изображением с людьми, которые, как вы не знаете, имеют Photoshop, сохраните его в другом формате. , например TIFF, PNG или JPEG.

RAW — На самом деле это не единый формат, а скорее набор внутренних (и каждый разный) форматов, используемых некоторыми цифровыми камерами. Хотя некоторые приложения могут считывать некоторые форматы RAW, не рекомендуется сохранять изображения в этом формате после их извлечения из камеры. Преобразуйте их в более общий формат, такой как PNG или JPEG, для сохранения на долгий срок.

Введение в растровые изображения

Мы многое рассказали об этом в статье выше, но если вы пролистываете или хотите напомнить основы, вот несколько часто задаваемых вопросов о растровых изображениях.

Определить растровое изображение одним предложением*

Растровое изображение — это изображение, состоящее из сетки пикселей. Растровые изображения обычно используются для цифровых фотографий и веб-графики.

* да, не технически вопрос.

Чем отличается растровое изображение от векторного?

Векторное изображение — это изображение, состоящее из математических уравнений. Векторные изображения обычно используются для логотипов или иллюстраций. Растровые изображения состоят из пикселей, а векторные — из контуров.

Как изменить размер растрового изображения?

Существует несколько различных способов изменения размера растрового изображения. Вы можете использовать программу редактирования изображений, такую ​​как Adobe Photoshop или GIMP. Вы также можете использовать бесплатный онлайн-инструмент, такой как PicResize.

Какой формат файла лучше всего подходит для сохранения растрового изображения?

Лучший формат файла для сохранения растрового изображения зависит от того, что вы планируете делать с изображением. Если вы планируете распечатать изображение, сохраните его в формате TIFF или EPS. Если вы планируете использовать изображение в Интернете, вам следует сохранить его в формате JPEG или PNG.

Что такое дизеринг?

Дизеринг — это метод, который используется для создания иллюзии большего количества цветов в изображении. Когда к изображению применяется дизеринг, цвета перестраиваются таким образом, что они кажутся смешанными. Это может создать видимость большей цветовой палитры, даже если в изображении используется только ограниченное количество цветов.

Что такое псевдоним?

Псевдоним — это эффект, который может возникнуть при изменении размера изображения. Когда возникает алиасинг, края объектов на изображении становятся зубчатыми или «ступенчатыми». Это может произойти, если размер изображения не изменен должным образом или если оно сохранено в формате файла, который не поддерживает сглаживание.

Что такое полосатость?

Полосатость — это артефакт, который может появляться на изображениях с ограниченным количеством цветов. При появлении полос цвета на изображении смешиваются неравномерно, и они могут казаться «полосатыми». Этот эффект чаще всего встречается в изображениях GIF и PNG.

Что такое шум?

Шум — это артефакт, который может появляться на цифровых изображениях.