Лучшие форматы изображений для веб-дизайна и разработки

Подробнее о выборе формата записи цифровой фотографии

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

Формат RAW

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

Формат TIFF

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

Формат JPEG

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

Формат PNG

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

Формат GIF

• позволяет объединить графику с анимацией,
• имеет легкий вес,
• подходит для загрузки в интернет и для создания веб-дизайна,
• качество снимка «страдает» из-за уменьшения веса,
• не подходит для печати,
• имеет ограничение в цветовой палитре.

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

Также популярно использование формата PSD (формата программы PhotoShop) для хранения фотографии на компьютере для дальнейшей обработки.

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

Вы участвуете в этих фотоконкурсах?

Интересные публикации на сайте

Новые фотоконкурсы на сайте

Конвертация форматов

Подведем итоги сравнения форматов изображений. Сначала небольшая таблица:

Таким образом, для маленьких картинок специального назначения можно
использовать ico, если вам нужна анимация, то ваш выбор — gif, для фотографий
хорошо использовать jpg, а для диаграмм и изображений с малым количеством цветов
— png. Формат bmp я использовать вообще не рекомендую, а tiff оставим для
профессионалов.

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

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

Форматы

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

Сжатие без потерь

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

• BMP или Windows Bitmap — обычно используется без сжатия, хотя возможно использование алгоритма RLE.
• GIF (Graphics Interchange Format) — устаревающий формат, поддерживающий не более 256 цветов одновременно. Всё ещё популярен из-за поддержки анимации, которая отсутствует в чистом PNG, хотя ПО начинает поддерживать APNG.
• PCX — устаревший формат, позволявший хорошо сжимать простые рисованные изображения (при сжатии группы подряд идущих пикселей одинакового цвета заменяются на запись о количестве таких пикселей и их цвете).
• PNG (Portable Network Graphics) — растровый формат, в основе которого алгоритм сжатия Deflate.
• JPEG-LS в режиме сжатия без потерь — алгоритм использует адаптивное предсказание значения текущего пикселя по окружению, включающему уже закодированные пиксели.
• Lossless JPEG — быстрый, но малоэффективный алгоритм сжатия, использующий (при обходе изображения попиксельно слева направо, сверху вниз) простое неадаптивное предсказание значения текущего пикселя по значениям верхнего, левого и верхнего левого пикселей.

Сжатие с потерями

Основано на отбрасывании части информации, как правило, наименее воспринимаемой глазом.

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

Разное

• TIFF поддерживает большой диапазон изменения глубины цвета, разные цветовые пространства, разные настройки сжатия (как с потерями, так и без) и др.
• Raw хранит информацию, непосредственно получаемую с матрицы цифрового фотоаппарата или аналогичного устройства без применения к ней каких-либо преобразований, а также хранит настройки фотокамеры. Позволяет избежать потери информации при применении к изображению различных преобразований (потеря информации происходит в результате округления и выхода цвета пиксела за пределы допустимых значений). Используется при съёмке в сложных условиях (недостаточная освещённость, невозможность выставить баланс белого и т. п.) для последующей обработки на компьютере (обычно в ручном режиме). Практически все полупрофессиональные и профессиональные цифровые фотоаппараты позволяют сохранять RAW изображения. Формат файла зависит от модели фотоаппарата, единого стандарта не существует.

TIFF

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

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

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

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

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

DNG (Digital Negative)

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

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

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

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

Недостатки

Необходимо дополнительное время для конвертации исходных файлов камеры в DNG (если в вашей камере нет возможности создавать файлы сразу в этом формате)

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

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

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

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

Кроме того, наиболее часто к недостаткам растра относят: отсутствие возможности поворота рисунка на угол, отличный от 90* без заметного искажения самого рисунка, а также размер файла, который напрямую связан с качеством изображения.

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

Наиболее распространеным программным обеспечением для работы с растровыми изображениями является Adobe Photoshop.

Вес

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

1. Размер изображения в пикселях (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)

2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем больше она весит.

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

Максимальный размер фото для добавления на сайт — до 10 Мб.

Спецификации

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

Иногда компании могут считать определённые форматы файлов своей коммерческой тайной и не публиковать их. Хорошо известный пример — форматы файлов пакета Microsoft Office. Однако, с переходом на открытый формат Office Open XML, компания Microsoft, все же опубликовала спецификации форматов под . В некоторых случаях компания, выпустившая приложение, просто не считает нужным тратить время на написание подробной спецификации.

Если спецификация формата недоступна, то для обеспечения совместимости программы с данным форматом приходится заниматься обратной разработкой. В большинстве или во всех странах форматы файлов не защищены законами об авторских правах. Однако в некоторых странах патентами могут быть защищены алгоритмы, используемые для кодирования данных в какой-либо формат. Например, в широко распространённом формате GIF использовался патентованный алгоритм (срок действия патентов в разных странах истек в 2003—2004 гг.), что привело к разработке альтернативного формата PNG.

JPEG

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

Хакатон Tour.Hack

Ивент перенесён на 26–27 сентября, Новосибирск, беcплатно

tproger.ru

События и курсы на tproger.ru

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

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

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

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

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

Основные форматы файлов фотографий

