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

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

Что такое форматы изображений и почему они важны

Любая картинка на сайте или в приложении — файл, сохраненный с определенным расширением. Оно прописывается в конце его названия: jpeg, png, eps. Это и есть формат, который хранит информацию об изображении и определяет его размер, качество и содержание. Если формат выбран неверно, фотография не загружается на веб-ресурсе или отображается некорректно. Иллюстрация становится «пиксельной», а гифка — статичной. 

Тип расширения указывается в названии файла

Формат влияет на то, как картинка выглядит в интерфейсе, и на ряд других факторов.

• Совместимость с разными программами. Графические редакторы поддерживают не каждый формат изображений. Чтобы открыть файл с ai-разрешением, нужен Adobe Illustrator. А чтобы отредактировать psd-шаблон, придется установить Adobe Photoshop. 
• Размер файла. Одни форматы весят меньше, другие — больше. Чем легче вес изображений, тем быстрее они отображаются на сайте. Чем тяжелее картинки, тем больше времени потребуется пользователю на загрузку веб-страницы.
• Масштабируемость изображения. От формата зависит, получится ли изменить размер картинки без потери качества. 

Векторные и растровые изображения: в чем разница

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

Растровые изображения

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

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

Популярные форматы растровых изображений: JPEG, PNG, GIF и TIFF.

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

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

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

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

Популярные форматы векторных изображений: AI, EPS и SVG.

Иконки — пример векторной графики 

Какие форматы изображений существуют: ТОП-12 самых популярных

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

1. PNG

Аббревиатура PNG расшифровывается как Portable Network Graphics, что в переводе с английского означает «портативная сетевая графика». Это растровый формат изображений, который используется в тех случаях, когда на веб-страницу нужно добавить логотип, иконку, кнопку или картинку без фона. В поисковике PNG-файл легко узнать по фону с бело-серыми квадратиками — они условно обозначают прозрачность.

PNG-изображения в поиске Google

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

• Делает фон картинки прозрачным.
• Поддерживает около 17 миллионов цветов и 255 степеней прозрачности.
• Изображение сжимается без существенной потери качества. Незначительные ухудшения сложно заметить невооруженным глазом.
• Формат совместим со всеми операционными системами, графическими редакторами и браузерами.
• По сравнению с фотоформатами вроде RAW, у PNG — компактный размер.

Недостатки PNG:

• PNG-файлы весят больше, чем GIF и JPEG.
• При печати картинки в PNG теряют качество.

2. JPEG

JPEG — растровый формат, названный в честь группы разработчиков Joint Photographic Experts Group. Сейчас он — самый распространенный в интернете, а файлы с расширениями .jpeg, .jpg, .jpe или .jfif встречаются в сети чаще всего. В таком формате сохраняют фотографии, полиграфические материалы, картинки для социальных сетей, дизайн-макеты, вайрфреймы и другие графические объекты. 

Формат отлично воспроизводит переходы цвета, блики, тени и полутона. Благодаря этому картинка получается объемной и реалистичной. Файлы занимают мало места на компьютере и быстро загружаются в браузере. При необходимости вес картинки можно уменьшить, но тогда ее качество ухудшится. Учитывайте, что JPEG дополнительно сжимается при каждом сохранении: после 3-4 раза изображение станет пиксельным.

Формат JPEG подходит для иллюстраций в блоге на сайте

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

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

Недостатки JPEG:

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

3. GIF

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

Пример гифки на сайте

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

• GIF — компактная альтернатива короткому видео;
• Гифки открываются во всех браузерах.
• Картинку можно сохранить без фона.

Недостатки GIF:

• Формат поддерживает всего 256 оттенков, поэтому у него плохая цветопередача.

4. TIFF

Tagged Image File Format — теговый растровый формат. Его используют, чтобы сохранить 100% качество изображения. TIFF-файл можно копировать и пересохранить множество раз — четкость и уровень детализации картинки при этом не пострадают. По этой причине его применяют преимущественно в полиграфии, когда готовят дизайн-макеты этикеток, упаковок и баннеров в печать.

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

NASA хранит снимки с космических телескопов в формате TIFF 

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

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

Недостатки TIFF:

• TIFF — тяжелый формат, поэтому не проходит для интернета.

5. EPS

Encapsulated PostScript переводится как «инкапсулированный постскрипт». Звучит сложно, но на деле это удобный векторный формат, которым пользуются веб-дизайнеры. С расширением .eps сохраняют логотипы, иконки, баннеры, макеты журналов и другие графические объекты на случай, если потребуется их редактировать: масштабировать картинку или изменить цвет и размер какой-то детали. EPS отличают хорошая цветопередача и высокая детализация изображений, поэтому он подходит для создания макетов с последующей отправкой в типографию. 

Даже маленькие иконки с расширением .eps «тяжелые», поэтому браузеры формат не поддерживают. Перед публикацией картинку конвертируйте в JPEG, PNG или WebP. Чтобы открыть EPS-файл, используйте специальный графический редактор: CorelDraw или Adobe Illustrator.

В EPS сохраняют логотипы, чтобы менять их размер под разные носители без потери качества

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

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

Недостатки EPS:

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

6. SVG

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

SVG — языковая разметка, поэтому файлы с таким расширением редактируются в иллюстраторе и с помощью HTML и CSS. Если потребуется изменить оттенок иконки, необязательно открывать фотошоп или иллюстратор: достаточно прописать новый цвет в коде.

Коллекция иконок в SVG-формате

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

• Изображение весит мало и быстро загружается в браузере.
• Если увеличить размер картинки в десятки раз, ее качество не пострадает.
• SVG-объекты поддерживают анимацию и становятся кликабельными, если к ним привязать ссылки.
• Если вы владеете кодом, чтобы изменить SVG-изображения не придется скачивать графический редактор.
• Чтобы добавить картинку на сайт, достаточно вставить ее код в HTML.

