Какие бывают форматы изображений и чем gif отличается от png и jpeg

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

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

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

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

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

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

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

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

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

Узнай, какие ИТ — профессии входят в ТОП-30 с доходом от 210 000 ₽/мес

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

Команда GeekBrains совместно с международными специалистами по развитию карьеры
подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в
IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее
будущее!

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

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

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

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

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

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

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

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

Получить подборку бесплатно

pdf 3,7mb
doc 1,7mb

Уже скачали 22318

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

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

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

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

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

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

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

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

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

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

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

Векторные форматы изображений

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

4.1. SVG

Scalable Vector Graphics («масштабируемая векторная графика») занимает одно из первых мест по популярности для веб-браузеров. Разработчики часто используют SVG для создания логотипов, значков и иллюстраций, поскольку он идеально подходит для двухмерной графики и может редактироваться в программах редактирования графики и текста. Он также имеет значительно меньшие размеры файлов, чем некоторые другие варианты, что делает его быстрым выбором для загрузки.

Идеально для: любой веб-графики

Плюсы:

• Очень легкий
• Может использоваться для анимации
• Может использоваться для интерактивной графики, инфографики и диаграмм
•  Может быть добавлен непосредственно в HTML без ссылки на изображение

Минусы:

• Не лучший выбор для большой глубины цвета
• Не оптимизирован для печати

4.2. PDF

PDF-файлы Adobe довольно распространены. Вы, несомненно, видели их при загрузке изображений. PDF (Portable Document Format) позволяют просматривать формат без специального программного обеспечения с любого устройства, хотя у вас должна быть бесплатная программа для чтения Adobe PDF. Таким образом, это отличный инструмент для обмена графикой, поскольку он работает на всех устройствах, браузерах, приложениях и операционных системах. Adobe Illustrator и Photoshop могут экспортировать прямо в PDF, будучи готовыми к печати. Есть опции редактирования, но в качестве дополнения.

Идеально для: просмотра и / или печати многостраничных документов с различными элементами.

Плюсы:

• Готов к печати (предпочтительный формат для передачи на большинство принтеров)
• Отлично подходит для документов, содержащих текст и графику: плакаты, брошюры, листовки и журналы
• Легко загружать и распечатывать несколько страниц

Минусы:

• Опции редактирования являются дополнительными
• Может потребоваться конвертация в другие форматы

4.3. EPS

EPS или Encapsulated PostScript — это в первую очередь формат векторных изображений, хотя он может включать растровые данные. Файлы EPS можно открывать и создавать практически во всех программах для дизайна, включая CorelDraw и Adobe Illustrator. Они идеально подходят для создания графики с очень высоким разрешением для печати.

Идеально для: иллюстраций и рисунков.

Плюсы:

• Универсальный формат, просматриваемый во многих приложениях
• Может быть преобразован в растровую графику
• Автоматическое разрешение

Минусы:

• Редактирование ограничено определенными приложениями
• Некоторые принтеры не любят EPS
• Плохо поддерживается браузерами

4.4. AI

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

Идеально для: проектов Adobe Illustrator

Плюсы:

• Отличное редактирование векторных иллюстраций.
• Отлично подходит для комбинированных (вектор + растр) проектов, таких как плакаты, листовки, брошюры и т. д.

Минусы:

• Поддерживается не всеми браузерами
• Ограниченное редактирование растра

4.5. CDR

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

Идеально для: проектов CorelDRAW

Плюсы:

• Транформируемый
• Популярен в художественном сообществе
• Масштабируемый

Минусы:

• Только для использования в приложениях Corel, поддерживаемых Windows
• Только для двухмерных изображений

PDF

PDF – довольно распространенный формат, который был создан компанией Adobe Systems. Как правило, файлы PDF используются для передачи различных документов при помощи всемирной сети.

PDF может содержать тексты вместе с графикой, с различными интерактивными элементами, с гиперссылками и даже с видео.

Отличительная особенность PDF – возможность сохранения и распечатки документа именно в том виде, в котором он представлен (с сохранением шрифтов, разметки и прочих элементов). Соответственно документ в этом формате теоретически нельзя редактировать и что-либо менять.

В PDF также можно настроить запрет копирования. Подобные запреты позволяют авторам документов защищать свои авторские права.

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

Это важно для авторов, которые не хотят, чтобы их «произведения» были искажены или скопированы

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

Другие материалы по компьютерной грамотности:

1. Как конвертировать файл, который не открывается, или онлайн конвертер на русском

2. Как уменьшить вес фото

