Гид по форматам графических файлов для работы с дизайном

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

Рассказываем, какие графические файлы бывают и все то, что вам пригодится, если вы не дизайнер, но иногда (или часто) работаете с картинками.

Растр и вектор — в чем разница

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

Изображения в растровом формате

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

Оригинал фотографии: Unsplash

Количество точек на 1 дюйм задается специальным параметром — это разрешение. Чем оно выше, тем более четкая картинка. Для печати норма разрешения — от 300 dpi, для мониторов стандартом считается 72 dpi.

Из-за множества точек файлы растровых изображений довольно тяжелые. И чем выше разрешение, тем больше вес файла.

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

Изображения в векторном формате

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

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

Главное преимущество векторных форматов в сравнении с растровыми — вес файла. Если сделать картинку в векторе и перевести ее копию в растровый формат, векторная всегда будет легче. 

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

Тонкости конвертации

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

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

Форматов графических файлов очень много. Мы рассмотрим основные, с которыми вы можете столкнуться в работе.

Растровые форматы файлов

JPEG

Аббревиатура расшифровывается как Joint Photographic Experts Group — название объединения разработчиков, которые придумали формат. Это самый популярный растровый формат. Если вы скачаете стоковую картинку или получите фото товаров от фотографа, скорее всего, это будет JPEG. Иногда используют написание JPG — этот тот же самый тип файла.

Особенности формата:

• поддерживается всеми браузерами, совместим с подавляющим большинством программ;
• легко сжимается — например, для пересылки в мессенджерах, но при этом сильно теряет в качестве;
• не поддерживает прозрачность фона;
• поддерживает обтравочные контуры в Photoshop — линии, которыми обводят объекты: например, чтобы вырезать фон или перекрасить часть фотографии. Если работаете в Photoshop, можете смело делать контуры для дальнейшей работы и сохранять файл в формате JPEG;
• дает приемлемое качество при печати.

PNG

Portable Network Graphics или PNG — еще один распространенный формат. Его отличает:

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

WEBP

Это формат, разработанный Google, предназначенный специально для размещения изображений в интернете. Вот его особенности:

• позволяет примерно на четверть уменьшить вес файла JPEG или PNG;
• поддерживает прозрачность фона и анимацию;
• сжать можно «с потерями», чтобы вес файла вышел минимальным или «без потерь» — вес будет чуть больше. Даже при сжатии «без потерь» качество на самом деле ухудшается, просто это некритично и незаметно для большинства пользователей;
• формат работает с большинством современных браузеров.

GIF

Расшифровывается как Graphics Interchange Format. Главная особенность GIF — поддержка анимации. Технически можно сохранить и статичную картинку в этом формате, но обычно его используют именно для моушн-графики.

Для GIF характерны:

• ограниченная цветовая гамма, доступно только 256 оттенков, отчего детализированные изображения теряют в качестве;
• поддержка прозрачностей;
• совместимость со всеми браузерами.

RAW

«Raw» в переводе с английского означает «сырой» — этот файл содержит метаданные изображения, полученного с камеры. Благодаря этому картинки легко обрабатывать без потери качества в Photoshop или Lightroom: менять баланс белого, яркость, контрастность, делать цветокоррекцию. В общем, если снимаете что-то на камеру, есть смысл сохранять картинки в формате RAW.

Формат отличает:

• максимально высокое качество картинки;
• очень большой вес файла;
• не всеми программами читается, непригоден для печати.

TIFF

Tagged Image File Format — оптимальный формат для полиграфии. Если вам нужно напечатать баннер или листовку в наилучшем качестве — выбирайте TIFF, он максимально сохраняет цветопередачу. Создать файл TIFF можно, например, в «Фотошопе».

Особенности формата:

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

PSD

Это формат «Фотошопа». Чаще всего в PSD сохраняют картинки на промежуточных этапах работы.

Чем отличается PSD:

• поддерживает слои и обтравочные контуры;
• может содержать векторные слои;
• позволяет работать с анимацией;
• открывается только в программах Adobe.

BMP

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

Вот другие особенности формата:

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

Векторные форматы файлов

SVG

Scalable Vector Graphics — идеальный формат для интерфейсов. Изображения имеют код, который можно добавлять в HTML-разметку.

Главные особенности формата:

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

EPS

Расшифровывается как Encapsulated PostScript. Формат придумала компания Adobe, обычно с ним работают дизайнеры. В EPS-файлах больше данных, но они плохо оптимизированы для веба. Если скачали картинку в EPS и хотите использовать на сайте — смело конвертируйте в SVG.

Что важно про EPS:

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

PDF

Portable Document Format — формат, который обычно используют для документов, презентаций, электронных брошюр. 

Вот особенности PDF:

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

AI

Это файл программы Adobe Illustrator. Обычно в AI дизайнеры сохраняют промежуточные итоги своей работы. Формат отличает:

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

CDR

Это формат программы CorelDRAW — аналога Adobe Illustrator. Что о нем нужно знать:

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

Шпаргалка

Собрали самые частые задачи маркетологов и подходящие форматы файлов: