Как узнать размер картинки, и для чего нужны разные форматы?

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 является несовершенной копией исходного изображения, которое можно увидеть через видоискатель камеры. Однако при создании фотографий высочайшего качества разницу увидеть будет трудно.

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

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

Для получения высокого качества изображения следует сохранять в формате JPEG с максимально возможным уровнем качества или использовать формат TIFF.

Как подготовить размер картинки в photoshop

Главным параметром здесь является соотношение сторон и в программе выставить их проще всего.

Возьмем инструмент «Прямоугольная область», в стилях выставим «Заданные пропорции», затем укажем ширину – 3, высоту – 2 и готово.

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

размер 1600х1067 px

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

Следующим этапом устанавливаем необходимую ширину и высоту. Ставим ширину в 1600 px. При данном соотношении сторон высота подставится автоматически.

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

Сохранить для web

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

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

Оптимальный размер изображения для сайта

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

Что касается размеров, то на мой взгляд оптимальными размерами являются:

Ширина 1600 px;Высота 1067 px;

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

Никто не будет ждать пока такая картинка загрузится на странице сайта.

Подробнее: Как оптимизация изображений влияет на посещаемость сайта

Самый лучший способ подготовить изображение – это воспользоваться программой photoshop.

Новые форматы

Вот несколько кандидатов, которыми можно заменять существующие форматы.

WebP

WebP был разработан Google как альтернатива JPG. Файл в этом формате может быть на 80 % меньше, чем JPEG.

Opera и Google Chrome в настоящее время уже поддерживают его. Firefox объявил о планах по реализации поддержки этого графического формата.

Google и Facebook в настоящее время экспериментируют с этим графическим форматом. WebP уже используют около 95 % изображений на главной странице eBay. YouTube применяет формат для отображения больших миниатюр.

Для CMS существуют расширения, которые помогут добавить поддержку WebP на сайт. Например, Optimus и Cache Enabler для WordPress. Это не нарушит отображение сайта в браузерах, которые не поддерживают WebP, если предоставить резервные варианты в формате PNG или JPG.

Эти данные по поддержке браузерами взяты с Caniuse.

Десктопные

Chrome	Opera	Firefox	IE	Edge	Safari
32	19	65	Нет	18	Нет

Мобильные / Планшеты

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
Нет	11.1	Все	4.2-4.3	73	Нет

HEIF

High efficiency image files имеет расширение HEIC (.heic). Ранее корпорация Apple объявила о том, что ее линейка продуктов будет поддерживать формат HEIF по умолчанию.

Помимо файлов меньшего размера HEIF обеспечивает большую гибкость, чем другие форматы. Он поддерживает неподвижные изображения и последовательности картинок. Следовательно, в одном файле можно хранить серийные снимки, кадры из видео и другие коллекции изображений. HEIF также поддерживает прозрачность, 3D и 4K.

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

На момент написания этой статьи формат HEIF не поддерживался браузерами.

Настольные

Chrome	Opera	Firefox	IE	Edge	Safari
Нет	Нет	Нет	Нет	Нет	Нет

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
Нет	Нет	Нет	Нет	Нет	Нет

FLIF

Free Lossless Image Format (или FLIF) использует алгоритм, который на 14-74 % эффективнее по сравнению с устаревшими форматами. Поэтому FLIF отлично подходит для любого типа изображений или анимации. Файлы, сохраненные в этом формате, в среднем на 43% меньше, чем в PNG.

При тестировании FLIF часто оказывался наиболее эффективным форматом.

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

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

Алгоритм Лемпеля-Зива-Велча

словарный

LZW: общий принцип кодирования

00000000 <NUL>
00000001 <SOH>
...
10000000 А
10000001 Б
...
10011111 Я
...
11111111 <NBSP>

000000000 <NUL>
...
011111111 <NBSP>

изначального

А     010000000  (в словарь ничего не добавляем)

Б     010000001 | добавляем в словарь АБ = 100000000

Р     010010000 | БР = 100000001
А     010000000 | РА = 100000010
К     010001010 | АК = 100000011
А     010000000 | КА = 100000100
Д     010000100 | АД = 100000101