3. Поиск похожих картинок в Яндексе

4. Как в папке расположить файлы в нужном порядке

5. Как сохранить веб-страницу в PDF-документ

Какой формат использовать

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

JPG

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

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

Большинство фотоаппаратов имеет несколько настроек качества изображения, например высокое, среднее и низкое. Я рекомендую вам выбрать самое высокое качество изображения для формата JPG, так как при установке низкого качества вы будете получать совершенно неприемлемые изображения. С другой стороны, при установке самого высокого качества изображения и разрешения будет использовано больше.

Графические файлы без потерь

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

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

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

RAW

Есть еще один формат файла, с которым вы можете столкнуться в некоторых цифровых фотоаппаратах. Формат RAW намного лучше, чем TIF. Как отмечалось выше, он сохраняет совершенно не сжатые данные о фотографии.

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

Многие графические редакторы не способны обрабатывать файлы формата RAW. Для того чтобы открыть такой файл RAW необходимо установить на компьютер специальное приложение, плагин для графического редактора. Однако компании поставляют камеры со специальным софтом, который понимает RAW.

Рекомендации

Цифровые изображения имеют широкий круг применения, и именно поэтому существует так много форматов файла. Ниже приведены несколько советов по выбору формата файла, которые могли бы пригодиться вам:

• Если вы хотите разместить изображение в Интернете, то JPG будет лучшим выбором. Но GIF-файлы хороши тем, что их удобно размещать в тексте, за счет прозрачного фона.
• Если вы собираетесь печатать фотографии большого размера, например 20х30 см или более, то наиболее подходящими являются форматы TIF и JPG.
• Для слайдшоу и большинства подобных проектов идеально подходит JPG.
• Для профессиональной работы и гибкости настроек фотографии используйте RAW

Почитайте так же урок о том, какой планшет выбрать фотографу

Основные термины для понимания темы

Пиксели

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

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

Линейный размер

– это данные о ширине и высоте напечатанного снимка, выраженные в миллиметрах. Их можно узнать при помощи обычной линейки. К примеру, линейная величина снимка с параметрами 10*15 см –102*152 мм.

Параметры в пикселях

– это данные о ширине и высоте цифровой картинки.

Рассмотрим примеры. Если картинка имеет величину 450×300 точек растра, то снимок будет повернут под альбом, то есть располагаться горизонтально. От чего это зависит? Ширина снимка больше, чем высота.

Если взять величину картинки 300*450, то она будет располагаться в книжной ориентации, то есть вертикально. Отчего так? Ширина меньше, чем высота.

Разрешение – число, которое связывает между собой величины в миллиметрах и в пикселях, измеряемое в dpi
(от англ. «dots per inch» – количество точек на дюйм).

Специалисты советуют ставить разрешение – 300 dpi, предназначенное для получения высококачественных фотоснимков. Минимальное разрешение – 150 dpi.

Но, стоит заметить, что если вы делаете фотоснимок крупнее оригинала, то есть «растягиваете точки растра», то качество падает.

Разрешение может меняться в зависимости от различных моделей фотокамер. В чем же секрет? Производители фототехники указывают неточное число мегапикселей, к примеру, 12 МП. На самом деле может оказаться 12.3 или 12.5 МП. Но качество печати не ухудшится от этого факта.

Расширения имен файлов для основных графических форматов

(Список отсортирован по расширению.)

Формат	Расширение имени
Adobe Illustrator	.ai, .eps
CorelDRAW Binary Meta File	.ccx
CorelDRAW	.cdr
Computer Graphics Metafile	.cgm
Курсоры мыши	.cur, .ani
Device Independent Bitmap	.dib
DjVu	.djvu
Micrografx Designer	.drw
AutoCAD DXB (Drawing Interchange Binary)	.dxb
AutoCAD DXF (Drawing Interchange Format)	.dxf
Windows Enhanced Metafile	.emf
Encapsulated PostScript	.eps
Macromedia Flash	.fla
FlashPix	.fpx
Graphics Interchange Format	.gif
Векторная графика на языке HPGL для графопостроителя(Hewlett-Packard Graphic Language)	.hpg, .hpgl
Пиктограммы (Icon)	.ico
Joint Picture Motion Group (JPEG File Interchange Format)	.jpg или, реже, .jpeg
Kodak Photo CD	.pcd
PC Paintbrush	.pcx
Portable Document Format (PDF)	.pdf
PICT (Macintosh QuickDraw Picture Format)	.pic или .pct.
Portable Network Graphics	.png
PostScript	.ps или, реже, .prn
Adobe Photoshop	.psd, .pdd
Необработанные данные с ПЗС‑матрицы	.raw
LizardTech MrSID image compression format	.sid
TrueVision Targa	.tga
Toggle Immage File Format	.tif или, реже, .tiff
Метафайл Windows	.wmf
WordPerfect Graphics	.wpg

