Что такое растровая графика

Растровая графика — это изображения, состоящие из множества маленьких точек (квадратиков) разного цвета. Каждая такая точка называется пикселем.

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

К растровой графике относятся:

— фотографии (цифровые и отсканированные);

— цифровые картины и иллюстрации, нарисованные на планшете или в графическом редакторе;

— скриншоты экрана;

— сканы документов и рисунков;

— 3D-модели объектов, сохранённые в растровых форматах (как картинка, а не как трёхмерный файл).

Разрешение — основная характеристика растровых изображений

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

Разрешение показывает, сколько пикселей помещается по горизонтали и по вертикали. Например, запись «1920×1080» означает: 1920 пикселей в ширину и 1080 пикселей в высоту. Если умножить одно на другое (1920 × 1080), получится общее количество пикселей в изображении — примерно 2 миллиона.

Чем больше пикселей — тем выше качество. Изображение с разрешением 1920×1080 будет чётким и детализированным. А картинка 640×480 — более грубой, с видимыми пикселями, если её распечатать или показать на большом экране.

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

Плюсы растровой графики

У растровых изображений есть важные преимущества, которые делают их незаменимыми в дизайне.

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

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

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

Минус: масштабирование

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

Если попытаться увеличить растровую картинку, пиксели станут видны невооружённым глазом. Изображение потеряет чёткость, края объектов станут «рваными», вместо плавных линий появится лесенка из квадратиков.

На профессиональном языке это называется «пикселизацией» или «лестничным эффектом».

Что это значит для дизайнера: вы не можете взять маленькую картинку из интернета и просто растянуть её на весь баннер или плакат. Качество будет испорчено. Нужно изначально искать изображение с подходящим (или большим) разрешением.

А вот уменьшать растровую графику можно без проблем — лишние пиксели просто отбрасываются при уменьшении.

Пример из жизни: вы нашли в интернете маленькую фотографию — 200×150 пикселей. Если попытаться сделать из неё фон для презентации (1920×1080), она превратится в набор цветных квадратиков. А если взять фотографию 4000×3000 пикселей и уменьшить её до нужного размера — качество останется идеальным.

Чем растровая графика отличается от векторной

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

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

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

Оба типа графики важны и используются в разных ситуациях. Дизайнер должен понимать разницу и выбирать тот тип, который лучше подходит для конкретной задачи. Подробнее об этом я писал в статье «Что такое векторная графика».

Форматы растровой графики

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

JPEG (JPG) — самый популярный формат для фотографий и реалистичных изображений. Хорошо сжимает файлы, сохраняя приемлемое качество. Недостаток: при многократном редактировании и сохранении качество может падать. Также JPEG не поддерживает прозрачность (фон не может быть «невидимым»).

PNG — формат, который сохраняет максимальную детализацию и чёткость. Поддерживает прозрачность. Это значит, что вы можете вставить логотип на любой фон, и вокруг него не будет белого квадрата. Минус: файлы PNG весят больше, чем JPEG. Хорошо подходит для логотипов, иконок, скриншотов и изображений с текстом.

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

WebP — современный формат, разработанный компанией Google. Он объединяет в себе лучшее: может хранить и качественные статичные картинки (с размером файла меньше, чем у JPEG и PNG), и анимацию (компактнее GIF), и прозрачность. Постепенно становится стандартом для веб-дизайна.

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

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

Для работы в веб-дизайне и большинстве графических проектов вам чаще всего понадобятся JPEG, PNG и WebP. GIF — только для простой анимации. BMP и TIFF — для редких профессиональных задач.

Где брать растровую графику

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

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

Фотостоки — специализированные библиотеки, где собраны профессиональные фотографии и иллюстрации на всевозможные темы. Самые популярные и удобные:

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

— Freepik— огромная коллекция векторных и растровых иллюстраций, иконок, фото. Есть как бесплатные изображения (с указанием авторства), так и платные. В Figma есть плагин Photos by Freepik, который даёт быстрый доступ к изображениям.

На фотостоках всегда указаны условия использования и автор. Это особенно важно, если вы делаете дизайн для клиента или публикуете свою работу.

Немного о лицензиях

У изображений есть правообладатели – их владельцы, создатели. Их права регулируются лицензиями — специальными правилами, которые определяют, как можно использовать картинку.

— Бесплатные изображения (Free, Royalty‑free) — можно использовать почти в любых проектах (включая коммерческие), но часто требуется указать имя автора. Обязательно читайте условия на сайте конкретного стока.

— Платные (Premium)— для использования требуется купить лицензию. Цена зависит от тиража, сферы использования, размера изображения. Для учебных работ и личных проектов платные фото обычно не нужны.

— Изображения без лицензии (неопределённый статус)— например, картинки из Яндекс Картинок, у которых не указан автор и условия использования. Технически вы можете сохранить такую картинку для личного использования (например, для практики). Но если вы делаете дизайн «для публики» (для клиента, для портфолио, для конкурса), лучше брать изображения с фотостоков с понятной лицензией.

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

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