АБ    100000000 | ДА = 100000111
РА    100000010 | АБР = 100001000
<SP>  000100000 | РА<SP> = 100001001
С     010010001 | <SP>С = 100001010
<SP>  000100000 | С<SP> = 100001010
Х     010010101 | <SP>Х = 100001011

АБР   100001000 | ХА = 100001100
А     010000000 | АБРА = 100001101
ХА    100001100 | АХ = 100001110
БР    100000001 | ХАБ = 100001111
А     010000000 | БРА = 100010000

Жадность — это скверно

А     010000000
Б     010000001 | АБ = 100000000
Р     010010000 | БР = 100000001
А     010000000 | РА = 100000010
К     010001010 | АК = 100000011
А     010000000 | КА = 100000100
Д     010000100 | АД = 100000101
АБ    100000000 | ДА = 100000111
РА    100000010 | АБР = 100001000
<SP>  000100000 | РА<SP> = 100001001
С     010010001 | <SP>С = 100001010
<SP>  000100000 | С<SP> = 100001010
Х     010010101 | <SP>Х = 100001011
АБР   100001000 | ХА = 100001100
А     010000000 | АБРА = 100001101

Х     010010101 | АХ = 100001110
АБРА   100001101 | ХА = 100001111

SVG

SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это векторный формат, в отличие от предыдущих растровых форматов. Растровое изображение состоит из набора разноцветных пикселей, которые для человеческого глаза сливаются в единую картинку. Векторное же строится из набора объектов, вроде линий, кривых, прямоугольников, окружностей и др. При увеличении масштаба векторное изображение увеличивается пропорционально, сохраняя своё высокое качество.

Особенности

• Надписи остаются обычным текстом, их можно выделять, копировать, они читаются поисковыми системами при обходе сайта.
• Рисунки можно масштабировать произвольно, сохраняя при этом высокое качество.
• Формат не поддерживается браузером Internet Explorer до версии 9.0.

Масштабируемые изображения, рисунки, логотипы, иллюстрации, графики и диаграммы.

Описание популярных форматов изображения для сайта

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

JPEG

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

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

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

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

PNG

Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.

8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, css-спрайтов, где необходим эффект прозрачности.

Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.

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

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

GIF

Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.

Формат не подходит для фотографий и изображений с широким диапазоном цветов.

Зато широко используется при создании GIF-анимаций, баннеров, кнопок, иконок и так далее.

В современных сайтах этот формат используется всё реже.

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

SVG

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

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

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

Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.

WebP

Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.

Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.

Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.

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

GIF

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

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

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

Недостатки

• Ограничение цветов означает, что это не лучший выбор для фотографий
• Не поддерживает частичную прозрачность, как отбрасывание теней

Как узнать размер изображения, размещенного на любом сайте?

Чтобы узнать размер фотографии, размещенной на сайте, воспользуйтесь следующей инструкцией:

1. Если вы используете браузер Mozilla Firefox — кликните правой кнопкой мыши по картинке, затем выберите в контекстном меню пункт «Информация об изображении». Это действие выведет информационное окно, в котором будет показан оригинальный размер изображения и его измененный вариант, который используется на сайте.
2. Если вы используете браузер Google Chrome — щелкните правой кнопкой мыши по изображению, после чего выберите в контекстном меню пункт «Просмотр кода элемента». В появившемся после этого окне будет виден размер картинки (с правой стороны в цветной рамке). Либо навести мышкой на выделение в правом окне, тогда над выделенной картинкой появится размер картинки.
3. В современных версиях браузера Opera узнать размер изображения с помощью встроенных инструментов не получится. Но выход есть! Установите дополнение «Classic Images», с помощью которого можно узнавать тип, размер, разрешение и адрес картинки. Алгоритм действий такой же, как и в браузере Firefox — клик правой кнопкой мыши, затем пункт «Просмотр свойств изображения».

DNG (Digital Negative)

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

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

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

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

Недостатки

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

Что такое RAW в фотографии

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

Обычно при съемке с помощью цифровой камеры или смартфона настройка по умолчанию — сохранение изображений, которые вы делаете, на карту памяти вашей камеры в формате, известном как JPG или JPEG. JPEG просто означает «Joint Photographic Experts Group (Объединенная группа экспертов по фотографии)», которая является названием группы, создавшей формат.

