Что такое формат JPG GIF или PNG?

В чем разница между форматами JPEG, GIF, PNG, RAW, BMP, TIFF?

Вам известна разница между JPEG, GIF, PNG и другими графическими форматами? Когда нужно использовать тот или иной формат, или какой лучше всего подойдет для сохранения фотографий? Ниже вы найдете ответы на все эти вопросы.

Алгоритмы сжатия данных с потерями / без потерь

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

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

Формат файлов, содержащий необработанную информацию, поступающую напрямую с матрицы полупрофессиональной и профессиональной фотокамер. Эти файлы не обрабатываются процессором камеры и содержат всю отснятую информацию в «сыром» виде. Размер таких файлов может превышать 25 МБ. Файлы RAW отлично подойдут для редактирования, однако из-за большого размера хранить их не слишком удобно.

.JPEG (JPG)

Это, пожалуй, самый распространенный графический формат. Обычно он используется для публикации в интернете фотографий и изображений с текстом. JPEG является TrueColor-форматом, то есть может хранить изображения с глубиной цвета 24 бит/пиксель. Данный формат может отображать более 16 млн цветов.

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

JPEG с высоким качеством (100). Размер 113 КБ

JPEG со средним качеством (50). Размер 59 КБ

JPEG с низким качеством (20). Размер 27 КБ

Формат GIF (Graphics Interchange Format) не радует глубиной цвета (8 бит). Он может хранить сжатые без потери данных изображения в формате не более 256 цветов. Одной из особенностей GIF является поддержка анимации.

ПО ТЕМЕ:

Данный формат был разработан в качестве замены GIF. Расшифровывается PNG как Portable Network Graphics. В отличии от GIF, у PNG есть поддержка градаций прозрачности за счет дополнительного альфа-канала. Обычно на прозрачность указывает шахматный фон, как видно из расположенного ниже изображения.

Внешне файлы в формате PNG практически не отличаются от JPG-изображений. PNG сжимает данные без потерь. Если для вас важна прозрачность, лучше выбирать именно этот формат.

Данная аббревиатура расшифровывается как Tagged Image File Format. Это высококачественный формат, использующийся для хранения изображений с большой глубиной цвета. Файлы TIFF могут храниться как в сжатом, так и в распакованном виде. Большим достоинством формата остается поддержка практически любого алгоритма сжатия.

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

Формат BMP (bitmap) один из первых графических форматов и в настоящее время не слишком популярен. BMP хранит изображения с глубиной цвета до 64 бит. Данный формат поддерживает прозрачность, однако он не читается некотороми приложениями Microsoft. Иными словами, файлы BMP лучше конвертировать в другие форматы.

Так какой же формат следует использовать?

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

Ниже опубликована сравнительная таблица характеристик различных форматов.

Чем отличаются форматы изображений и зачем они нужны

Чем отличаются форматы изображений и зачем они нужны

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

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

В статье будет использоваться одна и та же фотография для сравнения. В браузере нельзя отобразить её в формате RAW, но просмотр высококачественных фотографий в формате JPEG или PNG должен дать представление о том, как выглядит оригинал. Также для сравнения необработанный файл этой фотографии имеет размер 12,4 МБ.

Наиболее распространённый формат изображений JPEG (или JPG) является стандартом организации Joint Photographic Experts Group и часто используется для публикации фотографий и изображений текста в интернете. Формат поддерживает 24 бита на пиксель, по 8 для зелёного, синего и красного, что делает этот формат «truecolor», который может отображать более 16 000 000 цветов.

13 сентября – 9 октября, Санкт-Петербург и онлайн, Беcплатно

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

JPEG высокого качества (качество установлено на 100), размер: 471 КБ

JPEG среднего качества (установлено качество 50), размер: 68 КБ

JPEG низкого качества (качество установлено до 20), размер: 32 КБ

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

Graphics Interchange Format (GIF) допускает 8 бит на пиксель, по три на красный и зелёный и два на синий. Поэтому GIF-файлам доступны 256 цветов, хотя можно получить и больше, используя несколько цветовых блоков с различными 256-цветными палитрами. При сжатии без потерь GIF-файлы могут идеально воспроизводить свои ограниченные цветовые палитры при многократном повторном сжатии.

Вот тестовая фотография в кодировке GIF:

Размер GIF: 194 КБ

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

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

Тип файла Portable Network Graphics, предназначенный для замены GIF, — это ещё один формат сжатия без потерь. Он содержит значительно больше информации, чем его предшественник: 24 или 32 бита на пиксель. 24-разрядная версия содержит информацию RGB, а 32-разрядная использует цветовое пространство RGBA. «A» в RGBA означает «альфа», что обеспечивает разные уровни прозрачности изображения (клетчатый фон, как на рисунке ниже, обычно указывает на прозрачность).

Поскольку PNG-файл содержит гораздо больше информации, он будет немного больше, чем JPEG или GIF.

Размер PNG: 1,5 МБ

Эта фотография PNG выглядит не лучше, чем высококачественный JPEG, хотя важно помнить, что сжатие без потерь будет поддерживать качество фотографии при многократном повторном сжатии. Кроме того, если важна прозрачность, PNG — верное решение.

The Tagged Image File Format изначально разрабатывался для сканеров и становился всё более сложным по мере того, как сканеры переходили от чёрно-белого к полутоновому и до полноцветного изображения. Теперь это широко используемый полноцветный тип файла. TIFF-файлы могут быть сохранены в сжатом или несжатом виде, а используемое сжатие может быть с потерями или без. В большинстве случаев будет использоваться сжатие без потерь, хотя, если размер важен, можно пожертвовать качеством.
Поскольку TIFF технически является обёрткой или контейнером файла, он может сохранять изображения с различными битами на пиксель, предоставляя вам возможность иметь очень большое количество цветов, как это было бы с JPEG или PNG.

Примечание Поскольку поддержка TIFF не универсальна в браузерах, показаны высококачественные JPEG-скриншоты TIFF-файлов.

Несжатый размер TIFF: 2,2 МБ

Размер сжатого файла TIFF: 1,6 МБ

Эти файлы изображений без потерь немного объёмнее, чем форматы JPEG или GIF, но они содержат гораздо больше информации. Хотя в интеренете вы не видите TIFF так же часто, как другие форматы, он очень широко используется и может быть открыт практически любой программой для редактирования изображений.

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

BMP (bitmap) — это, прежде всего, формат для Windows, и стандарт поддерживается Microsoft. Как и TIFF, он может хранить произвольное количество бит на пиксель, вплоть до 64, а значит, он содержит много информации об изображении. Этот формат может содержать данные о прозрачности, но некоторые приложения Microsoft не позволяют их читать.

Короче говоря, если у вас есть BMP, конвертируйте его во что-то другое. Всё будет работать лучше.

Размер BMP: 1,1 МБ

Какой формат изображений лучше использовать?

Короткий ответ: для большинства целей PNG — очень достойный вариант. Особенно если изображения большого размера. Например, для печати фотографий размером 8×10 и более. Различие между типами файлов наиболее очевидны на напечатанных фотографиях. А сжатие без потерь означает, что качество будет поддерживаться в течение нескольких циклов сжатия.

JPEG высокого или даже среднего качества, скорее всего, подойдёт, если вам нужна более высокая степень сжатия, например для отправки фотографий по электронной почте.
TIFF в основном полезен, если вы знаете, как настроить определённые параметры. Следует избегать как GIF, так и BMP (если, конечно, вы не создаёте анимированные GIF). Рекомендуется хранить RAW-файлы, чтобы вы всегда могли редактировать свои фотографии прямо из исходника.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

JPEG PNG или GIF — какой формат изображений использовать для вебсайта

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

В этой статье мы разберемся, какой из этих форматов лучше использовать и почему.

Почему формат важен?

Когда дело доходит до Интернета, большинство людей придерживается нескольких основных форматов — JPEG, PNG и GIF.

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

Типы изображений, которые вы используете на своем сайте, влияют на:

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

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

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

1. JPEG

Термин JPEG означает Joint Photographic Experts Group, и он был введен в обращение в 1986 году. Основные преимущества этого формата заключаются в том, что он может отображать миллионы цветов и особенно хорошо подходит для картинок с высоким уровнем сжатия.

В целом, JPEG — отличный вариант для отображения сложных фотографий, содержащих много цветов. Вот небольшой пример:

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

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

2. PNG

Portable Network Graphics (PNGs) так же популярен на веб-сайтах, как и JPEG. Этот формат также поддерживает миллионы цветов, но наибольший выигрыш по сравнению с JPEG присутствует на фотографиях, где меньше данных о цвете. Если же вы будете использовать формат PNG, для высококачественных фотографий, то этот формат будет заметно проигрывать в объеме картинок, по сравнению с форматом JPEG.

Вот пример изображения PNG:

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

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

Сохранение изображения в формате JPEG может привести к размытым краям и общему искажению изображения.

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

В целом сжатые изображения в формате PNG, будут лучше выглядеть, чем сжатые изображения в формате JPEG. Однако, если вы используете яркие, цветные фотографии, то тогда всё-же лучше использовать JPEG.

3. GIF

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

