Вы когда-нибудь задумывались над тем, чем отличаются такие виды форматов графических файлов, как JPG и PNG, и в каких случаях каждый из них надлежит использовать?
Если углубиться в графический дизайн, то можно найти много как интересного и полезного, так и непонятного и способного довести до безумия. Чтобы разобраться в хитросплетениях «графической вселенной», мы предлагаем вам прочесть эту статью и больше не ломать голову на этим вопросом.
Векторная и растровая графика
Высокое разрешение против низкого
Универсальные форматы графических файлов
Форматы графических файлов: особенности
Формат графического файла JPG
Формат графического файла PNG
Формат графических файлов GIF
Формат графических файлов BMP
Формат графических файлов TIFF
Формат графических файлов PSD
Формат графических файлов PDF
Формат графических файлов EPS
Формат графических файлов AI
Формат графических файлов INDD
Формат текстовых графических файлов
Терминология
Векторная и растровая графика
Прежде чем описывать форматы растровых, векторных графических файлов, нужно разобраться, чем отличается растровая графика от векторной.
Растровые изображения состоят из сотен и тысяч рядов пикселей. Такие форматы, как JPG, PNG и GIF — наиболее распространенные растровые типы файлов графических форматов.
Любая картинка, которую вы видите в сети, — это образец растрового изображения в том или ином формате графического файла. HTML практически не поддерживает векторную графику.
Чем больше пикселей приходится на единицу площади изображения, тем оно четче, и наоборот. Соответственно, разделяют изображения в высоком разрешении и низком. Вы не можете изменить размер изображения без изменения его разрешения, а значит и качества.
Поэтому растровые иллюстрации необходимо сохранять в тех пропорциях, в которых они затем будут использованы.
Векторная графика — это графика, построенная с помощью пропорциональных формул. EPS, AI и PDF — это векторные форматы графических файлов, и, если вам требуется часто изменять размеры изображения, лучше пользоваться именно ими.
К примеру, логотип вашей компании определенно должен быть выполнен в векторной графике, а исходный файл — всегда лежать под рукой. Главное преимущество векторной графики заключается в том, что вы можете ужать изображение до размеров почтовой марки или увеличить до полноценного билборда размером 3 на 6 м.
Если вы не уверены, есть ли у вас в наличии векторное изображение логотипа, сделайте звонок в типографию, которая печатает всю вашу продукцию. В 99% у них будет векторный вариант вашего лого.
Высокое разрешение против низкого
Часто ли вы слышали от своего дизайнера такие аббревиатуры как DPI и PPI? Раскроем вам тайну. DPI, то есть dots per inch (количество точек на дюйм), и PPI, соответственно, pixels per inch (количество пикселей на дюйм) — это единицы измерения, которые применяются для характеристики разрешения изображения.
И именно они указывают на качество изображения и его пригодность для тех или иных нужд. К примеру, значения DPI или PPI для изображений, которые вы планируете размещать на лендинге, могут быть равны 72. Это низкое разрешение, однако в сети, где каждый байт информации на счету, такие изображения будут кстати.
В то же время если вы собираетесь распечатать изображение, то ниже значения 300 dpi мы вам опускаться не советуем. Не пытайтесь обмануть систему. В таких программах, как Photoshop, вы можете делать что угодно, но из пустоты дополнительных пикселей вы не получите.
Взять изображение из сети и подогнать его под значения для печати не стоит даже пытаться: распечатанная картинка будет далека от идеала.
Универсальные форматы графических файлов
Большинство графических редакторов позволяет просматривать и обрабатывать как файлы собственного формата, так и изображения, представленные в универсальных форматах.
Универсальные растровые форматы: JPEG, PNG, GIF, BMP, TIFF.
Универсальные векторные форматы: EPS, Windows Metafile, DXF, SVG, HP-GL.
Сжатие изображений
Чтобы сэкономить пространство для хранения графических файлов и быстрее передавать его по сети, к ним применяются алгоритмы сжатия данных. Оно делится на два типа. Сжатие с потерями означает, что закодированные данные будут отличаться от исходных, но, как правило, незначительно. Однако при увеличении степени сжатия на картинке появляются заметные невооруженным глазом артефакты. Сжатие с потерями использует, например, JPEG формат. Сжатие графических файлов без потерь возможно в форматах TIFF, BMP, GIF и PNG, и оно позволяет восстановить распакованные данные с точностью до бита.
Форматы графических файлов: особенности
Перечислим основные форматы графических файлов и рассмотрим каждый из них.
Формат графического файла JPG
JPEG (или JPG) - Joint Photographic Experts Group (по названию разработчика)
JPG — это один из самых популярных форматов графических файлов, использующих сжатие. Этот формат широко применяется в фотографии и для передачи изображений в интернете. Среди его достоинств — высокая степень сжатия (относительно других форматов) и невысокая вычислительная сложность.
Какие расширения могут иметь графические форматы файлов JPEG? Обычно это .jpeg, .jfif, .jpg, .JPG, или .JPE.
Недостаток у JPG только один, но он существенный: по мере сжатия изображение теряет в качестве. То есть для чертежей, текстовой графики и медицинских изображений этот формат не подходит совершенно.
Используйте формат графического файла JPG для оформления своих посадочных страниц и для печати фотографий в высоком разрешении.
Формат графического файла PNG
PNG — Portable Network Graphics (портативная сетевая графика)
PNG идеален для оформления интернет-страниц, но мало пригоден для печати. Изображение этого формата не потеряет в качестве, даже если вы будете обрабатывать его в графическом редакторе.
Веб-дизайнеры любят формат PNG, потому что он позволяет сохранять изображения с прозрачным фоном. А прозрачный фон дает вам большие возможности при создании дизайна сайта.
Формат графических файлов GIF
GIF — Graphics Interchange Format (формат для обмена изображениями)
Формат GIF нам знаком по анимированным рекламным баннерам. В более простой форме GIF изображения состоят всего лишь из 256 цветов в цветовом пространстве RGB. Именно из-за ограниченного числа цветов gif-изображения весят очень мало.
Этот формат отлично подходит для интернет-пространства, где небольшой вес изображений позволяет им быстро загружаться, а это крайне важно.
Формат графических файлов BMP
BMP — Bitmap Picture
BMP — это один из первых растровых форматов, и его распознаёт каждая программа для работы с графикой. Файлы формата BMP могут иметь расширения .bmp, .dib и .rle. Этот формат весит больше, чем JPG, и подходит для полиграфии меньше, чем TIFF, поэтому сейчас BMP почти нигде не используется.
Формат графических файлов TIFF
TIFF — Tagged Image File Format
TIFF — это самый тяжелый из растровых форматов, и используется он в процессе подготовки фотографий к печати. Не советуем использовать изображения этого формата на своих сайтах и целевых страницах, иначе они будут загружаться невыносимо долго.
Формат графических файлов PSD
PSD — Photoshop Document
PSD — это формат популярного графического редактора Adobe Photoshop. Этот формат позволяет сохранять так называемые слои, с помощью которых в программе и производится обработка и создание графики.
Photoshop позволяет сохранять изображения во всех описанных выше форматах.
Основной недостаток этого редактора в том, что он работает только с растровой графикой.
Формат графических файлов PDF
PDF — Portable Document Format (портативный формат документа)
Формат PDF был изобретен компанией Adobe в качестве универсального инструмента для обмена графикой. Ваш дизайнер может сохранить векторный логотип компании в формате PDF, а вы без труда можете открыть его без каких-либо графических редакторов (если, конечно, заранее установите бесплатное приложение Adobe Reader) и далее использовать для дальнейшей работы.
Формат графических файлов EPS
EPS — Encapsulated Postscript (формат, базирующийся на подмножестве языка PostScript)
Этот формат является представителем векторной графики и используется для создания и печати изображений в высоком качестве.
Главная особенность этого формата в том, что он не привязан к какому-либо конкретному дизайнерскому «софту», то есть файлы этого формата можно открыть как в программах от компании Adobe, так и в CorelDraw и многих других.
Формат графических файлов AI
AI – Adobe Illustrator Document
Ai — это, несомненно, один из самых популярных форматов, используемых профессиональными дизайнерами, а Adobe Illustrator — это программа, которая уже давно стала незаменимым инструментом в их арсенале.
Софт создавался как редактор векторной графики, однако в нем представлены довольно обширные возможности для создания изображения любой сложности с нуля. Скорее всего, и ваш логотип первоначально был создан именно в этой программе.
Формат графических файлов INDD
INDD — Adobe Indesign Document
Этот формат графики создается в программе Adobe Indesign, в которой обычно производится верстка газет и журналов.
Формат текстовых графических файлов
Ещё один интересный вид изображений — ASCII графика. Основное различие между форматами растровых графических файлов и ASCII графикой заключается в том, что последняя состоит не из пикселей, а из буквенных и цифровых символов и знаков препинания, входящих в таблицу символов ASCII.
Есть два типа компьютерных программ для создания таких изображений: первые похожи на обычные графические редакторы, работающие в текстовом режиме, вторые преобразуют в ASCII-графику обычные картинки.
Заключение
Работа с графическими файлами на первый взгляд может показаться делом довольно трудоемким, но стоит только вникнуть во все особенности рассмотренных выше файлов и столкнуться с ними на практике, как все трудности сменятся радостью первооткрывателя.
Пользуйтесь нашими нехитрыми советами, осваивайте красочный мир графики и творите незабываемые шедевры на ваших лендингах.
Высоких вам конверсий!
По материалам blog.hubspot.com, image source Dung Hoang
