Использование PNG прозрачности в веб дизайне
PNG, GIF и JPEG
Отношение к изображениям формата PNG были кардинальным образом пересмотрены сообществом веб дизайнеров, и причины на то достаточно основательные. До недавнего времени использование данного формата ограничивалось из-за отсутствия поддержки со стороны всех браузеров. Однако корректная поддержка PNG в 7-й версии Internet Explorer, использование нужного JavaScript и CSS для более ранних версий IE, позволяют значительно расширить арсенал современных дизайнеров.
Что же такое PNG?
PNG (Portable Network Graphics), произносится как «ping» - растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. PNG является международным стандартом (ISO IEC 15948:2003) и оффициально рекомендован W3C.
Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без "потерь", в отличие, например, от стандартного JPEG (даже с максимально высоким уровнем качества).
Формат PNG спроектирован для замены устаревшего и более простого формата GIF, а также, в некоторой степени, для замены значительно более сложного формата TIFF.
Если мы говорим о веб дизайне, то по сравнению с GIF он имеет следующие основные преимущества:
- Улучшенная компрессия: В большинстве случаев размер PNG изображения меньше аналогичного в формате GIF.
- Больше цветов в изображении: Практически неограниченное количество цветов в изображении, в то время как ограничение для GIF равно 256.
- Опциональная поддержка альфа-канала: В то время как GIF поддерживает лишь бинарную прозрачность, PGN позволяет достичь неограниченного количества эффектов прозрачности посредством поддержки альфа-канала.
В качестве недостатка стоит конечно отметить отсутствие поддержки анимации, наподобие GIF. Хотя конечно для анимации и существует подобный стандарт под названием Multiple-image Network Graphics (MNG), однако он не широко распространен и соответственно не поддерживается массово современными браузерами.
Почему GIF все еще популярен?
Вполне резонно возникает вопрос, почему же при таком количестве преимуществ формат PNG до сих пор не получил широкого распространения. Причина лежит в неправильном представлении формата относительно полной поддержки со стороны популярных браузеров.
Поскольку IE 6 и более ранние версии не поддерживают 32-битную (полную) прозрачность изображений формата PNG, многие ошибочно считают, что IE вообще не поддерживает этот формат или не поддерживает прозрачность. На самом деле есть несколько способов, которые помогут вебмастеру добиться прозрачности путём включения в веб-страницу специальных функций и скриптов. Другие современные браузеры, включая Firefox, Netscape 6 и выше, Mozilla, Opera 6 и выше, Safari и Camino полностью поддерживают возможности формата PNG.
Кроме этого, возможность создания анимированных изображения в формате GIF стала причиной популярности именно данного формата.
Прозрачность -- это именно та причина, по которой дизайнеры чаще всего используют изображения форматы PNG и GIF. Несмотря на то, что PNG обладает более широкими возможностями использования прозрачности, веб дизайнеры чаще всего создают GIF-версии данного изображения для правильной поддержки и отображения в старых браузерах. При помощи CSS очень просто отправить GIF изображения старым браузерам, а PNG всем, поддерживающим его. Все это дополнительная работа, которую многие попросту избегают, создавая лишь изображение в формате GIF.
Все причины, по которым формат GIF все еще популярен, так или иначе основаны на неправильном понимании поддержки со стороны некоторых браузеров. Если вооружиться некоторыми знаниями о принципах работы с PNG, о его использовании в различных браузерах, вы сможете в полной мере воспользоваться преимуществами данного формата, без использования GIF.
А как насчет JPEG?
JPEG (Joint Photographic Experts Group) является широко используемым методом сжатия фотоизображений. PNG конечно же не стремится заменить JPEG. JPEG хорош для сжатия фотографий, поскольку размер файла получается меньше по сравнению с PNG, хотя для создания текстовых изображений, разного рода изображений в виде линий, логотипов, цветовых блоков можно воспользоваться форматом PNG.
Области применения PNG
Теперь давайте рассмотрим, в каких ситуациях лучше всего использовать данный формат, применительно конечно же в веб дизайну.
Градиент
Градиент -- плавный переход между двумя и более цветами -- излюбленный прием, несколько утонченный, незаметный, наподобие градиентной заливки, добавляющей скрытое ощущение глубины и текстуры, в последние годы наиболее часто используется веб дизайнерами.
Для создания градиента вполне можете воспользоваться форматом GIF, если градиент двухцветный. Для более сложных градиентов GIF не подойдет. В такой ситуации можно воспользоваться форматом JPEG, но размер файла будет слишком велик. Кроме этого не стоит забывать о JPEG компрессии и соответственно потери качества изображения.
Давайте рассмотрим обычное градиентное фоновое изображение, использующееся для создания кнопок, блоков и других элементов дизайна. Приблизительный вид вы можете видеть на Рисунке 1. Если смотреть по часовой стрелке, в верхнем левом углу оригинальное изображение, далее GIF версия, PNG версия и наконец JPEG версия. Обратите внимание, что размер PNG изображения -- самый маленький (515 bytes), что в 4 раза меньше GIF. JPEG немного больше PNG (637 bytes), но более низкого качества.
Рисунок 1. Photoshop, сохранение файла для веб (Save For Web). Разница в размерах файлов различных форматов.
Изображение, работающее на любом фоне
Иногда возникает задача создания изображения, работающее одинаково хорошо на любом фоне. Самыми распространенными может быть логотипы и иконки. В подобных случаях предпочтение всегда отдавалось формату GIF, однако существует несколько причин, по которым целесообразно в подобной ситуации использовать PNG. Логотипы и другие подобные графические элементы в формате PNG зачастую выигрывают в размерах. К тому же, использую прозрачность PNG изображение можно положить на любой фон, поскольку кроме бинарной прозрачности PNG поддерживает и частичную прозрачность пикселей в отличие от GIF. Использование PNG в подобном случае конечно же несколько приведет к увеличению размера файла по сравнению с GIF, но красота, элегантность, сглаженные контуры стоят того.
Посмотрите на сайт www.49abcnews.com. Цветовая схема Header'а на сайте меняется в зависимости от времени суток, причем меняется только нижний JPEG фон, а все остальные графические элементы это PNG изображения в c прозрачным фоном расположены над JPEG'ом и выглядят одинаково хорошо как на светлом, так и на темном фоне.
Рисунок 2. 49abcnews.com header, День
Рисунок 3. 49abcnews.com header, ночь
Если бы мы использовали вместо PNG GIF, результат выглядел бы как на Рисунке 4. Думаю, разница в качестве очевидна.
Рисунок 4. 49abcnews.com header, ночь, используется изображение формата GIF вместо PNG.
Полупрозрачный верхний слой
Распространенный прием в графическом дизайне -- положить на фотоизображение или просто изображение прозрачный блок, содержащий текст к примеру. Это позволяет несколько выделить текст на данном изображении и в то же время не скрыть его часть. Дизайнер по имени Wilson Miner использовал подобный эффект на сайте ювелирных изделий Gingeroot. (Рис. 5)
Рисунок 5. Gingeroot, созданный талантливым дизайнером по имени Wilson Miner
Прозрачный блок с надписью лежит на JPEG изображении. Подобный эффект выглядит и работает прекрасно. А что если необходимо очень быстро сменить текст, вплоть до того, что каждый посетитель должен увидеть совершенно иной текст. В подобной ситуации не очень практично накладывать текст на основное изображение графически, лучше вписать его на прозрачном PNG фоне средствами html и css. Для этого просто создайте полупрозрачный PNG, с размерами 1x1px и размножьте его средствами css и положите фоном под блок с надписью.
Кроме этого, на сайте Gingeroot для каждого изображения ставится флаг «On Sale», причем выполнен он также в формате PNG, тем самым нет необходимости создавать дополнительные изображения с данными надписями. (Рис. 6)
Рисунок 6. Gingeroot Раздел сайта Necklaces, на котором на любое изображение накладывается прозрачная PNG надпись On Sale.
Также подобная техника была использована и на сайте Explore Steamboat. (Рис. 7)
Рисунок 7. Полупрозрачный PNG блок расположен поверх основного изображения.
В другом, не менее креативном примере, созданным дизайнером по имени Bryan Veloso, прозрачное изображение формата PNG лежит внизу страницы, создавая эффект исчезающего текста при прокрутке. Эффект можно увидеть на сайте Revyver.com (Рис. 8 и Рис. 9). Кроме этого, изображение дерева лежит на тексте, создавая достаточно неожиданный визуальный эффект.
Рисунок 8. На сайте Revyver.com, дизайнер по имени Bryan Veloso воспользовался прозрачным PNG изображением для создания эффекта затемнения, положив это изображение поверх содержимого страницы.
Рисунок 9. Если просмотреть это изображение в Photoshop, то становится понятно, каким образом получен данный эффект и как работает прозрачность PNG.
Водяные знаки
Другой прием, часто применяемый в дизайне — наложение водяных знаков на изображение. Делается это либо для создания визуального стиля, либо для указания копирайта.
На сайте автора данной статьи jeffcroft.com (Рис. 10), отображается ряд фотоизображений. В действительности, все эти фотографии выложены на Flickr, и отображаются на сайте посредством открытых Flickr API.
Рисунок 10. Страница с фото на сайте jeffcroft.com
Представьте теперь ситуацию, если автор захочет наложить на все эти фотографии свой логотип. Простейший способ сделать, это открыть Photoshop и отредактировать каждую фотографию. Естественно, делать это долго и нудно. Обойти данную проблему можно путем наложения на изображения прозрачного PNG.
HTML код для отображения фото на странице выглядит следующим образом:
<a class="photo-container"
href="http://www.flickr.com/photos/jcroft/2622915/">
<img class="full-size-photo"
src=http://static.flickr.com/2/2622915_8b78c1207d.jpg
alt="CTA, a photo by Jeff Croft" />
</a>Создается еще одна версия логотипа белого цвета, размером 80x80px и в Photoshop ставится 50-ти процентная opacity, далее сохраняем изображение в формате PNG-24 и добавляется в HTML код:
<a class="photo-container"
href="http://www.flickr.com/photos/jcroft/2622915/">
<img class="full-size-photo"
src="http://static.flickr.com/2/2622915_8b78c1207d.jpg"
alt="CTA, a photo by Jeff Croft " />
<img class="watermark"
src="http://media.jeffcroft.com/img/core/jeffcroft_logo_watermark.png"
alt="Watermark" />
</a> Выравниваем изображение при помощи CSS:
a.photo-container {
position: relative;
display: block;
}
img.watermark {
position: absolute;
top: 2em;
left: 1em;
} В итоге получаем у каждого изображения водяной знак. Добавив его в код CMS мы избавляемся от необходимости редактировать каждую фотографию в отдельности, чем очень облегчаем себе жизнь.
Рисунок 11. Водяные прозрачные PNG знаки на фотографиях, сайт jeffcroft.com .
Ну и если вы хотите выглядеть ну очень продвинутыми, можете добавить скрипт для создания водных знаков.
Маска
Другой полезный метод использования прозрачности PNG — частично скрыть или закрыть изображение, положив сверху частично прозрачный PNG. Техника создания подобного эффекта аналогична созданию водных знаков, но визуальный эффект получается несколько иной. Если рассмотреть на примере логотипа, то в данном случае создается не белое лого, а прозрачное с белым фоном вокруг (Рис. 12).
Рисунок 12. Создание прозрачного PNG логотипа в Photoshop
Как было указано выше, технический аспект создания маски аналогичен созданию водяного знака. HTML:
<a class="photo-container"
href="http://www.flickr.com/photos/jcroft/2622915/">
<img class="full-size-photo"
src="http://static.flickr.com/2/2622915_8b78c1207d.jpg"
alt="CTA, a photo by Jeff Croft" />
<img class="mask"
src="http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png"
alt="Mask" />
</a>CSS:
a.photo-container {
position: relative;
display: block;
}
img.mask {
position: absolute;
top: 0;
left: 0;
} 
Рисунок 13. Маска PNG лежит на фотографии, частично скрывая ее
Меняющийся цвет иконок
Воспользовавшись концепцией создания маски, можно создать иконки, в которых фон будет меняться, скажем, средствами CSS, т.о. получим иконки разного цвета, меняя лишь цвет фона.
Например, нам необходим сет спортивных иконок, Рис. 14.
Рисунок 14. Несколько иконок на тему спорта
Создадим их прозрачными, как показано на Рис. 15
Рисунок 15. Создание прозрачных PNG иконок
Сохраним как PNG-24. Напишем следующий HTML код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OMG Sports Icons!</title>
<style>
img {
background-color: #cc0000;
}
</style>
</head>
<body>
<img src="running.png" alt="Running" />
<img src="biking.png" alt="Biking" />
<img src="skiing.png" alt="Skiing" />
<img src="soccer.png" alt="Soccer" />
</body>
</html>Ставим цвет фона любой, например, #cc0000. Иконки становятся красными. Обратите внимание на качество иконок, в частности на сглаженные края. Достигается это качество наличием частичной пиксельной прозрачности PNG изображений.
Рисунок 16. Прозрачные PNG иконки. Иконки принимают цвет фона, соответственно имеем иконки различного цвета.
Меняем цвет фона
img {
background-color: #000066;
}
Рисунок 17. Меняя цвет фона мы меняем цвет иконок.
Подобный способ смены цвета иконок достаточно удобен, поскольку нет необходимости создавать иконки различного цвета и менять html код. Кроме этого можно менять цвет иконки при наведении на нее мышью:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OMG Sports Icons!</title>
<style>
a:link img,
a:visited img,
a:active img {
background-color: #cc0000;
}
a:hover img {
background-color: #000066;
}
</style>
</head>
<body>
<a href="/running/"><img src="running.png" alt="Running" /></a>
<a href="/biking/"><img src="biking.png" alt="Biking" /></a>
<a href="/skiing/"><img src="skiing.png" alt="Skiing" /></a>
<a href="/soccer/"><img src="soccer.png" alt="Soccer" /></a>
</body>
</html>По желанию можно добавить границы (Рис. 18)
img {
background-color: #000066;
padding: 2px;
}
Рисунок 18. Добавление границ иконкам средствами CSS
В 2003 году Dan Cederholm писал о подобном способе на своем блоге и PJ Onori создал отличный сет иконок под названием Sanscons.
Метод создания иконок, приведенный в данной статье несколько отличается от иконок Sanscons, поскольку там используется белый символ на прозрачном фоне, а здесь наоборот, но эффективность и варианты применения этих иконок не уменьшаются, даже наоборот, если мы меняли цвет самого символа, тот в этих иконках можем менять цвет фона.
И Dan, и PJ использовали GIF изображения вместо PNG. Это было вполне приемлемо, поскольку иконки эти пиксельные. Применив данный подход, можно создать аналогичные иконки, но в формате PNG, более элегантными, со сглаженными краями и частично прозрачными.
Поддержка браузерами
Встает резонный вопрос, какой смысл использования данного формата, если он не поддерживается всеми браузерами?
Все современные браузеры, такие как, Internet Explorer 7, Safari (все версии), Firefox (все версии), Opera (6 и выше), Netscape (6 и выше), Mozilla (все версии) полностью поддерживают данный формат, включая альфа-канал. Не поддерживают только IE 6 и ниже, что есть очень серьезной помехой практического использования данного формата.
По причине отсутствия полной поддержки формата PNG со стороны Internet Explorer 6-й версии и ниже, многие разработчики попросту избегали использования этого формата. С выходом 7-й версии IE ситуация в корне изменилась, поскольку IE 7 полностью поддерживает данный формат. Кроме этого, существует несколько способов заставить IE 6 и ниже поддерживать PNG прозрачность. Если мы действительно собираемся использовать этот формат в своей работе, то в настоящее время нет никаких препятствий к этому. Придется проделать конечно дополнительную работу для правильного отображения PNG в IE, но это возможно и стоит того.
AlphaImageLoader — обходной путь в IE
Internet Explorer содержит несколько встроенных фильтров. Задаются они при помощи CSS и не входят в официальную спецификацию CSS. Другими словами, к веб стандартам они не имеют никакого отношения. Поскольку PNG является форматом, рекомендованным W3C, и IE 6 и ниже не поддерживают PNG прозрачность, компания Microsoft исправила свое упущение, создав т.н. AlphaImageLoader.
Согласно оффициальной странице компании Microsoft, посвященной этому вопросу, AlphaImageLoader отображает картинку в пределах объекта, а так же между фоном и контентом. Это значит, что AlphaImageLoader загружает прозрачное PNG изображение как оно есть, но грузит его как слой, располагая его под контентом. PNG изображение загруженное таким образом походит больше на фоновый рисунок, чем на обычное изображение на переднем плане (в действительности оно конечно же расположено над фоном).
Проще говоря, воспользовавшись фильтром AlphaImageLoader в CSS для элемента img можно достичь желаемого результата. Но не все так просто, этот способ загрузит изображение, его прозрачность, но и загрузит само PNG изображение поверх этого фона, тем самым закрыв сам фон.
Невозможно использовать PNG прозрачность в качестве фонового изображения в CSS для любого (X)HTML элемента (например, для <div>) и ожидать, что фильтр AlphaImageLoader создаст правильное отображения в IE. Запомните, AlphaImageLoader вставляет изображение между фоном и передним планом конкретного объекта. Поэтому, при загрузке прозрачного изображения будет грузится и фоновое изображение из CSS, что испортит вам всю картину, никакой прозрачности вы не увидите.
Практическое использование AlphaImageLoader
Давайте вернемся немного назад к нашему более раннему примеру про Channel 49 и заставим IE грузить изображение правильно. На Рис. 19 показано, как выглядит этот сайт в IE6
Рисунок 19. Header на сайте 49abcnews.com в браузере IE6/Win
HTML для этого блока выглядит следующим образом:
<div id="weather">
<a href="/weather/"><img id="weatherImage"
src="http://media.49abcnews.com/img/weather/overcast-night.png"
alt="Overcast" /></a>
<p>
<a href="/weather/">Currently in Topeka, KS:<br />
<strong>82° Overcast</strong><br />
<span>Get the forecast and more...</span>
</a>
</p>
</div>Как вы видите, PNG изображение отображается безупречно. Секрет в использовании JavaScript. На самом деле здесь используется DOM scripting для удаления элемента img и замена его на div, к которому в CSS был добавлен фильтр AlphaImageLoader. JavaScript помещен в комментарии, разбираемые только определенными версиями IE. Другие браузеры просто игнорируют этот код и не обрабатывают. Если посмотреть к исходник сайта www.49abcnews.com, то вверху вы увидите сделующие строки:
<!--[if lte IE 6]>
<script src="http://media.49abcnews.com/js/fixWeatherPng.js"
type="text/javascript"></script>
<![endif]-->Значение строки if lte IE6 думаю всем понятно, строки обрабатываются только 6-й и более ранними версиями IE, другие браузеры, в т.ч. IE7 игнорируют эти строки.
Я не буду вдаваться в подробности работы данного скрипта, просто приведу его целиком. Кому интересно, может разобраться его и рассказать как он работает.
window.attachEvent("onload", fixWeatherPng);
function fixWeatherPng() {
var img = document.getElementById("weatherImage");
var src = img.src;
// Then, hide the image.
img.style.visibility = "hidden";
// Then, create a div that uses the image as a background,
//including MS's AlphaImageLoder
//filter property for trasparent PNGs.
var div = document.createElement("DIV");
div.style.filter = "progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='" + src + "', sizing='scale')";
div.style.width = "140px";
div.style.height = "118px";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
// Finally, replace the image with the newly created div.
img.replaceNode(div);
}Заключение
Использование формата PNG создает множество технических возможностей и преимуществ по сравнению с GIF. Фактически, преимущества настолько велики, что его можно использовать всегда, исключение составляют лишь фотографические изображений. Отсутствие поддержки в IE6 несколько останавливает использование данного формата. Однако, существует способ заставить IE6 поддерживать PNG, кроме этого IE7 полностью поддерживает его. PNG изображения имеют меньший вес, а это трафик, деньги и скорость загрузки страниц. По сути, поддержка PNG IE7 открывает новые возможности использование прозрачных изображений вед дизайне. Приведенные в данной статье примеры могут дать толчок новым способам, техникам и методам работы с изображениями для достижения новых и интересных эффектов в современном веб дизайне.
Оригинал статьи
Автор — Jeff Croft
Перевел — Дмитрий Папуца