Форматы изображений

Давайте обсудим различные форматы изображений. jpg, bmp, gif, png, tiff, ico, вам знакомы эти расширения файлов? При таком количестве разновидностей легко запутаться и хранить свои изображения в неоптимальном виде. Чем это опасно? Например, тем, что используя "сжатие с потерями" вы пожете потерять качество изображений; кроме того, необработанные, "сырые" изображения могут занимать очень много места на диске.

Еще существенней эта проблема для вебмастеров. Как сделать так, чтобы изображения на сайте выглядели красиво, но при этом не занимали много места и быстро скачивались? Я сам лишь недавно заинтересовался этим вопросом, поэтому в моих старых статьях вы наверняка найдете неоптимизированные изображения (я собираюсь ими заняться, но пока не успел). Тем не менее, выбор типа изображения - это задача, которую необходимо решить прежде чем выкладывать его в интернет.

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

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

BMP

Самый простой формат изображений. Позволяет хранить многоцветные изображения (сейчас нужно сделать отступление о том, как хранится цвет точки в изображении. Как хорошо известно, любой цвет можно разложить на три составляющие - красный, синий и зеленый. Поэтому чтобы описать цвет нужно лишь описать интенсивность этих трех составляющих. Вопрос лишь в том, что это за интенсивность. Понятно, что это - какое-то число, но какое, насколько оно может быть большим? Однозначного ответа на этот вопрос нет, в зависимости от типа и параметров изображения оно может меняться. Так или иначе, обычно говорят про глубину цвета изображения - количество бит, отвечающих за цвет одного пикселя. Например, если это число - 8, то мы можем хранить 2^8=256 различных цветов). Так вот bmp позволяет использовать до 48 бит на пиксель (веб-стандартом является 24).

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

GIF

Очень интересный формат. Глубиной цвета он не радует (8 бит), но для каких-нибудь таблиц этого вполне достаточно. Но у этого формата появляется понятие прозрачности. Один из 256 цветов можно указать как прозрачный, и при отображении рисунка, например, на веб-странице, вместо этого цвета будет виден фон. Далее, у gif опять-таки есть сжатие без потерь, и уровень этого сжатия существенно лучше, чем у bmp.

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

PNG

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

Еще одно преимущество png - так называемый альфа-канал. Помимо указания интенсивности синего, красного и зеленого, у каждой точки можно указать уровень прозрачности. Таким образом, мы получаем не только безусловную прозрачность (есть - нет) как в gif, а возможность варьировать прозрачность разных частей изображения. Это свойство позволяет делать плавные переходы - четкое изображение посередине, постепенно переходящее в фон. К сожалению, не все браузеры правильно отрабатывают альфа-прозрачность.

JPG

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

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

TIFF

Формат всех форматов, контейнер, позволяет использовать другие форматы, сжатие с потерей и без потерь, 192 бита на пиксель. Недостатки - сложность работы с форматом и практически отсутствие поддержки у браузеров. Если вы не профессиональный дизайнер, не используйте tiff.

ICO

Почти что и не формат. ПО структуре больше всего напоминает bmp, но поддерживает прозрачность (как gif). У этого формата разрешены лишь маленькие размеры рисунков, вроде 16 на 16 пикселей. Используется лишь в местах, где нужны маленькие картинки фиксированного размера, например, ярлыки на рабочем столе или так называемые favicon - картинки в браузере рядом с названием сайта.

Итоги и конвертация

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

	Макс. бит/пиксель	Прозрачность	Анимация	Веб-поддержка	Большие габариты	Сжатие
bmp	48	-	-	+	+	без потери, плохое
gif	8	булевая	+	+	+	без потери, хорошее
png	48	альфа-канал	-	+	+	без потери, хорошее
jpg	24	-	-	+	+	с потерей качества
tiff	192	альфа-канал	-	-	+	разное
ico	24	альфа-канал	-	+	-	без потери, плохое

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

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

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

Дата: 16 декабря 2009 г., категория: интересное в интернете.

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

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

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

← Настройка outlook

Скорость сайта →

ну я без tiff не могу обойтись при сканировании документов (черно-белых), во первых tiff позволяет сохранить с глубиной цвета в 1 бит, так что фаил получается меньше чем jpg даже бес сжатия, а во вторых он позволяет несколько страниц сохранить в 1 фаил... например 10 отсканированных страниц будет не 10 tiff файлов, а всего 1 фаил!

Never Lex
16 декабря 2009 г. 12:55:06

Для скана тифф конечно хорош. Но для веба - нет.

Sander
16 декабря 2009 г. 16:11:18