Имена файлов цифровых фотографий любого фото формата также как и программные файлы других типов состоят из изменяемой части, точки и расширения. Расширение файлов фотографий всегда неизменно и может состоять из трех или четырех символов, по которым и определяется тип файла или название формата. Например, jpeg, cr2, tiff, psd, gif (рис.3).

Рис.3 Расширение файла фотографии указывает на его формат.

Универсальным форматом для файлов цифровых фотографий считается JPEG. Это самый популярный растровый формат, который используется для сохранения фотографий в разных типах фототехники. С ним удобно работать в различных фоторедакторах и использовать его для просмотра фотографий во всех технических устройствах. Главный его недостаток – потеря качества изображения при сохранении файла (рис.4).

Рис.4 Потеря качества изображения фотографии при сохранении ее файла в формате JPEG.

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

Рис.5 Используя специальную программу в файлах фотографий формата RAW можно изменять настройки фотоаппарата.

Формат RAW это общее название нескольких форматов используемых в фототехнике разных производителей. Каждый такой формат имеет свои особенности и не является унифицированным. Для того чтобы привести все существующие форматы RAW к единому стандарту был разработан формат DNG. По сути это тот же формат RAW, но у него размер файлов меньше и нет дополнительных текстовых файлов (рис.6).

Рис.6 Файлы одной и той же фотографии в формате RAW и DNG имеют разные размеры и способы хранения текстовой информации.

В тех случаях, когда требуется сохранение результатов обработки цвета, слоев, каналов, масок или каких-либо других атрибутов редактирования фотографий, используется формат PSD. Это внутренний формат файлов программы Photoshop, в котором следует сохранять всю информация об изменении фотографий после фотосъемки (рис.7). Основной недостаток этого формата – ограниченное применение.

Рис.7 В файлах формата PSD удобно хранить информацию о редактировании фотографий (пример файла).

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

Рис.8 Сравнение размеров файлов одной фотографии, сохраненной в разных фото форматах.

Рассмотренные выше пять файловых фото форматов – JPG, RAW, DNG, PSD и TIFF считаются основными для хранения, обработки и просмотра цифровых фотографий. Но для эффективной демонстрации фотографий зрителю такие форматы не подходят. Для этого нужно выбирать другие форматы, разработанные для этой цели.

Форматы

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

Сжатие без потерь

Основная статья: Сжатие без потерь

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

• BMP или Windows Bitmap — обычно используется без сжатия, хотя возможно использование алгоритма RLE.
• GIF (Graphics Interchange Format) — устаревающий формат, поддерживающий не более 256 цветов одновременно. Всё ещё популярен из-за поддержки анимации, которая отсутствует в чистом PNG, хотя ПО начинает поддерживать APNG.
• PCX — устаревший формат, позволявший хорошо сжимать простые рисованные изображения (при сжатии группы подряд идущих пикселей одинакового цвета заменяются на запись о количестве таких пикселей и их цвете).
• PNG (Portable Network Graphics) — растровый формат, в основе которого алгоритм сжатия Deflate.
• JPEG-LS в режиме сжатия без потерь — алгоритм использует адаптивное предсказание значения текущего пикселя по окружению, включающему уже закодированные пиксели.
• Lossless JPEG — быстрый, но малоэффективный алгоритм сжатия, использующий (при обходе изображения попиксельно слева направо, сверху вниз) простое неадаптивное предсказание значения текущего пикселя по значениям верхнего, левого и верхнего левого пикселей.

Сжатие с потерями

Основная статья: Сжатие данных с потерями

Основано на отбрасывании части информации, как правило, наименее воспринимаемой глазом.

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

Разное

• TIFF поддерживает большой диапазон изменения глубины цвета, разные цветовые пространства, разные настройки сжатия (как с потерями, так и без) и др.
• Raw хранит информацию, непосредственно получаемую с матрицы цифрового фотоаппарата или аналогичного устройства без применения к ней каких-либо преобразований, а также хранит настройки фотокамеры. Позволяет избежать потери информации при применении к изображению различных преобразований (потеря информации происходит в результате округления и выхода цвета пиксела за пределы допустимых значений). Используется при съёмке в сложных условиях (недостаточная освещённость, невозможность выставить баланс белого и т. п.) для последующей обработки на компьютере (обычно в ручном режиме). Практически все полупрофессиональные и профессиональные цифровые фотоаппараты позволяют сохранять RAW изображения. Формат файла зависит от модели фотоаппарата, единого стандарта не существует.

Итоги

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

• Лучшая компрессия — с потерями для маленьких файлов — JPEG, или без потерь для наилучшего качества изображений — TIFF и PNG
• Полноцветный RGB для фотографий — TIFF, PNG, JPEG
• Прозрачность или анимация для использования в графике — GIF и PNG
• Документы, штриховые рисунки, многостраничные текстовые, факс, и т.д. — TIFF
• Полиграфия где используется цветовая модель CMYK — TIFF

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

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

• 4 элемента первого экрана продающего лендинга
• 3 простые и работающие формулы продающего заголовка
• анатомия конверсионной страницы

Скачивайте книгу «Анатомия продающих лендингов» и применяйте на практике полученные знания.

P.S. Для тех, кто хочет узнать про новые изобретения и быть причастным к инновационным технологиям рожденным в России, читайте статью Мотор-колесо Дуюнова.

Жду Ваших комментариев. Подписывайтесь на обновления блога. Дмитрий Леонов | leonov-do.ru