Недостатки SVG:

• Формат поддерживает ограниченное количество оттенков и не передает глубину цвета.
• Расширение не подходит для фотографий.

7. RAW

Этот термин знаком всем, кто увлекается фотосъемкой. С английского RAW переводится как «сырой». Название отлично передает суть формата: это исходное, неотредактированное изображение, полученное с помощью фотоаппарата или смартфона. Когда вы делаете фото в JPEG, камера автоматически обрабатывает и сжимает его. RAW-файл — оригинал снимка, который позволяет творить чудеса профессиональным фотографам: удалять шумы, настраивать экспозицию и баланс белого, повышать контрастность.

Фото справа выглядит слишком темным. Формат RAW помог спасти ситуацию и «вытянуть» нужную яркость без потери качества

У каждой камеры RAW-файлы имеют свое расширение: у Nikon — .nef, у Canon — .crw, у Sony — .arw. Чтобы открыть и отредактировать фотографию на компьютере, придется воспользоваться RAW-конвертером.

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

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

Недостатки RAW:

• Файл занимает много места.
• Формат поддерживают не все программы для просмотра и редактирования изображений.

8. PSD

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

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

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

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

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

Недостатки PSD:

• Чтобы открыть PSD-файл, нужен Adobe Photoshop.
• Чтобы опубликовать или распечатать изображение, его придется конвертировать в другой формат.
• Чем больше у картинки слоев, тем она тяжелее.

9. WebP

WebP расшифровывается как web picture, что в переводе означает «интернет-картинка». Формат придумал Google специально для веб-графики в 2010 году. Он позволяет уменьшить вес изображений и ускорить их загрузку на сайте, сохранив при этом высокое качество. WebP называют улучшенным аналогом JPEG, поскольку файлы с таким разрешением весят на 20-25% меньше.

В WebP конвертируются только PNG и JPEG-файлы

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

• Файлы мало весят, поэтому экономят место на сервере и жестком диске.
• WebP быстро грузятся в браузере и экономят интернет-трафик.
• Качество у изображений WebP выше, чем у PNG и JPEG.
• Формат подходит и для статичных и анимированных объектов, а также для картинок с прозрачным фоном.

Недостатки WebP:

• WebP поддерживают не все CMS (Content Management System — система управления контентом).

10. CDR

Аббревиатура CDR произошла от названия программы CorelDRAW, предназначенной для создания графики. Также CDR-файлы открываются в Adobe Illustrator и конвертируются с помощью бесплатных сервисов. Формат универсален: он позволяет отрисовывать векторные объекты и обрабатывать растровые изображения, применять к ним эффекты и фильтры, работать с текстом. Его используют в полиграфии, рекламе, веб-дизайне и других областях, поскольку .cdr расширение гарантирует высокое качество картинки.

CorelDRAW — программа для создания CDR-изображений

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

• Поддерживает растровую и векторную графику.
• В программе CorelDRAW доступен огромный набор инструментов для работы с изображениями.

Недостатки CDR: 

• Файл открывают не все графические редакторы, а перед публикацией его придется конвертировать.

11. PDF

Каждый сталкивался с PDF, когда заказывал билеты онлайн или скачивал квитанцию об оплате. Полное название формата — Portable Document Format. Компания Adobe Systems разработала его специально для электронного документооборота, но его применение намного шире. Файл поддерживает тексты, изображения, ссылки, аудио- и видеофрагменты. Поэтому сейчас в PDF сохраняют книги, гайды, чек-листы, презентации и учебные пособия.

Пример гайда мероприятий в формате PDF. Все ссылки в документе кликабельны

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

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

Недостатки PDF:

• Для редактирования файлов понадобится Adobe Acrobat Reader.

12. AI

AI — сокращение от Adobe Illustrator, программы для работы с векторной графикой. Она подходит для создания логотипов, иконок и иллюстраций и верстки макетов, поэтому ее и .ai расширение используют в веб-дизайне. Объекты в данном формате, масштабируются, сохраняя исходное качество. 

AI-формате используют для разработки и хранения лого компаний

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

• Предназначен для векторной графики, но поддерживает и растр.

Недостатки AI:

• Чтобы работать с AI-файлами, придется освоить Adobe Illustrator.

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

Давайте обобщим, для каких целей подходят разные форматы файлов изображений.

• Растровая графика — фотографии и иллюстрации. Если планируете распечатать картинку, выбирайте расширения с хорошей детализацией и цветопередачей: .raw или .tiff. Чтобы добавить изображение на сайт, лучше выбирать более компактные форматы вроде JPEG и PNG.
• Векторная графика используется для создания элементов интерфейса и брендированной символики. Отдавайте предпочтение «легким» и современным форматам — SVG или WebP.

Расширение файла зависит от того, какая программа для редактирования у вас установлена. Перед публикацией PSD, AI, и CDR-файлы придется конвертировать: тогда их получится разместить в интернете или распечатать.

Как сжать и увеличить картинку без потери качества

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

• Уменьшить вес файла помогут разные методы сжатия. Попробуйте изменить его формат или уменьшить размер, но помните, что во втором случае потеря качества неизбежна. Оптимальный способ — использовать сторонний сервис вроде Optimizilla. Он преобразовывает большие файлы в маленькие, сохраняя оригинальный уровень детализации.
• Увеличить изображение сложнее, чем уменьшить. Если дело касается векторной графики, никаких проблем: растяните картинку, воспользуйтесь сервисом Upscale Media или функцией «интерполяция» в графическом редакторе — она меняет размер пикселей. А вот растровое изображение при масштабировании неизбежно потеряет четкость.

Заключение

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