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

Форматы графических изображений: растровые и векторные

Дата публикации: 07.04.2023
9 654
Время чтения: 13 минут
Дата обновления: 23.10.2023
В статье рассказывается:

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

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

В статье рассказывается:

  1. Понятие формата графического изображения
  2. 7 растровых форматов графических изображений
  3. 8 векторных форматов графических изображений
  4. Какой формат графических изображений оптимален
  5. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

Понятие формата графического изображения

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

Понятие формата графического изображения
Понятие формата графического изображения

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

Растровая графика

Растровое изображение построено по следующему принципу: оно напоминает рисунок, выполненный «по клеточкам». Каждый элемент изображения состоит из определённого количества таких клеточек, закрашенных в тот или иной цвет. Эти квадратики называются пикселями.

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

Главный минус растрового изображения заключается в том, что при увеличении его размера (масштабировании) его качество становится хуже. Это происходит потому, что размер рисунка увеличивается за счёт увеличения каждого пикселя, а при сильном увеличении эти элементы становятся видны невооружённым взглядом.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

doc иконка

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

pdf иконка

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

pdf 3,7mb
doc 1,7mb
Уже скачали 31954 pdf иконка

Среди других недостатков растра можно назвать невозможность повернуть рисунок на угол (кроме 90°) без искажения пропорций. Ещё один минус – прямая связь размера файла и качества изображения.

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

Говоря о программном обеспечении, которое подходит для работы с этим типом изображений, следует назвать Adobe Photoshop как наиболее распространённое.

Векторная графика

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

Достоинствами векторных изображений являются простота редактирования (как всего рисунка, так и его частей), возможность корректировать размер изображения и даже значительно его изменять, не теряя при этом качества. Можно поворачивать рисунок на тот угол, который необходим пользователю. И ещё один плюс – размер файла небольшой и его можно изменять.

Векторная графика
Векторная графика

Можно легко преобразить векторное изображение в растровое, задав любое разрешение.

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

Среди наиболее часто используемого программного обеспечения для создания векторной графики –CorelDraw и Adobe Illustrator.

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

7 растровых форматов графических изображений

PNG

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

Кроме того, что мы сохраняем качество, выполняя сжатие в этом растровом формате, PNG имеет ещё одно преимущество: можно выбрать палитру хранения переходных этапов.

Преимущества Недостатки
Прозрачность фона Распечатанные изображения имеют невысокое качество
Формат поддерживает множество оттенков цвета (более 15 млн) Файлы большого размера
Совместим со многими браузерами и разновидностями программного обеспечения
Нет значимых потерь в качестве при сжатии

JPG

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

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

Преимущества Недостатки
Можно уменьшить размер файла При сжатии и обработке снижается качество
Хорошее качество передачи цвета
Совместим со всеми популярными программами и поддерживается различными браузерами
Быстро загружается
Хорошо подходит для любительской печати

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

GIF

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

Преимущества Недостатки
Используется вместо коротких видеороликов, таких, как скринкаст Небольшая палитра – 256 оттенков цвета
Поддерживается всеми браузерами Не поддерживается работа во многих графических редакторах
Возможность прозрачного фона
Изображение «оживляется»

RAW

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

Дарим скидку от 60%
на обучение «Дизайнер» до 24 ноября
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей
Забронировать скидку

На различных устройствах «сырые» файлы будут в разном расширении: CR2, NEF или DNG. Чтобы преобразовать изображение, нужен сервис, предназначенный для этого, например raw.pics.

Преимущества Недостатки
Содержит метаданные оригинала Требует большого объёма памяти на устройстве
Изображение в высоком качестве Необходимо конвертировать при использовании на разных устройствах
Невозможно распечатать изображение в этом формате

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

TIFF

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

Преимущества Недостатки
Сжатие без потери качества Файл имеет большой объём
Можно восстановить оригинал после редактирования Не поддерживается работа со старыми версиями программ для редактирования
Поддерживаются прозрачные и векторные слои

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

BMP

Формат Bitmap Picture от Microsoft имеет высокое качество и дополнительные расширения dib и rle. Используется для картинок и фотографий с высокой детализацией. BMP редко применяется специалистами по той причине, что на смену этому устаревшему формату пришли такие, как RAW и TIFF, являющиеся более удобными.

Преимущества Недостатки
Обладает высоким качеством Файлы большого размера
Изображение имеет подробную детализацию При сжатии теряется качество
Многие программы в настоящее время уже не поддерживают данный формат

PSD

Документы в формате Photoshop Document создаются с помощью Adobe Photoshop. Можно обрабатывать многослойные анимированные изображения или видео.

Преимущества Недостатки
Содержание большого количества слоев Можно работать только в Photoshop
Поддержание прозрачности Чтобы распечатать изображение или загрузить в другие программы, нужно переформатировать файл
Несложно адаптировать под веб-страницы
Возможность обработки видео и анимации

8 векторных форматов графических изображений

PDF

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

Только до 25.11
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы получить файл, укажите e-mail:
Введите e-mail, чтобы получить доступ к документам
Подтвердите, что вы не робот,
указав номер телефона:
Введите телефон, чтобы получить доступ к документам
Уже скачали 52300

