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

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

Рассказываем, какие есть типы графических файлов и для каких целей их использовать. 

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

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

Типы графических форматов

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

• Растровые изображения — огромная комбинация разноцветных пикселей, которые легко рассмотреть при увеличении картинки. У файлов с изображениями в таком формате большой размер. Качество и «вес» напрямую зависят от количества пикселей. Чем четче и качественнее фото, тем больше памяти оно занимает на устройстве. Запомните числа 72 и 300: разрешение 72 dpi (dots per inch — плотность пикселей) подходит для веб-дизайна, а 300 dpi используют для высококачественной печати.
• Векторные изображения состоят из опорных точек и кривых линий между ними. Всего этого пользователь не замечает даже при сильном увеличении картинки. Благодаря этому масштабирование происходит без потери качества. Однако такие графические элементы выглядят гораздо проще. 

Есть метафайловые форматы (WPG, Macintosh PICT, CGM), которые хранят данные и растровых, и векторных изображений. Их используют при перемещении гибридных файлов на программных платформах.

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

Виджет обратного звонка для сайта

• Повысьте конверсию сайта на 30%
• Новым клиентам 50 минут в подарок

Узнать подробнее

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

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

PNG

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

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

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

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

Недостатки:

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

JPEG

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

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

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

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

Недостаток — сжатие и обработка приводят к потере качества.

GIF

Graphics Interchange Format — формат для обмена графическими данными в виде анимации. Гифка обычно имеет маленький размер, иначе ее загрузка будет длительной, а сам файл займет много памяти и кэша на устройстве. Выглядит GIF как видео без звука или анимированное изображение (значок, иконка, рисунок, текст). 

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

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

Недостатки:

• цветовая емкость — всего 256 оттенков;
• несовместимость со многими графическими редакторами.

RAW

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

Учитывайте, что файл RAW на разных устройствах будет иметь разные расширения (CR2, NEF или DNG), и для конвертации понадобится специальный сервис, например raw.pics. 

Если вы только что сделали фото, то после загрузки с фотоматрицы или редактирования оно автоматически поменяет формат с RAW на JPEG. 

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

• содержание метаданных оригинала;
• высокое качество.

Недостатки:

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

Маркетинг

Читайте также:

Как настроить геотаргетинг

Как настроить геотаргетинг

TIFF

Tagged Image File Format, или теговый формат, — файл растрового изображения, который можно сжать без потери качества. Даже если вы скопировали, повторно сохранили или изменили размер исходной картинки, — разрешение никак не пострадает. Оригинал возможно восстановить на любом этапе. 

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

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

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

Недостатки:

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

BMP

Bitmap Picture, или растровое изображение, — высококачественный формат от Microsoft с дополнительными расширениями: dib и rle. Подходит для очень детализированных картинок и фото. Специалисты редко его используют, так как BMP уже устарел, и ему на смену пришли более удобные форматы, например RAW или TIFF. 

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

• высокое качество;
• подробная детализация изображения.

Недостатки:

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

PSD

Photoshop Document — это документ (файл), который создают в Adobe Photoshop. Формат подходит для редактирования многослойных, анимированных изображений и видео.

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

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

Недостатки:

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

Когда используют векторные форматы 

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

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

SVG

Scalable Vector Graphics, или масштабируемая векторная графика, — идеальный вариант для работы с двухмерными изображениями. Чтобы добавить SVG на сайт, достаточно просто встроить его в html-код. 

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

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

Недостатки:

• не поддерживает большое количество цветов и оттенков;
• не подходит для печати.

PDF

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

Конвертировать документ в PDF можно с помощью Adobe Illustrator или Adobe Photoshop. 

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

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

Недостатки:

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

EPS

Encapsulated PostScript, или инкапсулированный постскрипт, — формат для веб-дизайнеров. Работать с ним получится только в специальных программах, таких как CorelDraw или Adobe Illustrator. 

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

• удобен для специалистов полиграфии и веб-дизайна;
• в фотошопе конвертируется в растровый формат.

Недостатки:

• неуниверсальный формат;
• не подходит для непрофессиональной печати;
• совместим далеко не с каждым ПО.

AI

Формат от Adobe Illustrator, с которым работают в основном специалисты веб-дизайна и иллюстраторы.

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

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

Недостатки:

• не поддерживает работу с крупными объектами, например сделать билборд хорошего качества в AI вряд ли получится;
• tребуются навыки работы в Adobe Illustrator.

CDR

Файлы CorelDRAW создают в Corel Paintshop Pro и CorelDRAW Graphics Suite — профессиональных платформах для работы с графикой. Изображение в CDR закодировано и сжато, но его можно открыть и обработать в вышеуказанных программах. 

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

Недостатки:

• совместим только с продуктами Corel;
• неподготовленному пользователю будет сложно разобраться в работе с форматом.

Новые форматы изображений

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

WebP

WebP — формат от Google, созданный специально для веб-графики. Изображения на страницах сайта должны загружаться быстро, иначе пользователи будут покидать его. WebP как раз помогает уменьшить «вес» изображения, но при этом сохранить его высокое качество. Конвертер для различных систем можно скачать на сайте Google Developers.

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

• интернет-оптимизация;
• поддержка прозрачности и анимации;
• высокое качество по сравнению с PNG и JPEG;
• совместимость почти со всеми браузерами.

Недостаток — для конвертации подходят только изображения в форматах PNG и JPEG.

Хотите понять, какие каналы приводят на сайт качественные лиды, а откуда посетители приходят «просто посмотреть» — и тут же уходят? Отслеживайте работу всех рекламных источников с помощью Сквозной аналитики Calltouch. Система объединит данные со всех площадок на наглядном дашборде, а с помощью интеграций с другими сервисами вы сможете получать максимум актуальной информации о клиентах, прибыли, работе менеджеров и маркетологов. 

Сквозная аналитика Calltouch

• Анализируйте воронку продаж от показов до денег в кассе
• Автоматический сбор данных, удобные отчеты и бесплатные интеграции

Узнать подробнее

HEIF

High-Efficiency Image File Format, или высокоэффективный формат файлов, предусматривает до десяти уровней сжатия изображения для сверхбыстрой загрузки.

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

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

Недостаток — открывается не во всех браузерах.

AVIF

AV1 Image File Format, или формат файлов изображений AV1, применяется для сжатия мультимедиа.

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

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

Недостаток — формат совместим не со всеми браузерами.

Памятка-гид по форматам 

Типы файлов изображений, их назначение и особенности:

Краткие выводы

• Графика может быть векторной и растровой. Первую используют дизайнеры, архитекторы и иллюстраторы, а примеры второй вы видите повсеместно: в соцсетях, в смартфоне, на работе (при электронном документообороте). 
• Форматы файлов векторных изображений: SVG, PDF, EPS, AI, CDR.
• Форматы файлов растровых изображений: PNG, JPEG, GIF, RAW, TIFF, BMP, PSD.
• Форматы, созданные специально для загрузки на сайты: WebP, HEIF, AVIF.
• Для больших и сложных проектов подойдет формат CDR — с помощью него создают изображения для билбордов. 
• Наиболее распространенные и простые в использовании форматы — PDF и JPEG.