Всем привет! Все видели у картинок в интернете такую приписку, как 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» .
Если информация была интересна и полезна, подписывайтесь на анонсы статей на , а так же поделитесь статьей с друзьями в соцсетях. Кнопки соцсетей – под статьей, форма подписки – по ссылке выше или в форме вверху слева.
Удачи вам во всех ваших благородных начинаниях!
Приветствую на блоге всех на блоге сайт. Сегодня хочу рассказать про три самых популярных формата картинок, которые используются на просторах всемирной сети интернет, на различных сайтах, блогах и не только.
Эта тема очень важна, ведь различные форматы предназначаются для разных целей. Если знать все нюансы можно легко уменьшить нагрузку на свой хостинг ведь загрузка (вес) различных форматов различаются.
Форматы картинок png, gif и jpeg
В Интернете на сегодняшний день практически не осталось сайтов, на страницах которых бы не было графических элементов. На сегодняшний день самыми популярными форматами картинок являются JPEG, PNG, GIF . Все они различаются между собой по назначению. Некому не секрет что страничка должна "весить" как можно меньше. Размер ("вес") графики на сайте зависит как от форматов картинок , так и от их размеров . Конечно, для уменьшения изображений используют разные методы сжатия, которые могут работать как с уменьшением качества изображения, так и без него.
Для получения максимально оптимального размера картинки для веба, следует использовать ориентированные на это , которые не будут создавать излишней нагрузки в браузерах пользователей. Можно воспользоваться всем известным фотошопом, но я видел рекомендации на программу Fireworks от Adobe. Далее разберем три популярных расширения картинок.
PNG (Portable Network Graphics) – изначально разрабатывался как альтернатива расширению GIF. Изначально PNG предназначался для применения в вебе. На сегодняшний день картинки формата PNG не приобрели большой популярности. Если быть честным, то я начал использовать PNG изображения у себя на блоге, когда перешел на прозрачный фон картинки. При сжатии данного формата мы не получим потерь в качестве цвета и это дает преимущества сохранять незаконченные изображения в PNG. С помощью вариаций PNG можно легко заменить JPEG и GIF:
- PNG 8 – восьмерка обозначает, что при сохранении будет использоваться не больше 256 цветов (по аналогии, как и в GIF). Вообще PNG 8 был разработан, что б заменить картинки формата GIF, но при этом он отличается тем, что не может отображать анимацию ни в каком виде. Можно использовать низкоуровневую прозрачность.
- PNG 24 – 24 означает, что используется 24-битная палитра цвета. Данная вариация предназначалась для замены формата JPEG. Как и в формате JPEG, PNG 24 сохраняет яркость и оттенки цветов в фотографиях. Данный формат картинок использует около 16.7 млн. цветов из-за чего пришел на смену полноцветных изображений, как в JPEG. Имеет поддержку многоуровневой прозрачности, что позволяет сделать плавный переход от прозрачной области к цветной.
- PNG 32 – похож на вариацию 24, но отличается тем, что можно указать изменение степени прозрачности, а это дает хорошо видимое изображение на любых веб страницах с любым фоном.
Если брать во внимание нагрузку на веб страницу, то размер PNG 8 практически в два раза меньше чем размер PNG 24, но это не удивительно, ведь они предназначались для замены форматов GIF и JPEG (качество соответствует размеру).
GIF (Graphics Interchange Format) – это первый исторический формат, используемый в . Даже на сегодняшний день это расширение имеет большую популярность. Картинки формата GIF имеют маленький размер, поэтому нагрузка на сервер минимальная. Особенность GIF – это наличие анимации .
Маленький размер картинок объясняется тем, что GIF может иметь не больше 256 цветов. Именно из-за этого GIF не используют для вывода полноцветных изображений и фотографий.
Принцип GIF анимации заключается в том, что GIF имеет контейнер, где находится не одно изображение, а несколько и прописано время показа смены картинки друг другом. После последней картинки будет начинаться первая. Таким образом, создается GIF анимация.
Еще одним плюсом использования GIF будет служить примитивная прозрачность изображений. Для любого пикселя можно установить только два значения – прозрачный и непрозрачный .
JPEG (Joint Photographic Experts Group) – это расширение является собственностью ассоциаций американских фотографов (можно понять с аббревиатуры). Был создан для хранения полноцветных изображений, передачи хорошего качества изображения.
Использование JPEG может привести к большим нагрузкам. Если на веб-сайте необходимо передать качество (в деталях) фотографию, то конечно без JPEG не обойтись. Если вести блог, то в использовании JPEG острой необходимости нет, потому что размеры картинок формата JPEG очень велики в весе, что дает нагрузку на хостинг.
Мы все загружаем изображения, создаем фото, делаем "мемы", чтобы делиться ими в социальных сетях. Многие постят изображения даже не задумываясь над тем а какой формат графического файла подходит для конкретного случая больше всего. Данная статья не касается профессионалов растровой и векторной графики. Остальным же этот краткий анализ графических форматов будет не лишним, чтобы лучше понимать для каких целей использовать тот лии иной формат. Итак, начнём.
Краткий анализ графических форматов файлов
- JPG / JPEG / JFIF
- TIF / TIFF
Растр против вектора
Прежде чем мы перейдем к пяти выбранным форматам файлов, хорошо бы знать, что есть два основных графических семейства: растр и вектор, и все форматы файлов изображений, перечисленные ниже, относятся к семейству растровых.
В растровой графике изображение собрано из пикселей, в то время как векторная графика собирается из путей, так называемых участков линий.
Сжатие файлов
Кроме того, форматы файлов изображений можно различать на основе эффектов сжатия, называемых компрессией. Разновидностей схем сжатия достаточно большое количество, но суть их существования можно свести в одну задачу - сжать растровый файл как можно эффективней. Сжимать графический файл нет смысла, так как его размер зависит не от масштаба, а от количества путей в нём.
Компрессия может очень эффективно сжимать изображения буквально в два и более раза. Но при это почти всегда происходит потеря в качестве, так как основной алгоритм компрессии - выделить несколько пикселов и заменить их одним или двумя похожими по оттенку. Компрессионный файл никогда не будет точным представлением оригинала, за некоторым исключением. Поговорим об этом дальше. Сжатие файлов обычно подходит для небольших фотографий и не подходит для проф. рисунков или качественных иллюстраций, презентаций.
Компрессия без потерь в качестве - это тот же самый исходный файл, поскольку компрессия без сжатия является точным представлением оригинала.
Изображения 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.
Это самые распространенные форматы файлов изображений, которые используются пользователями в настоящее время. Теперь, когда Вы знаете какой из них идеально подходит для какой-либо цели, Вы сможете лучше понимать файлы каких графических форматов использовать для себя.
От автора: если вы только что не выпрыгнули из дымящегося Делориана прямиком из 1985 года, то вам должен быть знаком самый бестолковый формат в интернете — GIF (Graphics Interchange Format). GIF – формат растровых изображений. Однако в отличие от JPEG и PNG этот формат файлов ограничен цветовой палитрой в 256 цветов. По сути, в каждом GIF изображении предустановлен «бокс с цветными мелками», и вы не можете получить новый цвет путем их смешивания.
Может показаться, что 256 цветов это много. Для сравнения в сложных фотографиях тысячи оттенков. В процессе преобразования в GIF диапазон цветов сильно сужается, и это основная причина не использовать GIF для цветных фотографий.
GIF плохо подходит для изображений с широким диапазоном цветов, но ограничение в 256 цветов может помочь сохранить низкий вес файла, что идеально подходит даже для самых медленных соединений. На протяжении долгого времени только GIF имел функцию прозрачности. Сейчас она есть в PNG и SVG.
Использование:
простая анимация;
маленькие иконки;
графика с низкой вариацией пикселей (т.е. монотонные цвета типа логотипов и флагов).
JPEG
В зависимости от вашего предпочтения вы можете использовать этот формат в виде «JPEG» или «JPG» — оба являются приемлемыми вариантами одного акронима — Joint Photographic Experts Group.
В отличие от GIF формат JPEG 16-битный, т.е. он умеет смешивать красный, синий и зеленый. Это позволяет отображать миллионы цветов и делает его очень дружелюбным к фотографиям. Отчасти так сложилось потому, что это стандартный формат, в большинстве цифровых камер на рынке.
JPEG позволяет гибко настраивать степень сжатия изображения: от 0% (сильное сжатие) до 100% (без сжатия). Как правило, 60%-75% хватит, чтобы значительно снизить вес файла, сохраняя отличное качество на большинстве экранов.
JPEG хорошо подходит для сжатия и рендеринга фотографий, но это тип сжатия с потерями. То есть он мало подходит для постоянного редактирования изображений. Экспорт в JPEG приводит к потере качества, и потери становятся все больше с последующими экспортами. Поэтому профессиональные фотографы в основном снимают в формате без потерь RAW.
Также в отличие от GIF и PNG формат JPEG не сохраняет прозрачность.
Использование:
статические изображения;
фотографии;
изображения со сложными цветами и динамикой.
PNG
В отличие от GIF и JPEG формат PNG (Portable Network Graphics) более новый. Благодаря двум версиям формат похож на микс GIF и JPEG.
PNG-8
PNG-8 сильно похож на GIF и использует также цветовую палитру в 256 цветов (максимум). У него чуть лучше прозрачность и чуть меньше вес файла. Однако в PNG-8 нет функции анимации.
PNG-24
PNG-24 позволяет рендерить изображения с миллионами цветов, почти как JPEG, но также сохраняет прозрачность.
PNG-24 – формат без потерь качества, что увеличивает вес файлов. Если качество изображений важнее веса файлов, PNG-24 лучший выбор. Сервисы типа TinyPNG.com зачастую могут сильно снизить вес файла.
По сравнению со своим сводным братом JPEG, PNG-24 не являются универсально совместимыми со всеми приложениями и платформами, что делает формат неподходящим для совместного использования в сети. Тем не менее, формат можно редактировать без потерь качества.
Использование:
веб-графика с прозрачностью;
сложные фотографии с множеством цветов и графика;
изображения, которые необходимо повторно редактировать и экспортировать.
SVG
В отличие от трех форматов выше SVG (Scalable Vector Graphics) – не чисто растровый формат. Это векторный формат, близкий к AI в Adobe Illustrator и EPS. Векторная графика постепенно приобретает популярность в сети и у UI дизайнеров.
Иногда удобно представлять SVG как «HTML для иллюстраций». Этот формат немного отличается от других.
SVG лучше всего подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG написан на XML разметке, его можно редактировать в любом текстовом редакторе, а также с помощью JS и CSS. Векторная графика масштабируется под любой размер без потери качества, что идеально подходит для адаптивного дизайна.
SVG – векторный формат, однако в него можно (часто так и делается) вставить растровую графику точно так же, как JPEG вставляется в HTML.
SVG сохраняет хорошую картинку на сайте, но это не тот формат, который обычный пользователь сможет сохранить и загрузить через сайт или социальные сети.
Онлайн сервисы типа WordPress, Flickr, Medium, Tumblr и Facebook будут либо принудительно конвертировать SVG в подходящий для них формат, либо, что более вероятно, сразу заблокируют загрузку SVG. В сети есть куча хостингов SVG, среди которых svgur.com , imgh.us и даже Github, как Alex продемонстрировал здесь .
Мне нравится, что есть маленькие хостинги SVG, однако я на 99% уверен, что следующие 5 лет только GitHub будет SVG-friendly. При использовании SVG в веб-дизайне почти всегда можно сжать вес файла в отличие от JPEG и PNG. Но чем сложнее SVG, тем больше вес файла.
Использование:
логотипы и графика в веб-дизайне;
ретина экраны.
Сравнение
Мы узнали про отличия популярных форматов, теперь пора сравнит их лицом к лицу. Ниже вы увидите, как GIF, JPEG, PNG и SVG обрабатывают изображения с простыми и сложными цветами, а также изображения.
Графика с монотонными цветами
Первый тип, который мы рассмотрим – графика с монотонными цветами. Она покрывает большую часть логотипов и брендов, иконок, простых карт, графиков и диаграмм. Исходный размер изображения 23.4 Кб с разрешением 1280 х 1280.
Ниже показано сравнение веса файлов и качество. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
JPEG 100% (без сжатия): 53.3 KB
SVG: 6 KB (чистая векторная графика)
В случае с этим изображением не заметно больших потерь качества при сравнении шести форматов. Хотя можно заметить небольшие артефакты по краям сжатого JPEG.
Не всегда все будет так с графикой с монотонными цветами, но в большинстве случаев проблем с такими изображениями не возникнет. Для этого изображения наилучший вариант при условии, что у нас есть оригинал – SVG с весом в 6Кб. Если векторной графики нет, на замену можно использовать PNG-8. Вес файла снижается с 23,4Кб до 11,8Кб.
Изображения со сложными цветами
Оригинал – 328Кб JPEG с разрешением 1280 х 960. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
У нас нет векторной версии этого изображения, поэтому любая SVG версия будет представлять собой просто JPEG внутри SVG. Этот формат здесь будет лишним.
JPEG 100% (без сжатия): 776 KB
JPEG 75%: 215 KB
Изображения со сложными цветами лучше выглядят в JPEG, PNG-24 и SVG. Цвета по большей части сохраняются, и нет этих страшных колец и шума, который обычно вылезает в GIF и PNG-8.
Цветные фотографии
Оригинал – 215Кб JPEG с разрешением 1280 х 710. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
SVG здесь также мало что даст.
JPEG 100% (без сжатия): 90 KB
JPEG 75% : 82 KB
Как и со сложными изображениями, фотографии лучше всего сохранять в JPEG, PNG-24 или SVG. В фото сверху цвета сохраняются во всех форматах кроме PNG-8 и GIF, где вылезают кольца и шум в тени волос, на заднем фоне, а также в верхней части фото.
Теперь лидирующие позиции у формата jpeg. Благодаря своему умению сжимать фотографии и цветные картинки в несколько раз, он опережает по минимальному весу форматы gif и png, а bmp по-прежнему "пасет задних".
Сейчас пожалуй не найти в Интернете веб-страницу без наличия на ней каких-либо фотографий или картинок. Сегодня это стало нормой при верстке любых веб-страниц, ведь картинки оживляют, украшают, дополняют основное содержимое сайтов и с успехом применяются во всех областях веба. Кстати, первым браузером, который мог показывать графику, стал Mosaic (мозаика), появившийся практически одновременно с появлением языка гипертекстовой разметки Html.
Нынче практически все браузеры поддерживают три основных формата растровой графики используемых для веба - Gif, Png и Jpg. Исторически первым появился gif и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию. Разработчики при его создании делали основной упор на максимальное уменьшение размера сохраняемой картинки.
Ведь в то время скорость Интернета была столь мала, и чтобы загрузка изображений не длилась "целую вечность", и был разработан и применен особый "формат графического обмена" (именно так расшифровывается аббревиатура GIF).
Особенность Gif в том, что он может включать палитру, состоящую всего лишь из 256 цветов. Т.е. изображение, преобразованное в этот формат, всегда будет содержать не более 256 оттенков, а все остальные цвета будут создаваться на основе подмешивания. Но именно из-за этого самого подмешивания и появляются различные неожиданные артефакты при преобразовании полноцветных фотографий в Гиф. Из-за этого очевидного и существенного недостатка, для вывода на страницы сайта полноцветных картинок и фото все чаще используют jpeg и png.
Но gif до сих популярен в отрасли веба по одной простой причине - он поддерживает анимацию, единственный из всех используемых в вебе. Анимированные смайлики и аватарки, открытки и баннеры - это результат работы формата Гиф. Правда сейчас не менее популярны флеш-технологии, но благодаря своей простоте gif в любимцах у вебмастеров, особенно начинающих.
Суть этой анимации заключается в том, что в контейнере Гиф находится не одна картинка, а сразу несколько и там же прописано время, через которые эти изображения будут сменять друг друга. При этом есть возможность зациклить анимацию и тогда за последним кадром будет опять начинаться показ первого. Сегодня в Интернете есть немало специализированных редакторов, в которых можно самостоятельно создавать Gif анимацию.
Также gif может поддерживать примитивный способ формирования прозрачности для создаваемых изображений. Почему примитивный? Да потому, что Гиф поддерживает всего два значения прозрачности - прозрачный либо непрозрачный, без всяких промежуточных состояний, каких можно добиться с помощью использования альфа-каналов в форматах Png.
Из-за этого возникают сложности с отображением плавно изменяющегося уровня прозрачности, поэтому все, что касается качественного прозрачного фона для изображений - это прерогатива уже Png. Почти все избражения с прозрачным фоном, что мы можем найти в Интернете, имеют расширение png.
Существует несколько вариаций Png, каждая из которых призвана выполнять свои задачи:
Png 8 - здесь по аналогии с Gif, при сохранении фотографии в Пнг 8 будет использоваться только 256 цветов., поэтому результаты сжатия изображений в этих двух форматах растровой графики будут практически идентичными. Так же как и в Gif - тут поддерживается прозрачность, но уже с альфа-каналом.
Png 24 - здесь на каждый пиксел фото выделяется три цветовых канала по 8 бит каждый (8*3=24), тем самым реализуется полноцветное формирование изображения без искажений. По качеству цветового отображения превосходит даже Jpg, но вот по весу будет тяжелее.
Png 32 - здесь три цветовых канала отвечают за формирование полноцветного изображения, а четвертый выделяется отдельно для формирования альфа-канала, позволяющего использовать Пнг 32 для получения картинок с прозрачным фоном. В Png 32 вы сможете выбрать любое изменение степени прозрачности, благодаря чему такие картинки будут одинаково хорошо смотреться на всех веб-страницах с любым фоном.
Теперь давайте обобщим всю информацию и сделаем кое-какие выводы.