Это часто сокращается до JPG, как возврат ко времени, когда расширения файлов могли быть иметь только три буквы. Таким образом, файл JPG на вашем жестком диске будет выглядеть как «Image.JPG». Нет разницы между JPG и JPEG, они одинаковы.

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

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

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

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

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

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

Это занимает намного больше места на вашей карте памяти. Файл изображения RAW примерно соответствует размеру мегапикселя камеры — например, 20-мегапиксельная камера будет сохранять файл RAW размером около 20 мегабайт. Сравните это с файлом JPG приемлемого качества, с той же камеры он обычно будет около 4 мегабайт — в пять раз меньше!

Каждый производитель камер имеет свой собственный формат файла RAW. Например, файлы Canon RAW имеют тип файла «CR2». Файлы Nikon RAW являются файлами «NEF». Поэтому вместо «Image.JPG» у вас будет «Image.CR2» или «Image.NEF».

Вы не можете просто взять эти RAW-файлы и загрузить их в Интернет или поделиться ими с друзьями. Они также занимают больше места и не имеют универсального формата файлов. Пока что это не очень хорошо для файлов RAW!

Однако у RAW есть ряд преимуществ, о которых мы расскажем в этом посте. Вот краткий обзор различий между RAW и JPG.

RAW

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

Raw-файлы сжимаются таким образом, что сохраняется вся изначально полученная информация. Это означает, что такие настройки, как баланс белого, экспозиция, контраст, насыщенность, резкость все же могут быть изменены с помощью редактирующего программного обеспечения после того, как снимок был сделан. Фотографирование в этом формате потребует много места на карте памяти, не говоря уже о времени на постобработку. Он также потребует определенных базовых знаний в таких редакторах, как Adobe Lightroom или Photoshop, так как файлы должны быть отредактированы и конвертированы прежде, чем их можно будет использовать (делиться online, печатать, отправлять друзьям и пр.)

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

• Это файл с наивысшим качеством изображения
• Широкие возможности в постобработке и манипуляциях с изображением

Недостатки

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

Как выбрать оптимальный формат изображений для использования на WordPress-сайте?

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

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

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

RAW против JPEG: пример недоэкспонированного изображения

Сейчас я покажу разницу при попытке восстановить данные из RAW-изображения по сравнению с JPEG? Давайте посмотрим на первый пример:

Сильно недоэкспонированный снимок

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

RAW

JPG

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

Трудно поверить, что такое восстановление возможно с RAW-файлом, пока вы сами не попробуете. Установите камеру на RAW + JPEG, затем недоэкспонируйте изображение на несколько ступеней и посмотрите, насколько больше у вас есть потенциал восстановления с изображением RAW по сравнению с JPEG. Вы будете поражены тем, что увидите.

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

Формат JPEG

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

Формат JPEG для цифровых камер

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

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

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

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

Формат TIFF

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

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

Формат GIF

Данный формат разработала компания CompuServe в 1987 году для первых 8-битных видеокарт компьютера и предназначался для передачи по dial up (модемному) соединению. В свое время он был самым распространенным форматом в интернете. GIF использует компрессию без потерь LZW, и очень хорошо сжимает изображения, в которых много однородных заливок (баннеры, таблицы, логотипы, схемы).

Глубиной цвета данный формат нас не радует, всего 8 бит (256 цветов максимум) и использовать его для хранения фотографий не рекомендуется (фото имеют 24 битную глубину цвета).

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

Формат PNG

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

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

Типов файлов в зависимости от цели использования:

	Фотографические изображения	Графика, логотипы
Свойства	Фотографии 24-битный цвет и 8-бит ч/б	Графика с множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями
Лучшее качество	TIFF или PNG (со сжатием без потерь)	PNG или TIFF (со сжатием без потерь)
Наименьший размер файла	JPEG с высоким коэффициентом качества	TIFF или GIF или PNG (графика / логотипы без градиентов)
Cовместимость (PC, Mac, Unix)	TIFF или JPEG	TIFF или GIF
Худший выбор	GIF 256 цветов (очень ограничен цвет, и размер файла больше чем 24 -разрядного JPEG)	Сжатие JPEG добавляет артефакты, смазывается текст и края линий

PNG-24

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

Особенности

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

Область применения

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