IE и png


Содержание

Прозрачность *.png изображений в IE6

C каждым днем понимаю, что IE6 — «супер браузер», верстка под него требует очень большого желания и силы воли. Одним из недостатком шестого интернет эксплорера является не отображение прозрачности в *.png изображениях, в Сети существует большое количество фиксов, которые исправляют этот недостаток, давайте рассмотрим один из самых мною используемый.

Автор данного фикса — Drew Diller, фикс можно скачать как с официального сайта так и с моего блога. Все, что нам нужно, это скачать скрипт загрузить его в любой раздел сайта, на главной странице делаем условие:

Пояснение: данным условие мы «говорим» браузеру, что если старница открывается с помощью браузера IE версия которого меньше 7 (т.е. 5.5 — 6 и т.д.) то загружать фикс создания прозрачности png изображений, который будет использоваться для элементов div, img, .png и li — если вам нужно чтобы фикс использовал и другие элементы, перечислите их через запятую.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Еще раз о png в IE6

Позволю себе внести посильный вклад в общечеловеческую проблему прозрачности .png-картинок во всеми любимом браузере Internet Explorer версии 6. Если вам пока не ясно в чем же состоит эта проблема, откройте сегодняшнюю статью этим браузером, и вы сразу увидете в первом абзаце неопрятную картинку, с серым фоном.

Эта проблема решается только двумя способами — использовать javascript, или не использовать png. Но поскольку абсолютно отказаться от использования картинок в формате .png, нет никакой возможности, то мы рассмотрим первый вариант.

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

JQuery PngFix

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

Далее остается активировать png-фиксер на странице:

После этих нехитрых действий, наша страница в ie6 преобразится, и прозрачные png-картинки будут выглядеть как положено.

Недостатки

А сейчас положенная ложка дегтя, потому что не все так замечательно, как можно подумать. Первое и наверное самое главное, этот скрипт, увеличит время загрузки страницы в ie6. Чем больше png-картинок на странице, тем дольше загрузка.

Второе — забудьте о png-картинках, заданных в качестве фона, хотя и заявлено что он прекрасно фиксит картинки в фоне, на практике это не всегда так. Причем неважно имеет картинка прозрачные области или нет, PngFix может сильно ее исказить, если она повторяется по горизонтали или вертикали.

Ifixpng improved

Скачать плагин можно отсюда. Для его использования вам также понадобится однопиксельная картинка pixel.gif, которая почему-то не входит в архив с плагином. Так что можете скачать ее здесь. Эту картинку необходимо положить в папку с картинками, причем желательно чтобы эта папка называлась images.

Далее точно также подключаем JQuery и плагин в разделе head:

После чего активируется он следующим образом:

Если же, папка, в которой расположена картинка pixel.gif, отличается от названия images, можно указать ее расположение в коде:

Недостатки

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

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

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

IE и png

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

Плагин для создания круговых обзорных изображений с управлением курсором


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

Набор стилей для чекбоксов

9 наборов правил для оформления чекбоксов на страницах и формах веб проекта.

Выскальзывающие счетчики категорий

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

Круглый элемент управления на CSS

Набор правил и разметка для организации оригинального элемента управления для веб проекта.

CSS код индикатора загрузки

Интересный индикатор загрузки, сделанный без использования изображений и JavaScript.

Кнопочное меню на чистом CSS

Оригинальное кнопочное меню выполненное без использования изображений.

Выпадающее меню с 3D эффектом

Код выпадающего меню с интересным 3D эффектом при раскрытии пункта.

PNG в IE6

Если Вы уже немного занимались созданием сайтов, то могли заметить, что PNG-изображения в браузере IE6 и ниже отображаются не корректно. Пример такого «кривого» отображения в PNG в IE6 можно наблюдать на изображении к статье (левое изображение). Удивительно, но многие Web-мастера просто забивают на это, оправдываясь тем, что IE6 использует не более 4% пользователей. Я считаю это непростительной глупостью, ведь решение этой проблемы настолько простое, и о нём я расскажу в этой статье. А результат этого решения Вы можете наблюдать вновь на изображении к статье (изображение справа).

Чтобы решить проблему отображения PNG в IE6 и более ранних версиях этого браузера, надо воспользоваться простым скриптом на JavaScript, который Вы можете скачать отсюда: скачать hack для png.

Далее Вы сохраняете этот скрипт к себе на сайт, например, в папку js. И, наконец, на всех страницах сайта, где у Вас имеются изображения в PNG-формате, Вы вставляете следующие строки в голове документа (внутри тега head):