JPEG и PNG обычно не поддерживают анимацию (хотя существует формат, называемый Animated Portable Network Graphics – APNGs). Это делает гифки очень полезными. Однако, как вы понимаете, эти типы изображений имеют большой вес из-за большого количества кадров, которые они содержат.

Вы можете оптимизировать файлы GIF, но в большинстве случаев результаты не будут такими хорошими, как с другими форматами изображений. Это означает, что вам следует стремиться экономно использовать GIF-файлы на своем веб-сайте и только тогда, когда вам нужно продемонстрировать анимацию, которую вы не можете создать никаким другим способом (например, с помощью CSS).

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

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

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

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

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

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

Заключение

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

Решая, какой формат изображения лучше всего подходит для ваших нужд, вот основные моменты, которые следует помнить о JPEG, PNG и GIF:

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

Блог монет

ЗАРАБОТОК В ИНТЕРНЕТЕ С НУЛЯ. СОЗДАНИЕ БЛОГА. ОПТИМИЗАЦИЯ, ПРОДВИЖЕНИЕ И МОНЕТИЗАЦИЯ САЙТА. СПОСОБЫ ЗАРАБОТКА В ИНТЕРНЕТЕ

Чем отличаются форматы изображений bmp, png, jpg, gif

Всем привет! Все видели у картинок в интернете такую приписку, как bmp, png, jpg или gif (ну или другие)? Например, foto.png или foto.jpg. Это графические файлы разных форматов . Думаю, не я один задумывался над тем, в чем различие этих форматов изображений? Давайте попробуем разобраться.

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

Не буду засорять статью избытком умных слов. Тем более, сам не всегда понимаю их смысл. Формат изображения применительно к интернету и компьютеру (под изображением я имею в виду какую-то графическую информацию – фотографии или рисунки) – это способ хранить и, соответственно, передавать картинки как элемент информации.

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

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

(В качестве иллюстрации своих слов я взял портреты В. Высоцкого)

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

В общем, вариантом бесчисленное количество. Но любой из них буде являться вашим портретом.

То же самой и с форматами изображений – вариантов множество.

Но их всех можно разделить на две большие группы – растровые и векторные. А нет, есть еще одна группа – смешанные, или комплексные, куда ж без них в современном мире

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

Векторные изображения основаны на геометрических фигурах – точках, кривых, кругах, многоугольниках. Векторные изображения можно увеличивать без потери качества. Примеры векторных файлов – svg, cdr, eps. Но, честно говоря, я не сталкивался с такими форматами.

Комплексные форматы, как следует из названия, обладают признаками и векторных, и растровых изображений. Наиболее известный пример такого формата – файлы pdf. Наверняка каждый сталкивался с ними: многие электронные книжки и документы как раз и хранятся в PDF-формате.

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

Наиболее распространённые форматы изображений – jpg (jpeg), gif, png, bmp. Все они относятся к растровой группе.

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

Вот пример растрового рисунка и его части под увеличением.

Видите, как размыт рисунок при увеличении?

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

Работать с растром можно в таких удобных и известных редакторах, как Adobe Photoshop и Paint.

Характеристики растровых изображений

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

Самые распространенные форматы изображений, безусловно, BMP, GIF, PNG , JPEG .

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

К первой группе относятся форматы BMP, GIF, PNG, ко второй – JPEG. Сжатие без потерь основано на удалении избыточной информации, а сжатие с потерями – на отбрасывании информации, которую зрение человека не воспринимает.

В чем отличия форматов изображений bmp, png, jpg, gif

Я много-много написал выше, но так и не дал ответа на вопрос, выведенный в заголовок. Не знаю, смогу ли ответить, но попытаюсь.

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

Формат JPEG (Joint Photographic Experts Group) – объединенная группа экспертов-фотографов. Так называлась компания, разработавшая этот формат. Пожалуй, самый распространенный формат изображений, с которым сталкивался каждый, хоть раз садившийся за компьютер. Редактировать файлы jpeg можно практически в любом графическом редакторе. При сжатии цвет соседних пикселей усредняется. Этим вызваны потери в качестве. Тем не менее, качество таких изображений неплохое, даже хорошее, если сравнивать с некоторыми другими форматами.

Кроме того, «весят» jpeg-файлы мало. Их легко можно переслать с телефона на телефон, по email или выложить в интернет. Также небольшой размер позволяет хранить большое количество изображений.

Формат BMP (Bitmap Picture) – растровое изображение. Качество изображений на высоте, потому что информация почти не сжимается. Но и размер таких файлов по сравнению с jpeg – огого.