Более подробную информацию по расширениям имен файлов можно найти в Интернете, например, здесь.

Обновление за сентябрь 2023 г .:

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

• Шаг 1: (Windows 10, 8, 7, XP, Vista — Microsoft Gold Certified).
• Шаг 2: Нажмите «Начать сканирование”, Чтобы найти проблемы реестра Windows, которые могут вызывать проблемы с ПК.
• Шаг 3: Нажмите «Починить все», Чтобы исправить все проблемы.

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

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

Использование GIF

Характеристики формата:

• Поддержка сжатия: без потерь (Lempel-Ziv-Welch, LZW)
• Поддержка прозрачности: Да
• Поддержка анимации: Да (отличительная особенность данного формата)
• Поддержка черезстрочного отображения: Да (interlaced)
• Количество цветов: индексированные цвета (256 цветов)
• Совместимость с другими платформами: все платформы

Рекомендации: целесообразно использовать этот формат в Web, для изображений без плавных цветовых переходов (логотипы, баннеры,  надписи, схемы). Хороший тип сжатия и малое количество поддерживаемых цветов позволяют экономить место при хранении графики, а также использовать при создании сайтов для более быстрой загрузки HTML-страниц. Черезстрочная развертка дает возможность увидеть и оценить загружаемое изображения не дожидаясь окончание загрузки. Тем не менее, ограниченный набор цветов делает непригодным этот формат для хранения изображений с плавными переходами, градиентами и т.д. Применяется в основном в Интернете.

Использование PNG

Характеристики формата:

• Поддержка сжатия: сжатие без потерь (Deflate)
• Поддержка прозрачности: Да
• Поддержка анимации: Да (APNG)
• Поддержка черезстрочного отображения: Да (two-dimensional interlacing)
• Количество цветов: Deep Color
• Совместимость с другими платформами: все платформы

Рекомендации: наиболее совершенный алгоритм сжатие в PNG позволяет сохранять файлы меньше по объему, чем в GIF. Возможность применения абсолютно любого цвета и использование прозрачности делают этот формат лидером в плане применения в Web. Я бы рекомендовал использовать его вместо GIF. Область применения — используется при дизайне Web-сайтов, редактировании изображений и т.д. Это универсальный формат с большим будущим.

Использование JPEG

Характеристики формата:

• Поддержка сжатия: сжатие с потерями
• Поддержка прозрачности: отсутствует
• Поддержка анимации: отсутствует
• Поддержка черезстрочного отображения: Да (Progressive JPEG)
• Количество цветов: True Color (модели RGB и CMYK)
• Совместимость с другими платформами: все платформы

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

Использование TIFF

Характеристики формата:

• Поддержка сжатия: поддерживает возможность применения различных алгоритмов сжатия (в зависимости от самого сохраняемого изображения)
• Поддержка прозрачности: отсутствует
• Поддержка анимации: отсутствует
• Поддержка черезстрочного отображения: отсутствует
• Количество цветов: 8, 16, 32 и 64 бит на кана (модели Lab, RGB и CMYK)
• Совместимость с другими платформами: все платформы

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

Использование BMP

Характеристики формата:

• Поддержка сжатия: есть возможность использования сжатия без потерь (Run Length Encoding, RLE)
• Поддержка прозрачности: отсутствует
• Поддержка анимации: отсутствует
• Поддержка черезстрочного отображения: отсутствует
• Количество цветов: модель RGB, глубина цвета 24 бита
• Совместимость с другими платформами: только Windows

Рекомендации: данный формат не пригоден для использования в Web, типографике и даже для хранения изображений (из-за отсутсвия сжатия изображений). Используется только из-за того, что «внедрен» в ОС Windows по умолчанию.

SVG

SVG (Scalable Vector Graphics standard) – новый графический стандарт векторной графики. Этот стандарт принципиально отличается от своих предшественников, тем, что изображение в нем описывается текстом на декларативном языке XML.

Например, чтобы описать изображение круга с центром в координатах (100,50), красной заливкой, радиусом 40 пикселов и черной границей толщиной в 2 пиксела, нужно записать следующий код:

stroke-width=»2″ fill=»red» />

Замечание 1

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