О форматах файлов изображений. Или как выбрать формат файла для публикации в сети. Часть 1

В этой статье я хотел бы рассказать начинающим фотографам об основных форматах хранения изображений. В частности JPEG, GIF, PNG, BMP, TIFF и RAW. Кроме этого, хочу затронуть основные особенности выбора цветового пространства для публикации снимков в интернет. И о том, как тот или иной формат изображения влияет на его отображение в сети.

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

Для размещения или публикации в сети из перечисленных подходят только: JPEG, GIF, PNG.

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

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

JPEG

Второе его название JPG.

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

JPG без сжатия (качество 100%), вес 444,4 килобайта.

Для сравнения JPG с максимальным сжатием (качество 0), вес файла 25,6 Килобайт.

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

Обратите внимание на области 1 и 2, у JPG с максимальным сжатием (качество 0) Значительно потерялись детали. В области 1 проявились артефакты постеризации, пикселизации и размытия. А в области 2 проявилась потеря резкости. Но даже несмотря на эти дефекты, в общем картинка еще смотрится довольно неплохо.

Например, сжимая ваше изображение для публикации в сети и используя графический редактор Adobe Photoshop, можно использовать функцию сжатие для сети (Save for Web), вызываемую одновременным нажатием клавиш Ctrl + Alt + Shift + S. В этом случае у вас будет наглядно видно два окна - до и после сжатия.

Лично я бы рекомендовал использовать сжатие до 40% качества. Чем меньше сжатие, тем лучше для получаемой картинки, но большая часть сайтов требовательна к весу и размерам изображений и на это необходимо обращать внимание заранее.

На вес файла (размер в байтах) оказывает влияние его физический размер, а именно количество точек (пикселей) и количество цветов и оттенков в этих пикселях. И перед тем, как сжимать вашу картинку для размещения в сети, сначала лучше уменьшить ее физический размер.
Я бы рекомендовал для социальных сетей типа Вконтакте, Одноклассников, Facebook и других, уменьшать размер ваших фото до 800 или 1280 пикселей по большей стороне кадра. А уже после применять сжатие.
Стараясь достигнуть веса файла в 180 - 250 килобайт.

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

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

Gif 256 Цветов, вес файла 283 Килобайта
для сравнения прилагаю ниже JPG файл

JPG сжатие 50%, вес 108 килобайт. Как вы можете наблюдать у GIF файла несколько потерялся зеленый цвет хвои на среднем плане, но чуть лучше детализация на заднем.

GIF

Думаю, многие из вас часто сталкивались с этим форматом. Его особенностью является возможность сохранения анимированных изображений и картинок с прозрачным фоном. Несмотря на тот факт, что GIF довольно сильно и без потери качества сжимает изображения, ограничение в 256 цветов одновременно используемых в файле, делает его не самым лучшим для хранения фотоснимков.
Но этот формат идеально подойдет для картинок с небольшим количеством используемых цветов и большими областями одного цвета, например диаграмм, графиков, чертежей. Несмотря на то, что данный формат уже сильно устарел, его все еще активно используют в сети. А возможность делать анимированные картинки, еще более расширяет область применения.
Ведь на текущий момент нет другого общепринятого стандарта для хранения такого рода анимаций, хотя некоторые более современные форматы c такой возможностью существуют и даже имеют поддержку в ряде программ. Но недостаточная популярность этих форматов делает GIF лидером в этом направлении.

Чтобы добиться GIF сжатия близкого к 50% JPG количество цветов приходится уменьшить до 32. 142.3Кбайт у GIF против 108Кбайт у JPG. Кроме этого, уже наблюдается очень сильная потеря цвета. Но общая детализация практически не страдает.

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

PNG

Данный формат более современный. Он разрабатывался как противопоставление GIF и имеет ряд колоссальных плюсов. Его особенностями является сжатие графики без потери качества. Достигается это применением обратимых алгоритмов сжатия deflate, которые аналогичны алгоритму архивации gzip.

PNG поддерживает прозрачность чуть лучше, чем формат GIF и гораздо большее количество цветов в 24 битном режиме.
Возможность работать с изображениями используя два режима 8 и 24 бита дает дополнительную гибкость.
8 бит с индексированными цветами обеспечивает возможность работать с 8 битной цветовой палитрой для 24 битного цвета, что позволяет произвести точную передачу 256 цветов из 16777216. Или полноцветный вариант с глубиной цвета в 24 бит. Однако по степени сжатия PNG как и GIF для хранения фото проигрывают JPG, и не сильно отличаются друг от друга.
Плюсом PNG можно считать то, что он позволяет работать с Alpha каналом. А это позволяет опытным пользователям реализовать полупрозрачность, что сделать в gif или jpg невозможно.

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

JPG максимальное сжатие дал вес файла в 3 килобайта.

Gif с индексированными 2 цветами, имеет вес 2.4 килобайта

PNG с индексированными 2 цветами, обеспечил вес в 1.7 килобайта.

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

С вами был @vladkuneberg , подписывайтесь на мой блог. Там вы сможете найти много другой полезной информации касательно тематик фото, видео и обработки.

Заглавная картинка с лицензией CC0 со стока pixabay.com
Остальные снимки автора.
Автор: @vladkuneberg

Обсудить работу сообщества и пообщаться на тему фотографии вы можете в нашем чате - https://t.me/vox_photography
Авторские статьи для публикации в сообществе принимаются на почту [email protected], автор публикации получает 70% от GBG полученных за статью