Таким образом, все браузеры IE, младше 7-ой версии будут подключать этот скрипт, который исправит проблему отображения всех PNG-изображения на странице в IE6 и ниже.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):

  • Комментарии ( 5 ):

    А как узнать браузер пользователя и при этом, если браузер пользователя имеет старую версию, то выводилось окошко? Например: «У вас браузер: IE6. Мы настоятельно рекомендуем обновить Ваш браузер к последней версии (IE9)», ну как-то так.

    Вот так: http://myrusakov.ru/brauzer-javascript.html

    Вы хоть скрипт то проверяли, когда заливали сюда? Не пашет он! Смотрел через IETester.

    Скрипт работал, я проверял. Более того, данный подход раньше был наиболее простым. А сейчас либо что-то случилось, либо (что скорее всего) IETester свойство Filter всё-таки не поддерживает. К сожалению, у меня нет IE6, поэтому точно сказать могу, вполне вероятно, там это будет работать.

    Cannot view .png pages in Internet Explorer

    I cannot view .png pages in Internet Explorer. I think this problem ends up sounding sort of weird when other people, or I write it out. It’s hard to explain what exactly the problem is. People who answer the question think that we want to change the PNG file associations to Windows Explorer or something.

    So I will try to make it clear:

    This is not a problem with the file type associations in Control Panel. It is not fixed by going into «Control Panel > Programs > Default Programs > Set Default Programs», or by going into «Control Panel > Programs > Default Programs > Set Associations», and it is not fixed by disabling add-ons in Windows Explorer. I do not want Internet Explorer to be the default program associated PNG files. PNG files are associated with Paint on my computer, and that’s how I want them to stay. All I want is to be able to view .png webpages in Internet Explorer.

    Again, the problem is that I can’t view .png pages while on Internet Explorer. I can view PNG images if they are on a webpage. But if I click on a link that leads to PNG image (for example: http://www.website.com/pictures/image.png), then a window opens up asking «What do you want to do with image.png?» with options «Open — The file won’t be saved automatically.», «Save», or «Save as». This, of course, opens the image in MS Paint, rather than taking me to the page in Internet Explorer. I don’t have this problem with JPG files. If I click on a link that leads me to a JPG image (for example: http://www.website.com/pictures/image.jpg), then I can access a webpage within Internet Explorer, with the image aligned to left side, and the ability to enlarge the size, and so on. I have been able to do this with PNG files in the past. I don’t know what’s gone wrong.

    I first noticed the problem when I clicked on a link to a PNG image, but the file association within IE was Quicktime. I could get to the .png page in IE, but the image was centered in the middle of the window, and it was stuck in a «fit to screen» setting, so that I couldn’t enlarge it, even though I had viewed the image in the past, and I knew it to be much, much larger. In other cases, .png pages simply failed to load, showing the «Broken» Quicktime image. I tried fix the issue by using these two options in Control Panel: «Control Panel > Programs > Default Programs > Set Default Programs», and «Control Panel > Programs > Default Programs > Set Associations», but in both cases, PNG files were associated with Paint, which was what I wanted. I tried to disable the Quicktime add-on, but when I did that and tried to go to the .png page, all I would get was a small box with a red «X» in it (a broken image link, or whatever it’s called). So uninstalled Quicktime entirely.

    Цукерберг рекомендует:  Создание простой CMS с WYSIWYG редактором - 2

    Now IE won’t even let me view .png pages, I am simply prompted to download the images.

    Please help me fix this here. I don’t think this has to do with Quicktime, or if it does, I don’t think any Apple help sites will help me. They don’t understand why you would ever use Internet Explorer or a PC or anything, and they always say it’s the PC’s fault, and definitely could not be an issue caused by Apple software. I need help here!

    Thank you for reading my long explanation! I hope I made my issue very clear so it is easier to answer. I am frankly stumped.

    You already rock for reading this far!

    EDIT: I have noticed that sometimes PNG images take a longer time to display as a webpage is loading.

    EDIT 2: The problem is fixed if I turn on Compatibility View. Compatibility View fixes the problem whether QuickTime is installed or not. However, since this problem happens on all websites I have visited (and has not happened in the past with IE9), and since Compatibility View has many drawbacks, my problem isn’t solved. But I hope this helps give a clue to the cause.

    Прозрачный Png в IE6

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

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

    1) — «прозрачный png вставляем как картинку»:

    в стилях картинки прописываем параметр behavior и подгружаем файл images/png.htc, следующего содержания:

    для нормального отображения картинки так же понадобиться специальная прозрачная картинка GIF 1×1 images/transparent.gif

    2) — «PNG вставляем как бэкграунд используя CSS и выводим только в IE»

    Код на странице будет выглядеть очень просто, всего в одну строку:

    Задаем стиль для этого дива

    3) — «Используем JavaScript для нормального отображения PNG»

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

    Но тем не менее для реализации этого метода в начало страницы между тегами вставляем:


    содержание файла pngfix.js

    4) — «Конвертация PNG в GIF»

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

    Использование прозрачности PNG формата в веб дизайне

    Великолепная статья от Джефф Крофт (Jeff Croft) с моим вольным переводом, небольшим исследованием и дополнением ввиде еще одной сводной статьи.

    PNG, GIF и JPEG

    PNG формат не получает должного внимания от сообщества веб-дизайнеров и тому есть вполне понятная причина. До недавнего времени небыло возможности использовать все преимущества формата и обеспечивать его надежную работу во всех браузерах. Но с появлением поддержки PNG в Internet Explorer 7 и некоторых подручных JavaScript и CSS трюков для устаревших браузеров, мы можем использовать PNG изображения значительно расширив наш дизайнерский лексикон.

    Что такое PNG?

    Что если я хочу поместить мое персональное лого на все мои фотографии? Да, это возможно — открыв каждое изображение в Photoshop, применив лого и пересохранив картинку. Однако, это будет тяжело сделать когда будут постоянно обновляться тысячи изображений, к тому-же, иногда, я могу вообще оказаться далеко от компьютера (к примеру, когда посылаю фотографии с моего сотового на Flickr). Было бы замечательно, если лого могло добавляться автоматически? PNG может сделать это.
    Обычно PNG произносится как «пинг» и означает Portable Network Graphics. Это формат с минимальными потерями на сжатии. Другими словами он сохраняет графическое изображение с минимальными размерами файла без уменьшения качества картинки. Он был разработан на смену вездесущего GIF формата, легальное использование которого требовало наличие лицензии у производителей графического софта (сейчас действие патента на GIF/LZW истекло). PNG это международный стандарт (ISO IEC 15948:2003) в официальных рекомендациях W3C.

    Более того, являясь свободным форматом PNG предлагает для веб дизайнера различные практические преимущества над GIF:

    • Лучшее сжатие: Для большинства изображений PNG достигает меньшего размера файла чем GIF
    • Большая глубина цвета: PNG предлагает truecolor до 48 бит, когда в GIF мы имеет только 256 цветную палитру
    • Прозрачность альфа канала: Когда GIF предлагает только двоичную прозрачность, PNG допускает практически неограниченные эффекты прозрачности, предлагая для прозрачности альфа канал

    Уместно заметить, что PNG не позволяет делать анимацию, как это делает GIF. Но существует стандарт Multiple-image Network Graphics (MNG), который это позволяет, но он не так широко поддерживается веб браузерами и графическими редакторами.

    Итак, почему же GIF все еще так популярен?

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

    Из-за того, что Internet Explorer 6 и более ранние версии не поддерживают полный спектр PNG возможностей (включая прозрачность альфа канала) людям остается верить (хотя это неверно), что Internet Explorer не поддерживает PNG вовсе или как минимум не поддерживает прозрачность. В действительности Internet Explorer 5 и 6 поддерживают достаточно спецификаций PNG, делая его функционально эквивалентным (или более того) неанимированным GIF изображениям. Все другие упоминаемые браузеры, включая Firefox, Netscape 6 и выше, Mozilla, Opera 6 и выше, Safari, и Camino полностью поддерживают PNG прозрачность.

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

    Прозрачность — ключевая характеристика GIF и PNG, которая часто является причиной выбора используемого формата веб дизайнера. Хотя PNG предлагает более исчерпывающую поддержку прозрачности, веб дизайнерам часто требуется создать GIF версию изображений для подгонки к старым браузерам. Используя CSS это возможно (и отчасти банально), через отсылку GIF изображений для старых браузеров и высококачественных PNG в браузеры которые их понимают. Но это двойная работа для веб дизайнера и как результат люди идут по меньшему сопротивлению и продолжают использовать GIF изображения.

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

    А что про JPEG?

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

    Несколько замечательных примеров использования скромного PNG

    Теперь давайте посмотрим на то, как использовать PNG в веб дизайне. Я собрал все файлы для каждого примера в отдельную папку, доступную на friends of ED.

    Градиент

    За последние несколько лет, градиент — плавный переход между двумя или более цветами, стал лучшим другом веб дизайнеров. Особенно популярны утонченные, едва различимые градиентные заливки, которые не бросаясь в глаза создают ощущение глубины и фактурности.
    Иногда GIF это лучший выбор для градиента. Если градиент это простой двух-цветный переход, GIF в нем работает безукоризненно. Однако, ограниченность GIF только 256 цветами часто создает заметную и неряшливую «полосатость» среди более сложных градиентных переходов. JPEG, с другой стороны, может выводить довольно прятные градиенты, но часто ценой большего размера файла. И пока JPEG градиенты, как правило, достаточно хороши, нужно помнить, что JPEG использует сжатие с потерями, которое означает, что полученное изображение никогда не будет дотягивать до качества несжатой картинки.

    Рассматриваемый типичный стиль фонового градиента используется для кнопок, блоков или просто где-то еще. Это может выглядеть как на Рисунке 5-1. По часовой стрелке, от верхнего левого угла, мы видим оригинальное (несжатое) изображение, GIF версию, PNG версию и JPEG. Вы видите, что PNG в результате имеет наименьший размер (515 байт). Это в четыре раза меньше, чем GIF изображение. JPEG немногим больше чем PNG на 637 байт и он к тому-же ниже качеством из-за сжатия с потерями (правда возможность человеческого глаза определить различие в качестве в этом простом примере остается под вопросом).

    Изображение, которое должно работать на любом фоне

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

    Для веб сайта KTKA Channel 49 News in Topeka, Kansas изготовили прекрасную погодную иконографику, которая отображает свое текущее состояние в заголовке сайта. Спасибо за ловкий програмный трюк, который там используется, когда заголовок меняет цветовые схемы в зависимости от времени суток и изображению погоды необходимо быть одинаковым на различных подложках. Взгляните на Рисунки 5-2 и 5-3.


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

    Если бы вместо этого я выбрал GIF, я был бы ограничен двоичной прозрачностью GIF. Результат этого Вы можете увидеть на Рисунке 5-4. Я думаю мы все согласимся, что это несовсем хорошо выглядит.

    Полупрозрачное HTML покрытие

    Очень популярная техника в графическом дизайне — покрытие фото или какого-либо изображения частично просвечивающейся областью, с использованием текста. Такая техника позволяет выводить текст без необходимости скрывать под ним часть изображения. Дизайнер Wilson Miner использует ее для создания красивого эффекта на сайте ювелирных украшений Gingeroot, который Вы можете увидеть на Рисунке 5-5.

    Вилсон (Wilson) собрал полупрозрачную область и текст в JPEG изображение. Он заранее сделал его в Photoshop. Это прекрасно работает и покрывает все потребности дизайна сайта. Но что если текст в этой просвечивающейся области необходимо менять очень часто и возможно даже для каждого посетителя? В этом случае, будет более практичным поместить текст в изображение. Текст необходимо будет встраивать с помощью HTML и CSS. Используя прозрачность альфа канала PNG мы можем эмулировать стиль Вилсона без необходимости размещать текст в изображении.

    Цукерберг рекомендует:  Ошибка - Ошибка в sql при создании диаграммы

    Я начну с фотографии моей дочери, Haley Madysan, размещенной в простой XHTML страничке с некоторым базовым стилем CSS. Замечу, что я использую встроенный стиль CSS только для целей демонстрации. В реальной ситуации использование внешних ссылок на страницу стилей более предпочтительно из-за большей гибкости, меньшей повторяемости кода и большей практичности в управлении самим файлом.

    Вот так, я более или менее сдублировал то, что Вы видели на сайте Вилсона Gingeroot, за исключением (пока) какой-либо прозрачности, как показано на Рисунке 5-6.

    Теперь я создам аналогичное, пиксель в пиксель, изображение в Photoshop. Я заполняю изображение светло-голубым оттенком и ставлю непрозрачность слоя на 70%. В завершении, я сохраняю картинку в Photoshop используя установки PNG-24 с включенной прозрачностью. Затем я просто использую изображение как фон для покрытия, вместо сплошного серого, как Вы видели на Рисунке 5-6.

    Результат довольно схожий с оригиналом, но с HTML и CSS текстом он стил более гибким, посмотрите на рисунок 5-7

    Вилсон Майнер (Wilson Miner) теперь использует схожую концепцию в другой области сайта Gingeroot. На страницах, которые показывают доступные товары, прозрачность PNG используется для отображения в левом верхнем углу фотографий обозначения On Sale, как показано на Рисунке 5-8. Единожды создав изображение On Sale, и сохранив его с прозрачным фоном как PNG картинку, Вилсон устранил необходимость в создании различных версии изображений товаров, с флагом-обозначением и без него.

    Я также использовал эту технику на Explore Steamboat — сайте о событиях, мероприятиях и достижениях в Steamboat Springs, Colorado.

    В другом творческом примере, дизайнер Брайн Велосо (Bryan Veloso) (handyblogger: это тот самый, который создал набор стандартных шаблонов блогов для Google Blogger и который на самом деле является реальным локомотивом веб дизайнерского сообщества) использует прозрачность PNG изображения прикрепленного к верху страницы для создания эфекта «увядания», в котором текст как-бы проявляется когда Вы прокручиваете страницу вниз. Эффект найденый на Revyver.com (см. Рисунки 5-10 и 5-11) выглядит даже лучше, чем он описан, поэтому не упустите шанс взглянут на него (handyblogger: сейчас Брайн сменил дизайн и этой фенечки уже нет :( ). Кроме этого, дерево, установленное впереди текстового содержимого страницы производит неожиданный визуальный эффект, своеобразный «вау!» фактор для тех, кто видит это впервые.

    Водяные знаки

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

    На моем персональном вебсайте (Рисунок 5-12), я демонстрирую большую галерею фотографий (сейчас там более двух тысяч фотографий). В реалии эти фотографии загружены на Flickr, популярный онлайновый ресурс публикации фото, и затем отображаются локально на моем сайте с помощью API Flick’ера.

    Что если я хочу поместить мое персональное лого на все мои фотографии? Да, это возможно — открыв каждое изображение в Photoshop, применив к нему лого и пересохранив картинку (handyblogger: далее Джефф повторяется). Однако это становится ужасно непрактичным с тысячами изображений, которые постоянно обновляются — и иногда обновляются когда у меня нет поблизости компьютера (к примеру я отсылаю фотографии на Flickr с моего сотового). Было бы замечательно, если бы лого могло добавляться автоматически? PNG может сделать это.

    HTML используемый для показа фото на странице выглядит вот так:

    Я создал в Photoshop версию моего лого в белом, как изображение 80х80 пикселей и установил у него непрозрачность 50%. Сохранил его в стандартных установках PNG-24, и в итоговой картинке она сохранилась как 50% прозрачность. Затем я просто добавил это изображение в мой HTML вот так:

    И немного правильно спозиционировал его с помощью CSS:

    В результате водяная метка будет встроена в фото, но в действительности это лишь отдельное PNG изображение, которое «сидит» сверху него (Рисунок 5-13). Применяя это в моем шаблоне для моей системы управления контентом я получаю водяной знак на каждом изображении без необходимости делать это больше двух тысяч раз.

    Если Вы хотите отличиться, Вы можете использовать DOM написав скрипт для вставки дополнительного (X)HTML и выполняя разметку водяными знаками на лету. (handyblogger: обратите внимание, что Джеф использует этот прием лишь для того, что-бы указать посетителю на copyright изображения, но ни как для того, чтобы защитить его от копирования)

    Маска

    Другое подручное использование PNG изображения и прозрачности альфа канала — это маска. Технически это очень похоже на то, что Вы только что видели на изображениях с водяными знаками, но этим добиваются другого визуального эффекта. В этот раз я сделаю в Photoshop версию моего большого лого. Вместо того, чтобы делать лого белым, я сделаю его прозрачным а остаток изображения — белым, потому что фон моей страницы — белый (Рисунок 5-14).

    Как я говорил, технический аспект этого очень похож на водяные знаки из предыдущей секции. Начнем с HTML:

    Посмотрите на результат Рисунок 5-15

    Иконки с изменяемым цветом

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

    Возможно нам необходим набор иконок изображающих виды спорта (Рисунок 5-16)

    Я создал белые изображения — трафареты с символами иконками также, как я делал лого с маской в предыдущем примере (Рисунок 5-17)


    После подгонки размеров изображений (я выбрал 48х48 пикселей), я сохранил их используя в Photoshop настройки по умолчанию для PNG-24 с прозрачностью. Затем я создал простой XHTML файл, в котором описал каждое изображение:

    Я определил #cc0000 (насыщенный красный) как цвет фона для изображений в этом файле. Результат — красное сияние через трафарет (Рисунок 5-18). Заметьте замечательную сглаженность границ — спасибо за поддержку антиалиасинга PNG для частично прозрачных пикселей.

    Как Вы можете видеть на Рисунке 5-19 я могу изменить цвет иконок просто поменяв значение цвета в моем CSS.

    Этот вид простого изменения цвета может быть очень удобен, когда Вам необходимо переработать дизайн Вашего сайта. Вместо того, что-бы переделывать все изображения иконок, Вы просто изменяете цвет в CSS. Прием можно также замечательно использовать при наведении мышью на изображения со ссылками. Для примера, Вы можете использовать красный для обычного цвета и голубой при «наезде» мышью:

    Вы даже можете использовать дополнительный CSS для более творческих вещей, таких как добавление обрамления (Рисунок 5-20)

    Dan Cederholm писал об очень похожей технике в своем блоге еще в 2003, и PJ Onori раздавал замечательный набор иконок (названный Sanscons) базирующийся на этой технике на своем вебсайте.

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

    И Dan и PJ использовали прозрачный GIF вместо PNG. Это полностью покрывало их потребности, и под стиль иконок им приходилось создавать пиксельные изображения. Используя PNG, Вы можете получать похожую технику, но с некоторым превосходством ввиде антиалиасинга и частичной прозрачности для использования ее в более детализированных иконках.

    Хорошо, но в каких браузерах это работает?

    Я знаю, что Вы думаете: вся эта PNG прозрачность хорошо выглядит, но практична ли она?

    Хорошие новости заключаются в том, что все современные браузеры полностью поддерживают PNG изображения, включая прозрачность альфа канала, преимущества которого я показал в примерах. Safari (все версии), Firefox (все версии), Opera (версии 6 и выше), Netscape (версии 6 и выше), и Mozilla (все версии) будут на ура отрабатывать все, что я у них попрошу. Но есть и одна плохая новость — единственный браузер, который я еще не упомянул и который имеется у большинства Ваших пользователей: Internet Explorer.

    Internet Explorer 6 и ниже не поддерживает прозрачность альфа канала встроенную в PNG формат. С тех пор как для большинства многочисленных веб серферов был сделан выбор (или не выбор) браузера, эта зияющая дыра сдерживала веб дизайнеров далеко от PNG. Но, с выходом Internet Explorer 7 мы получили полную поддержку альфа прозрачности PNG во всех значимых браузерах. Что дальше, есть ли пути для работы с альфа-прозрачностью PNG в Internet Explorer 6 и ниже? Итак, если Вы хотите использовать данный эффект, ничто не остановит Вас. Internet Explorer 6 и его ранние версии требуют к себе большего, чем того надо, внимания, но это определенно возможно.

    Хак для Internet Explorer: AlphaImageLoader

    В составе Internet Explorer имеются различные собственные фильтры. Они используются в CSS, но они не являются какой-либо частью официальной спецификации CSS. Другими словами, они не стандартизированы в веб. К сожалению Internet Explorer 6 и ниже не полностью поддерживают формат PNG (который рекомендован W3C), у Microsoft’а имеется фильтр который устраняет этот недостаток: AlphaImageLoader.

    В соответствии с разделом на официальном сайте Microsoft, AlphaImageLoader «отображает изображение в пределах границ объекта и между фоном объекта и его содержимым». Другими словами, AlphaImageLoader загружает PNG изображение с его полной прозрачностью, но он загружает его как собственный слой, снизу которого находится содержимое объекта на котором он применяется. PNG изображения, загруженные таким путем, больше действуют как фоновые изображения, чем изображения переднего плана (хотя они в действительности «сидят» сверху фона объекта).

    Вобщем, Вы просто можете применить AlphaImageLoader в CSS на элементах img и наслаждаться результатом. Сперва будет загружено изображение, прозрачность остается, но затем изображение будет загружено снова — как переднее содержимое объекта — с непрозрачными областями (таким образом «затеняется» Ваша прозрачная версия).

    Вы не можете использовать прозрачное PNG как фоновое изображение CSS для (X)HTML элемента (скажем, для

    Реальное использование AlphaImageLoader

    Давайте вернемся назад к одному из ранних примеров и попробуем правильно загрузить его в Internet Explorer. Помните Channel 49, TV станцию в Topeka? Уверен — да. Рисунок 5-21 показывает как выглядит сайт в Internet Explorer 6.

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

    Вы видите изображение, и безусловно это PNG, даже Internet Explorer загружает его безукоризненно. Секретный ингредиент этого — JavaScript. В действительности я использовал немного DOM скриптинга для того, чтобы убрать элемент img на лету и заменить его элементом div, который — Вы догадались — использует AlphaImageLoader. JavaScript описан внутри условных комментариев, другая подручная, но полностью нестандартизированная идиома от Microsoft встроенная в Internet Explorer. Условные комментарии позволяют Вам испольлзовать код только для заранее известной версии Internet Explorer. Код игнорируется всеми другими браузерами, поэтому он никак их не затрагивает. В элементе сайта www.49abcnews.com , Вы найдете:

    Спасибо первой строчке, if lte IE6, этот скрипт будет включен в отрисовываемый документ только если он будет показан в версии Internet Explorer меньше или равной (это указывается с помощью lte) 6. Все другие браузеры, включая новоприбывшего Internet Explorer 7, будут это полностью игнорировать.

    Итак, что же в файле JavaScript fixWeatherPng.js? Взглянем:

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

    Начинаем, сперва мы ищем изображение с которым мы будем работать по его id атрибуту и сохраняем его в переменной img. Сохраняем атрибут src (URL на файл изображения) в переменной src. Затем мы прячем элемент img выставляя CSS свойство visibility в hidden.

    Далее создаем новый элемент div и сохраняем его в переменной div. Применяем к нему фильтр AlphaImageLoade, используя URL из переменной src, который мы сохранили ранее.

    В итоге мы заменяем оригинальный элемент img (который скрыт) на вновь созданый элемент div, к которому удачно прицеплен AlphaImageLoader.

    Цукерберг рекомендует:  Петербург - Познакомлюсь с парнем из Санкт-Петербурга

    Использование DOM скриптинга для вставки Вашего AlphaImageLoader — фильтрующего биты на лету, имеет свою нелицеприятную, но необходимую сторону — некорректный CSS. Более того, вне Вашей (X)HTML разметки будут содержаться несемантические div элементы. И пока все это описано внутри условных комментариев, для других браузеров нет шанса быть испорченными кодом от Microsoft. (handyblogger: Здесь Джефф пытается тонко указать на «корявое» решение от Microsoft)

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


    В заключении

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

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

    Вторая: Internet Explorer 7 предлагает полную поддержку для альфа прозрачности PNG. Эффекты, которые могут быть получены с полной гаммой полупрозрачных опций практически безграничны. Я ожидаю, что дизайнерам, которые найдут интересные пути использования прозрачности PNG, по принципу тех, что описаны в этой статье, будут открыты двери на новый уровень стилей еще невиданных до этого. Я дал Вам полезные идеи того, что Вы можете создавать с помощью прозрачности PNG, но не останавливайтесь на этом. Ищите себя!

    Отрывок из Web Standards Creativity от Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, и Rob Weychert; опубликовано friends of ED. Copyright Jeff Croft 2007. Использовано с разрешения Apress, Inc.

    Прозрачный PNG в IE 5-6

    Прозрачный PNG и Internet Explorer

    Речь пойдет о поддержке браузером Internet Explorer популярного графического формата Portable Network Graphic (PNG). Значение этого типа изображений в веб-дизайне трудно переоценить: это практически единственный формат картинок с поддержкой альфа-канала.

    Формат PNG разработан для замены устаревшего и более простого формата GIF. Но морально устаревшие браузеры не в состоянии одинаково отображать png-файлы. Проблемным местом является эта самая прозрачность.

    Проблема поддержки 32-битной (полной) прозрачности картинки формата PNG в Microsoft Internet Explorer была решена только в седьмой версии браузера. Для остальных версий IE есть несколько способов, которые помогут веб-разработчику добиться прозрачности путём включения в веб-страницу специальных функций и скриптов.

    Реализация прозрачности PNG в IE 5-6

    Чтобы полноценно пользоваться всеми прелестями альфа-канала в png, нужно заменить серый фон, который генерирует IE на прозрачный. Сделать это можно простым скриптом, подставляющим вместо этого серого фона пустой прозрачный gif.

    Секрет этой реализации основан на использовании фильтра AlphaImageLoader, представленном в IE5.5 и выше.

    PNG-изображение с альфа-каналом загружается посредством фильтра, который показывает его в пределах объекта, а также между фоном объекта и контента, с возможностью кадрирования или изменения размеров изображения. Фильтр AlphaImageLoader поддерживает прозрачность от 0 до 100% и кроме того, служит хорошим решением для масштабирования изображения.

    См. MSDN для более подробного изучения.

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

    Исходный код

    Теперь нам нужно создать код, который все это обработает. Все, что нам нужно сделать, это проверить атрибут src и если это PNG-изображение, мы применяем фильтр и заменяем src реального изображения на прозрачное gif-изображение. Чтобы узнать, когда произойдет замена в src , мы отслеживаем событие onpropertychange . Если src не PNG-изображение, мы удаляем фильтр. Чтобы сделать это легче, мы модифицируем runtimeStyle объект, вместо style объекта. RuntimeStyle объект может рассматриваться как экстра стиль CSS, который имеет приоритет над обычным объвленным стилем. При задании runtimeStyle старые значения до сих пор хранятся в стиле объекта, как только runtimeStyle сбросит значения старого стиля будут применяться, как обычно.

    Ниже приводится полный исходный код. Обратите внимание, что код будет работать только, если пользователь использует IE5.5+ на 32-разрядной Windows-платформе.

    Использование

    Использовать данный скрипт действительно очень просто. Все, что нужно сделать, это назначить тегу img PNG behavior .

    Примечания

    Обратите внимание, что behavior использует изображение под названием «blank.gif» . Это изображение должно находится в том же каталоге, где находится веб-страница, использующая behavior , иначе вам придется изменить behavior -файл.

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

    Руководство по установке скрипта

      1. Размещаем скрипт pngbehavior.htc , например, в директории /inc/ .
      2. Указываем путь к прозрачному gif`у, например так:

    1. В CSS объявляем класс .png

      или используем хак для старых ИЕ

      В HTML PNG-изображению с прозрачностью назначаем класс .png :

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

    Описанный способ давно и успешно используется многими веб-разработчиками.

    Альтернативный вариант решения проблемы прозрачности PNG в ИЕ, описан в посте «JavaScript, который делает способным ИЕ5.5-8 поддерживать веб-стандарты».

    Какие версии IE поддерживают значки PNG?

    qaru.site/questions/17892/. было сказано, что только IE6 имеет проблемы с favicons PNG, , но на канале9, он сказал, что IE7 также не поддерживает фейвонов PNG.

    Но, к сожалению, ссылка channel9 была удалена — так кто-нибудь знает официальную/проверенную информацию, которая указывает, какая версия IE начала поддерживать значки PNG?

    Краткий ответ:

    IE11 — первая версия Internet Explorer для поддержки прямого использования значков формата .png и .gif .

    Почему путаница?

    Я полагаю, что путаница вызвана тем, что .png изображения могут использоваться внутри .ico файлов ( .ico файлы — это только файлы контейнера изображений), как и IE7, что правда.

    Однако ранее, прямые .png favicons были только совместимы с другими основными браузерами (Chrome, Firefox и т.д.).

    Доказательство прямой .png совместимости Favicon в IE11 и далее:

    [20] указывает на статью под названием Fun with Favicons, написанный Эриком Лоу, бывшим сотрудником Microsoft и Microsoft MVP в 2013 году.

    В статье содержится следующее:

    IE11 показывает некоторые существенные улучшения в поддержке Favicon:

    • Favicons можно динамически изменять с помощью script.
    • URL-адрес Favicon может указывать непосредственно на файл GIF.
    • URL-адрес Favicon может указывать непосредственно на файл PNG.

    Обратите внимание, что, возможно, не самая лучшая идея использовать прямые значки .png из-за проблем совместимости со старыми версиями IE, как упоминал Эрик в том же сообщении в блоге:

    «Конечно, только потому, что вы можете указать на .png или .gif , это не значит вы должны — как по соображениям совместимости, так и по опыту (помните .ico может содержать несколько изображений, чтобы наилучшим образом соответствовать контексту отображения) вы должны продолжать использовать .ico в качестве своего значка.


    Еще одна статья, написанная г-ном Лоу, называется Изменения IE11, также вкратце упоминается поддержка IE11 для прямого .png и .gif favicons формата файла.

    Доказательство .png Несовместимость Favicon в IE10 и до:

    Существует много официальных и неофициальных источников, доказывающих, что IE10 и до поддержки .ico Favicons.

    По состоянию на 13/10/2013 раздел «Поддержка формата файла» на странице Favicon Wikipedia напоминает следующее:

    В статье 2012 года в MSDN под названием Как добавить ярлык на веб-страницу содержит следующий фрагмент

    «Обратите внимание, что ярлыки в форматах изображений, отличных от .ico , — для экземпляр .bmp , .gif или .png — не может отображаться в Интернете Проводник«.

    Несколько цитат из неофициальных источников:

    «Во-первых, IE требует фактического файла значков. Не только переименовывается jpg или png с расширением ico .» — Greg Hostetler, настройка значков в IE7..

    «Это должен быть формат значка Windows вместо PNG или GiF, только для IE8 поддерживает ICO.» xyberbit, MSDN..

    «С другой стороны, Internet Explorer не поддерживает значки PNG, но он будет игнорировать иконку PNG и использовать значок ICO, независимо порядка, в котором они объявлены.» — Jonathon T.Neal.

    «Один. Большая проблема. IE10 не поддерживает условные комментарии, и это не поддерживает значки PNG.» — Jonathon T.Neal

    Ответы на другие вопросы:

    Можно ли просто переписать имя файла с .png на .ico и наоборот обойти эту проблему несовместимости?

    К сожалению, нет (проверено на @ Truerror на 17/06/2013 в IE10). Для IE10 и ранее требуется фактический значок ( .ico ).

    Здесь Microsoft должен сказать об этом:

    «Рассмотрите возможность создания значка 16×16 пикселей, а также 32×32-пиксельного значок (и больше, разрешая пропускную способность), так как на дисплеях с высоким разрешением DPI, Internet Explorer может растянуть значок в соответствии с доступным пространством.

    Баг с прозрачностью картинок PNG в IE6. Решения

    О существовании бага разработчики браузера «Internet Explorer» признались на официальном сайте в бюллетене: «Не отображается прозрачность в файлах PNG в Internet Explorer». Цитируем с сайта:

    При обзоре веб-страницы, содержащей изображение с прозрачным фоном формата Portable Network Graphics (PNG), фон изображения скорее будет отображаться серым, а не прозрачным.

    Познакомьтесь с самыми простыми способами устранения этого недостатка.

    1 способ. Откажитесь от прозрачности

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

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

    2 способ. Конвертируйте PNG в формат GIF

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

    Прозрачность поддерживают только два формата — PNG и GIF, поэтому рекомендуем пересохранить Ваше изображение в формат GIF. С отображением прозрачности в GIF-файлах проблем в браузере IE6 не наблюдается.

    После конвертации файл будет иметь другое расширение, поэтому не забудьте обновить названия картинок в коде сайта.

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

    3 способ. Используйте скрипт jquery.pngFix.js на «jQuery»

    Пожалуй, самое красивое решение задачи. Скачайте готовый плугин на «jQuery» с этого сайта. Закачайте его по FTP на свой сайт и пропишите в шаблоне страниц следующий код:

    Код, приведённый выше, желательно разместить между тегами и на всех страницах Вашего сайта. Не забудьте скачать последнюю версию библиотеки «jQuery» (jquery-latest.pack.js) с официального сайта.

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

    У данного решения есть один недостаток. Функция «pngFix» вызывается только в момент полной загрузки страницы сайта! Если на странице много картинок или посетитель использует медленное подключение к Интернету, то может наблюдаться интересный эффект:

    1. Пока страница сайта загружается, картинка PNG будет отображаться с ошибкой прозрачности;
    2. Как только страница полностью загрузится, например, через 4-7 секунд, то баг сразу же исправляется.

    На заметку! Подобный эффект Вы можете наблюдать даже на нашем сайте. Понаблюдайте, как ведёт себя логотип «Ваш МАСТЕР» в шапке сайта при просмотре в браузере IE. Не знаем, как Вас, но нас это всё-таки немножко раздражает.

    Мы привели наиболее простые и интересные решения данной проблемы. Для полноты картины, рекомендуем также почитать следующие статьи:

    Надеемся, наша статья поможет Вам делать правильные сайты.

    Ошибки бывают у всех, даже у «Майкрософт».

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих