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