Растровые форматы
Растровые файлы — это изображения, состоящие из пикселей, которые имеют определенные цвета и расположены в сетке. Размер растрового изображения тоже рассчитывается в пикселях, например, 1080 х 1920 или 720 х 1200. При увеличении растрового изображения пиксели становятся крупнее и изображение теряет четкость.
Векторные форматы
Векторные файлы — это изображения, созданные с помощью математических алгоритмов, которые определяют положение, форму, размер и цвет каждого элемента. Векторные изображения не зависят от разрешения, поэтому их можно масштабировать без потери качества до любого размера.
RAW-формат
RAW — это исходный, необработанный файл, который хранит всю информацию об изображении. Такие файлы довольно тяжелые, поэтому они не подходят для отправки. Перед тем, как поделиться с кем-то таким файлом, лучше всего конвертировать его в более простой формат, например, PNG или JPEG, потому что очень немногие программы могут открывать RAW.
Растровая графика
JPEG / GIF / PNG / TIFF / RAW / PSDРастровые изображения состоят из пикселей, каждому из которых присвоен свой цвет. Качество графики зависит от разрешения — после увеличения картинка может размыться. Это происходит потому, что компьютер сам пытается дорисовать новые непрописанные пиксели, основываясь на цвете соседних. Растровые форматы обычно используются для фотографий, художественной графики и некоторых элементов веб-дизайна. Самый распространенный графический редактор растровой графики — Adobe Photoshop, в котором создаются, комбинируются и редактируются изображения.
Растровые изображения сохраняются в одной из двух цветовых моделей: CMYK или RGB. Такие аббревиатуры получили цветовые модели со своими системами записи цвета. Не будем углубляться в технические нюансы и сосредоточимся на главном: если вы готовите файл к печати, выбирайте CMYK, а если к размещению на электронных платформах — RGB.
Еще один нюанс — это плотность пикселей. Файл для печати лучше сохранять с плотностью 300 dpi, а для веба хватит 72 dpi.JPGJPG или JPEG — формат растровой графики, который используется в фотографиях, изображениях в рассылках и баннерах на сайтах. JPG хорош регулировкой степени сжатия — файл на выходе может занимать мало места, правда от этого графика теряет в качестве. Используйте JPG, когда...
- работаете с фотографиями или художественными работами
- отправляете клиенту файл для быстрого просмотра и внесения правок
- вам нужна веб-графика с прозрачным слоем. У JPG нет альфа-канала, поэтому в этом случае лучше использовать GIF или PNG
- работаете с многослойным изображением. Если вы не закончили с редактированием сложной графики, воспользуйтесь PSD
- создаете веб-анимацию. Внутри GIF-файла содержатся все необходимые кадры («фрэймы») и информация о временных интервалах
- вам нужна прозрачность
- вам нужен файл небольшого размера — простая иконка или веб-графика
- вам нужно изображение фотографической детализации. GIF имеют ограничение в 256 цветов, для сложных изображений этого недостаточно
- готовите файл для печати
- вам нужно многослойное изображение для редактирования. Редактировать анимированную графику можно в PSD
- вам нужна высококачественная графика с прозрачным слоем. Транспарентность в PNG-файлах можно регулировать — это позволяет создавать в PNG более сложные композиции, чем в GIF
- имеете дело с изображением с ограниченным набором цветов. PNG хранит информацию о миллионах цветов, но формат лучше использовать с небольшой цветовой палитрой
- вам нужен небольшой файл. PNG могут сжиматься до крошечных размеров, поэтому такие файлы часто используют в вебе
- работаете с фотографиями и сложными художественными работами. Такие изображения в PNG будут занимать много места, поэтому используйте JPG
- готовите файл к печати. PNG оптимизирован для экранов смартфонов и компьютеров, поэтому печатать лучше JPG- и TIFF-файлы
- готовите к печати графику больших размеров
- делаете высококачественное сканирование
работаете с веб-графикой. Здесь больше подойдут JPG и PNGRAWRAW-файлы содержат необработанные данные, записанные сенсором цифровой камеры или сканера. Как правило, их обрабатывают (проводят цветокоррекцию, настраивают экспозицию и баланс белого) и сохраняют в JPG или TIFF. Работать с RAW-изображениями можно в графических редакторах, например, Adobe Photoshop.Используйте RAW, когда...
- создаете веб-анимацию. Внутри GIF-файла содержатся все необходимые кадры («фрэймы») и информация о временных интервалах
- вам нужна прозрачность
- вам нужен файл небольшого размера — простая иконка или веб-графика
- вам нужно изображение фотографической детализации. GIF имеют ограничение в 256 цветов, для сложных изображений этого недостаточно
- готовите файл для печати
- вам нужно многослойное изображение для редактирования. Редактировать анимированную графику можно в PSD
В чем преимущества растровой графики
- Высокая фотореалистичность. В растре можно получить изображение любой сложности, передать естественные оттенки и цветовые переходы. Обводки, размытости, тени — все это получится воссоздать с большой точностью.
- Практически нет ограничений в работе с цветами. Вы можете выбрать подходящую цветовую модель (RGB, CMYK, XYZ — самые распространенные) и работать с любыми оттенками, существующими в природе.
- Растровую картинку легко создать: с помощью фотоаппарата, сканера, графического редактора. А еще при необходимости можно конвертировать любое векторное изображение в растровый формат, тогда как в обратном направлении сделать переход бывает сложно.
- Широкие возможности для обработки. Можно ретушировать изображения и наслаивать их друг на друга, накладывать фильтры, использовать инструменты цветокоррекции и многое другое. Для этого подойдут не только профессиональные графические редакторы, но и приложения для смартфона или онлайн-конструкторы изображений.
- Распространенность. Картинки в самых популярных растровых форматах PNG, JPEG, GIF открываются и редактируются на любых устройствах.
В чем недостатки растровой графики
- Большой вес изображений — основной минус формата. Ведь растровая графика состоит из пикселей, и даже в фотографии с разрешением 1280х1024 их больше миллиона. Чем выше разрешение, тем более «тяжелым» для загрузки и обработки будет файл, даже если рисунок простой.
- Потеря качества при сжатии. Чтобы уменьшить вес фотографий и иллюстраций, их сжимают, но при этом может заметно ухудшиться цветопередача и детализация. Иногда потери незаметны: например, можно сжать профессиональные фотографии товаров для размещения на маркетплейсе. А вот для печатной рекламы подойдут только исходники в высоком разрешении.
- Нельзя увеличить картинку без потери качества — размер ограничен изначальным разрешением. Если слишком растянуть изображение, его качество снизится. По этой причине логотипы почти всегда делают в векторном формате. Если же логотип растровый, а его нужно разместить на вывеске или билборде, после увеличения будут видны пиксели.
Когда используется растровая графика: примеры изображений
Растровую графику выбирают в тех случаях, когда важно передать сложные цветовые переходы и реалистичные оттенки.
Изображения в растровой графике — это, например:
- Любые цифровые фотографии и сканы;
- Фотореалистичные коллажи;
- Рекламные макеты, созданные в Photoshop — листовки, буклеты, визитки и т. д.;
- Инфографика для маркетплейсов;
- Книжные и журнальные иллюстрации, иллюстративные заголовки;
- Комиксы и мультипликационные сцены;
- Сложные персонажные иллюстрации;
- Иногда — макеты наружной рекламы (такое изображение должно быть в максимально высоком качестве).
Растровые форматы изображений
GIF
Формат изображения GIF (Graphics Interchange Format) — это тип файла, который можно использовать для статических изображений, но чаще всего они ассоциируются с анимацией, то есть серией изображений, которые автоматически воспроизводятся по кругу. GIF — это старый формат, поэтому он 8-битный. Это означает, что его цветовой диапазон картинки будет ограничен 256 цветами. Зато разрешение этих файлов обычно меньше, чем у других типов, и загружаются они легче.
Ограничение в цветопередаче делает GIF непригодными для работы с фотографиями в высоком разрешении. Лучшей альтернативной для этих целей будут форматы JPEG или PNG, так как они способны передавать мелкие детали и отображать миллионы цветов.
Файлы в формате GIF используют для веб-графики или логотипов с четкими краями и небольшим количеством цветов. Но гораздо чаще они используются в переписках для обозначения реакции или в качестве мемов в социальных сетях.
Изображения имеют расширение .gif и открываются во множестве программ. Например, в стандартных программах просмотра изображений на Windows и MasOS, в браузерах Google Chrome, Firefox, Microsoft Edge или Safari, а также в программах для работы с растровыми и векторными изображениями, например, Photoshop, Illustrator или CorelDraw.
PNG
PNG (Portable Network Graphics) — это самый известный формат изображения, который может иметь прозрачный или полупрозрачный фон, поэтому PNG часто используется для передачи изображений с прозрачными участками, таких как логотипы или веб-графика.
Логотип Contented с прозрачным фоном
PNG создавали, как улучшенную версию формата GIF. Он стал широко использоваться для сжатия изображений без потерь, то есть для уменьшения размера без изменения качества картинки. При сжатии файл сохраняет все исходные данные, поэтому PNG-изображения могут весить гораздо больше, чем GIF или JPEG. Кроме этого, файлы в формате PNG могут обрабатывать до 16 млн цветов.
Изображения имеют расширение .png и открываются во всех стандартных программах для просмотра изображений на Windows или MasOS, а также в Adobe Photoshop, Adobe Illustrator, Paint и Paint 3D и в любом браузере.
JPEG
JPEG расшифровывается как Joint Photographic Experts Group. Это название компании, которая разработала сам формат в начале 1990-х годов. Сегодня JPEG до сих пор остается самым популярным форматом для передачи растровых изображений. Чаще всего формат JPEG используют для работы с фотографиями.
В отличие от 8-битного формата GIF, который поддерживает 256 цветов, JPEG имеет 24-битное разрешение, а значит, в нем доступно гораздо больше цветов — примерно 16,8 млн.
По сравнению с PNG у него тоже есть важное отличие: JPEG использует сжатие с потерями, поэтому, если его уменьшить, то картинка станет менее четкой, цвета размоются и будут утеряны некоторые детали. Кроме этого, изображения в формате JPEG не могут быть прозрачными.
Файл может иметь расширение .jpeg или .jpg. Это одно и то же расширение, просто «.jpg» — это сокращенная форма. Его можно открыть в любой программе для просмотра изображений и в любом браузере, а также в большинстве графических редакторов.
Что выбрать: JPEG или PNG
Сравнение изображений в форматах JPEG и PNG. Источник На первый взгляд разница между фотографиями в формате JPEG и PNG небольшая. И только если присмотреться, можно заметить, что в формате PNG изображение лучше детализировано, поэтому и размер файла почти в 6 раз больше.
Вот чем отличаются форматы JPEG и PNG:
— Прозрачность. У файлов PNG может быть прозрачный фон, а изображения в JPEG всегда непрозрачные. При конвертации из одного формата в другой прозрачный фон изменится на белый.
— Сжатие. При сжатии из файлов JPEG некоторые данные удаляются навсегда — это и есть сжатие с потерями. Восстановить эти данные и снова сделать изображение более детальным уже не получится.
— Оптимизация. Так как размер файлов JPEG может быть гораздо ниже, их использование ускорит загрузку проекта.
— Области применения. JPEG чаще используется в цифровой фотографии. Этот формат более компактный, поэтому позволяет хранить больше снимков, но при этом он не уступает PNG в плане цветопередачи. PNG чаще используется в области веб-графики, кстати, поэтому снимки экранов всегда сохраняются в этом формате.
TIFF
TIFF — это формат для растровых файлов, который используется для хранения и передачи массивных изображений. Изначально он был создан для того, чтобы в печатных публикациях появились иллюстрации в высоком качестве, а позже формат стал доступен и для цифровых изображений. Сейчас авторские права на формат файла принадлежат компании Adobe.
Снимок NASA с миссии NuSTAR
Файлы TIFF хранят информацию о слоях, поэтому их легко редактировать в Adobe Photoshop. Их часто используют профессиональные фотографы и издательства. Также они идеально подходят для сканирования архивных документов в высоком качестве. Например, NASA использует формат TIFF для хранения снимков с космических телескопов.
Лучше всего TIFF подходит для специальных проектов, в которых требуется высочайшее качество изображений, например в онлайн-галереях или для печати билбордов. Для более простых действий, например, публикации в блоге или отправке в переписке, PNG почти всегда является лучшим вариантом.
PSD
Формат PSD позволяет сохранять работы, созданные в Adobe Photoshop. Чаще всего их используют диджитал-художники, дизайнеры и рекламные агентства.
Слои, которые содержит документ в формате PSD, можно увидеть в меню справа
PSD-файлы могут сохранять до 30 000 пикселей в ширину и высоту. Они хранят большой объем информации о цвете и качестве изображения. Плюс это один из немногих файлов, которые можно редактировать в нескольких слоях, то есть накладывать друг на друга несколько изображений и обрабатывать по отдельности.
Эти файлы имеют расширение .psd, но если открыть любой из них в Adobe Photoshop, то можно будет конвертировать изображение в другой подходящий формат, например, в PNG, JPEG или PDF.
WebP
Google запустил формат WebP в рамках своей миссии по ускорению загрузки изображений на сайтах. WebP позволяет отображать высококачественные изображения, но при этом файлы файлы будут гораздо меньшего размера, чем привычные PNG и JPEG.
Формат WebP чаще всего используется в веб-дизайне
Максимальный размер изображений WebP составляет 16 383 x 16 383 пикселей. Это может быть фактором, который следует учитывать, прежде чем добавлять изображения WebP на веб-сайт или в другое место.
Файл имеет расширение .webp и открывается в основном в браузере. Формат поддерживают Google Chrome, Safari, Firefox, Edge и Opera
Можно открыть его с помощью Adobe Photoshop, но может потребоваться модуль для редактирования этого типа файлов. После того как вы установили модуль, совместимый с вашим устройством, нужно выполнить следующие действия:
- Создайте или отредактируйте изображение с помощью Photoshop, затем нажмите «Сохранить как».
- Сохраните файл как WebP с помощью меню «Формат».
- Выберите имя и место для нового файла WebP и нажмите «Сохранить».
- Появится панель настроек, в которой вы сможете редактировать файл дальше.
Также WebP можно перевести в другой формат с помощью специального ПО или онлайн-конвертера.
Векторные форматы изображений
SVG
SVG (Scalable Vector Graphics) — это формат векторной графики, который подходит для работы с изображениями, анимацией и веб-графикой. Основное отличие SVG заключается в том, что он не является растровым форматом, поэтому не теряет качество при увеличении изображений. Например, JPEG, PNG, GIF и TIFF — это растровые файлы, которые как раз теряют качество при увеличении.
Кроме того, SVG имеет возможность добавления анимации и интерактивности в изображения. Это делает его полезным для создания динамических и интерактивных веб-графиков, диаграмм, карт и других элементов. Он поддерживается всеми современными веб-браузерами, что делает его универсальным форматом для веб-разработки.
Файлы имеют разрешение .svg, и их можно редактировать с помощью программ как для векторной, так и для растровой графики, в то время, как файлы PNG — только с помощью программ для редактирования растровых изображений. Поэтому с SVG можно открывать в любом графическом и текстовом редакторе, в том числе в Adobe Photoshop, Adobe Illustrator и Adobe InDesign.
AI
AI — это тип файла, в котором хранятся работы, созданные в Adobe Illustrator. Обычно в этом формате создают и передают логотипы и иллюстрации с высокой степенью детализации. Формат отличают небольшие размеры файлов и простота масштабирования.
Пример векторных иллюстраций в формате AI
Файлы в формате AI можно повторно редактировать в Adobe Illustrator. Они хранят информацию о слоях изображения, а также в них есть возможность создавать прозрачные и полупрозрачные слои. Других типы векторных файлов не обладают таким функционалом.
Файлы имеют расширение .ai и в основном предназначены для открытия в Illustrator, но также они интегрированы в Photoshop, InDesign и Acrobat Reader. Но можно открыть их и в сторонних приложениях, например, в Corel Draw или Serif Affinity Designer.
EPS
EPS (Encapsulated PostScript) — это формат файлов, который Adobe использовал для векторной графики в Illustrator до тех пор, пока не стал использовать собственный формат AI.
Изначально EPS создавался для печатной продукции. Он мог отображаться в предварительном просмотре перед печатью, что раньше было невозможно, и был совместим с большинством печатных устройств.
Главный минус формата EPS состоит в том, что в нем вы больше не сможете редактировать файл. Так что, если вы заметили ошибку или решите внести изменения, нужно будет вернуться к исходному файлу и сохранить новую копию.
Несмотря на то, что в области векторной графики формат считается устаревшим, EPS по-прежнему совместим практически со всем программным обеспечением. Файлы с расширением .eps поддерживают все популярные графические редакторы, в том числе весь пакет Adobe, а также CorelDRAW, Serif Affinity Designer и Inkscape.
Разница между векторной и растровой графикой
| Тип: | Растровые изображения | Векторные изображения |
| Как формируется | Множество пикселей, каждому из которых присваивается положение и цвет | Математические формулы, которые задают прямые и кривые линии + цвета |
| Фотореалистичность | Высокая | Низкая |
| Возможность увеличения без потери качества | Низкая, ограничена изначальным разрешением | Высокая, не ограничена ничем |
| Сфера применения | Реалистичные или близкие к реалистичным изображения: фотография, видео, компьютерная графика Полиграфия: создание небольших изображений (буклетов, листовок, лифлетов). Также возможно создание крупных билбордов, но файл будет иметь очень большой размер. | Графика, которой не нужна реалистичность, — иконки, логотипы, плоские иллюстрацииПолиграфия, для которой важно масштабирование без потери качества: билборды, растяжки, лайтбоксы и др. |
| Ограничения | Нельзя увеличить без потери качества При повышении разрешения повышается размер файла, требовательность к производительности устройства и пропускной способности канала | Нельзя создавать фотореалистичные изображения |
| Скорость обработки | От средней до высокой (у изображений с высоким разрешением) за счет того, что компьютеру нужно обработать каждый пиксель | Средняя за счет небольшого количества вычислительных операций |
| Требовательность к оперативной памяти | От средней до высокой | Низкая |
| Программы для работы | Adobe Photoshop, Procreate, Krita | Adobe Illustrator, CorelDRAW |
Что нужно учесть при работе с растровой графикой: полезные советы
- Позаботьтесь, чтобы на вашем устройстве было достаточно оперативной памяти. Оптимальный объем — от 8 Гб, а если вы планируете заниматься ретушью профессиональных фото, лучше выбрать карту на 16-32 Гб.
- Сжимайте изображения перед их размещением на сайте, насколько это можно сделать без снижения качества. Чем больше файл, тем медленнее будет загружаться страница, а это раздражает пользователей и снижает конверсию.
- Соизмеряйте разрешение каждой картинки с форматом, который будете использовать. Это важно, чтобы изображение не пришлось растягивать и терять из-за этого качество и четкость. Для аватарки сообщества в соцсети подойдет и низкое разрешение, для печатной афиши — только высокое.