Формат GIF (Graphics Interchange Format) – формат обмена графическими данными. Очень популярный формат. Он позволяет сохранять анимированные изображения. Хотя считается, что он устарел. Но, судя по популярности гифок, со сцены этот формат сойдет не скоро. Конечно, для фотографов gif не пойдет – количество цветов в этом формате сильно ограничено 256. Зато в интернете это едва ли не основной формат. Еще один немаловажный плюс – файлы gif поддерживают режим прозрачности.

Формат PNG (Portable Network Graphics) – переносимая сетевая графика. Формат был разработан на смену формату GIF. Существует даже неофициальная расшифровка аббревиатуру как «PNG is Not GIF» — PNG не GIF. Этот формат поддерживает не только прозрачность, но и полупрозрачность от 1% до 99%, что является большим плюсом. Но PNG не может в одном файле хранить несколько изображений, как gif. Поэтому он не может использоваться для создания анимированных картинок.

Конечно, я рассказал не обо всех форматах изображений. Но эти – самые распространенные. Поэтому, думаю, вам была полезна моя статья «Чем отличаются форматы изображений bmp, png, jpg, gif».

Если информация была интересна и полезна, подписывайтесь на анонсы статей на Blogmonet, а так же поделитесь статьей с друзьями в соцсетях. Кнопки соцсетей – под статьей, форма подписки – по ссылке выше или в форме вверху слева.

Удачи вам во всех ваших благородных начинаниях!

PNG против JPG, GIF, BMP и TIF

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

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

1. JPG / JPEG / JFIF
2. PNG
3. TIF / TIFF
4. GIF
5. BMP

Растр против вектора

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

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

Сжатие файлов

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

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

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

Изображения JPG / JPEG / JFIF

Аббревиатура от: Joint Photographic Experts Group — Объединённая группа экспертов по фотографиям.

Расширения файлов: .jpg / .jpeg

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

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

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

Формат изображения PNG

Аббревиатура от: Portable Network Graphics — портативная сетевая графика.

Расширение файлов: .png

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

Минусы: Больше всего подходит для файлов больших размеров. Сам формат PNG не поддерживает анимированную графику.

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

Расширение файла TIF

Аббревиатура от: Tagged Image File Format — формат для хранения растровых графических изображений.

Расширение файлов: .tif / .tiff

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

Минусы: Не идеальны для веб-браузеров.

Применяемость: Начальный этап фотографических файлов в печати. Программные пакеты OCR.

Формат файла GIF

Аббревиатура от: Graphics Interchange Format — формат для обмена изображениями.

Расширение файлов: .gif

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

Минусы: формат ограничен 8-битной палитрой (256 цветов) и не подходит для фотографических изображений или сглаживания.

Применяемость: Графика, которая требует нескольких цветов, например упрощенные диаграммы, логотипы и анимации, которые состоят на более чем 50% из одного цвета.

Формат файла изображения BMP

Аббревиатура от: Bitmap Picture — дословно формат для хранения растровых изображений

Расширение файлов: .bmp

Этот формат разработан компанией Microsoft и предназначен для хранения больших несжатых файлов внутри ОС Windows.

Минусы: этот формат не использует сжатие.

Применяемость: упрощенная структура формата делает файлы bmp идеальными для программ Windows.

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

О формате PNG. Краткий тест-драйв

Растровый графический формат PNG, набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF’а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.

Так в чем же преимущества формата?

• Полноценная поддержка alpha-transparency – прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
• Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
• Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
• Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.

Существуют 2 версии формата: PNG-8 (похож на GIF – использует индексные цвета) и PNG-24 (ближе к JPEG – полноцветная палитра).

PNG vs GIF

Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения:

Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.

Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).

PNG vs JPEG

А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG’у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.

В общем, смотрите сами:

UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).

Жизнь после Photoshop’а или сжимаем дальше

Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам… UPD Кроме того, с учётом специфики формата, для элементов дизайна в вебе – это, наверное, лучшее решение.

Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.

На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.

Кроме PNGOut, существует ещё много программ, детальным обзором которых сейчас заниматься не хочется:

• OptiPNG – не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
• Pngcrush – сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
• и ещё ряд утилиток просто вычищающих служебный мусор из файлов.

Adobe Fireworks

Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!

3 версии формата в AF:

PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.

А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF’а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение – PNG-8 в большинстве случаев уделывает и GIF, и PNG-24.

PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop’овским результатом разница в пользу PNG:

И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks:

Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.

Вердикт

По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).

Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).

Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF’ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.

Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.

UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.

Обновил иллюстрации. К сожалению, сервис, на котором размещены картинки, не хранит PNG, всё равно конвертируя его в JPEG. Но теперь, по крайней мере, качество лучше. Ещё раз повторюсь – моей целью не было сравнивание артефактов, а только килобайты и ещё раз килобайты итоговых файлов.