gif меньше чем png из-за меньшего количества цветов, но иногда из-за этого искажаются рисунки (например, скриншоты какого-нибудь gmail при переводе в gif становятся хуже)

Never Lex
16 декабря 2009 г. 16:35:51

Поэтому нужно смотреть когда сохраняешь, ЧТО сохраняешь :)

Не авторизируется :) Кликал по ссыле "Авторизоваться при помощи профиля Google (и не только)" и нифига :)

Sander
16 декабря 2009 г. 17:14:36

браузер опера предпоследней версии? попробуй каким-нибудь другим?

Never Lex
16 декабря 2009 г. 17:17:27

Да нет. Попробуй настроить лучше :)

Sander
16 декабря 2009 г. 17:24:07

а что не работает-то? кнопка вообще не срабатывает? это в каком браузере? можешь в личку написать? потому что у меня все работает

Spoofi
16 декабря 2009 г. 18:26:19

Ценная статья, немного нового узнал. Например, о png :)

А еще опечаточку нашел:
"...малым количеством цветов - png. Формат <b>bpm</b> я использовать вообще не рекомендую..."

10#

Sander
16 декабря 2009 г. 20:07:19

рад, что пригодилось и спасибо за опечатку.
но формат bpm все равно не рекомендую ;)

11#

Doctorrr
18 декабря 2009 г. 03:56:28

эта статья даёт очень поверхностное представление, особенно - таблица.

12#

vlad
18 декабря 2009 г. 19:24:04

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

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

13#

Sander
20 декабря 2009 г. 01:28:47

vlad, а неужели банальный paint не сохранял в bmp?
А что касается фотошопа, то я перебрался на GIMP

14#

vlad
20 декабря 2009 г. 12:21:59

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

15#

Sander
20 декабря 2009 г. 21:59:28

ааа.. понял, спасибо!

16#

victor
8 января 2010 г. 11:33:12

Я нарисовал фон 1600 X 1200px(в сs2)и птичку(жалкое подобие).После элементарных манипуляций во встроенной подпрограмме анимации получился эффект плавного перемещения этой птицы.
Формат гиф(недоформат) мне не подходит вообще- качество просто ужасающее(не говоря уже про 256 цветов)...
Есть ли качественная альтернатива,ведь не 20 же век на дворе-то...

17#

Sander
8 января 2010 г. 13:15:47

victor, мне просто кажется, что рисунками эту проблему не решить. да, gif позволяет создавать анимированные изображения но при этом имеет существенные ограничения.
если нужно настоящее движение - нужно использовать видео или flash

18#

Маргарита Кононова
29 января 2010 г. 04:47:29

Спасибо, очень вразумительно. Можно ли эту статью разместить на сайте по обработке видео (анимация для футажей)? Со ссылкой, конечно, или, лучше, на обмен.

19#

Sander
29 января 2010 г. 04:52:39

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

20#

Маргарита Кононова
29 января 2010 г. 04:58:37

А на обмен?

21#

Sander
29 января 2010 г. 21:08:08

О каком сайте идет речь? Можно, кстати, перенести обсуждение в личку. Моя почта - как доменное имя, только @ вместо первой точки. Но вообще я пока у себя размещал только уникальные статьи. Пишите, обсудим

У вас есть вопрос не по теме статьи?
Нужна компьютерная помощь?
Задайте свой вопроc
на нашем новом проекте!

Подписаться на: комментарии к статье (rss), комментарии к статье (e-mail)

Авторизоваться при помощи профиля Google (и не только)

Самые активные участники сайта:

Хотите разместить здесь свою аватарку? Авторизуйтесь, загружайте картинку и комментируйте!

Имя:

E-mail (если хотите подписаться на комментарии):

Сайт (не обязательно):

Я - робот! (снимите галочку, если это не так)
Для блоггеров: если вы хотите чтобы ваша ссылка индексировалась поисковыми системами, вам нужно авторизоваться при помощи Google Friend Connect и написать осмысленный комментарий по теме. В таком случае я переведу ваш аккаунт в разряд "trusted". Комментарии пользователей с проверенным аккаунтом не попадают на модерацию, ссылки индексируются, а рядом с ником стоит значок с зеленой галочкой. Да, модерацию могут пройти только ссылки IT-тематики! Внимание: если вы не авторизуетесь, я не смогу сделать вашу ссылку активной даже если мне понравятся ресурс и комментарий!
Комментарий:

Подписаться на комментарии к статье (rss), комментарии к статье (e-mail)

У вас есть вопрос не по теме статьи?
Нужна компьютерная помощь?
Задайте свой вопроc
на нашем новом проекте!