Преимущество данного формата заключается в том, что работать можно в специальных приложениях, таких как Acrobat, а также Microsoft. Универсальность формата PDF позволяет использовать многие программы.

Преимущества Недостатки
Адаптирован для печати Редактируется только с помощью платных программ
Лёгкость загрузки, отправления и открытия Невозможность копирования некоторых фрагментов содержимого файла
Может содержать текст, векторную и растровую графику

SVG

Название формата SVG расшифровывается как «масштабируемая векторная графика». Назначение формата – разработка и описание двухмерных векторных изображений. Любую часть рисунка можно увеличить без потери качества, так как изображение относится к векторным.

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

EPS

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

Преимущества Недостатки
Удобен в применении в сфере полиграфии и веб-дизайна Отсутствует универсальность
В Фотошопе преобразуется в растровый формат Не предназначен для любительской печати
Совместим не с любым программным обеспечением

AI

С этим форматом от Adobe Illustrator, чаще всего работают профессиональные иллюстраторы и специалисты веб-дизайна.

Преимущества Недостатки
Можно сочетать растровую и векторную графику Не подходит для работы с крупными объектами, например нельзя создать в AI билборд хорошего качества
Возможность содержания в файле большого объёма графической информации Для работы необходимы навыки использования Adobe Illustrator

CDR

Для создания файлов CDR используются специальные платформы для работы с графикой: Corel Paintshop Pro и CorelDRAW Graphics Suite. Открыть и обработать закодированное и сжатое изображение можно только в них.

Преимущества Недостатки
Можно работать с большими графическими проектами Совместимость исключительно с продуктами Corel
Без подготовки трудно разобраться в работе с форматом

Высокое разрешение изображений в формате CDR позволяет широко применять его для иллюстрирования и создания рекламы.

WebP

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

Преимущества Недостатки
Изображение оптимизировано для интернета Конвертировать можно только изображения в форматах PNG и JPEG
Поддерживается прозрачность и анимация
Качество выше, чем в форматах PNG и JPEG
Формат совместим почти с любым браузером.

HEIF

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

Преимущества Недостатки
Быстрая загрузка Можно открыть не в любом браузере
Сохранение высокого качества
Поддержка анимированных изображений, прозрачных слоёв

AVIF

Область применения формата AV1 Image File Format – сжатие мультимедиа.

Преимущества Недостатки
Файлы занимают мало места и быстро загружаются Совместимость не с любыми браузерами
Поддерживается анимация и прозрачные слои
Хорошее качество цветопередачи

Какой формат графических изображений оптимален

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

Чтобы сохранять пиктограммы, схемы, изображения с прозрачностью или картинки, содержащие много текста, оптимально применять PNG. При сжатии с помощью алгоритма PNG не теряется качество изображения.

Какой формат графических изображений оптимален
Какой формат графических изображений оптимален

Если в приоритете небольшой размер изображения, лучше подойдёт JPG, а имея возможности большого объёма памяти, стоит использовать преимущества PNG. Когда главнее всего получить наиболее высокое качество, не обращая внимания на размер получившегося файла, подходит TIFF. А когда нужен минимальный «вес» или эффект анимации, можно использовать GIF.

Хотите создавать собственные визуальные шедевры? Вам по плечу стать веб-дизайнером с нашим курсом. Погрузитесь в мир композиции, типографики и UX, научитесь воплощать идеи в Figma, Photoshop и Tilda, и сделайте первые шаги к созданию уникальных сайтов.
Оцените статью:
5
Добавить комментарий

Сортировать:
По дате публикации
По рейтингу
Читайте также
prev
next
Бесплатные вебинары:
prev
next
Как работает дизайн-студия на примере одного кейса 

Как работает дизайн-студия на примере одного кейса 

Узнать подробнее
Инновационные подходы к обучению информационным технологиям

Инновационные подходы к обучению информационным технологиям

Узнать подробнее
Как стать Python-разработчиком

Как стать Python-разработчиком

Узнать подробнее
Что нужно знать разработчику

Что нужно знать разработчику

Узнать подробнее
Кто такой тестировщик и как им стать

Кто такой тестировщик и как им стать

Узнать подробнее
Чем занимается программист и как им стать

Чем занимается программист и как им стать

Узнать подробнее
Как искусственный интеллект помогает и мешает задачам кибербезопасности

Как искусственный интеллект помогает и мешает задачам кибербезопасности

Узнать подробнее
Бесплатный вебинар про внедрение искусственного интеллекта

Бесплатный вебинар про внедрение искусственного интеллекта

Узнать подробнее
Какие есть профессии в ИТ

Какие есть профессии в ИТ

Узнать подробнее
Смените профессию,
получите новые навыки,
запустите карьеру
Поможем подобрать обучение:
Забрать подарок

Получите подробную стратегию для новичков на 2023 год, как с нуля выйти на доход 200 000 ₽ за 7 месяцев

Подарки от Geekbrains из закрытой базы:
Осталось 17 мест

Поздравляем!
Вы выиграли 4 курса по IT-профессиям.
Дождитесь звонка нашего менеджера для уточнения деталей

Иван Степанин
Иван Степанин печатает ...