Использование прозрачности PNG для решения различных вопросов

« Предыдущая запись
 
  Следующая запись »
 

В вебе используются два формата изображений, которые обладают прозрачностью: GIF (Graphics Interchange Format) и PNG (Portable Network Graphics). Эти два формата хранят изображение без потери качества. PNG пришёл на смену GIF, чтобы стать его полноценным приемником. Полноценного не получилось (не поддерживает анимацию), но в остальном стал зе бест.

PNG делится на PNG-8 и PNG-24. PNG-8 на практике тот же GIF - имеет палитру до 256 цветов. Какой использовать - нужно смотреть по ситуации. Обычно размер файла меньше в гифе, если мало цветов и изображение меньше. Если изображение имеет цветов больше и размер больше, то лучше пнг. Но всё равно, смотреть по ситуации надо.

А вот PNG-24 отличается. По сути это "безразмерный" по палитре ГИФ, который позволяет работать с полупрозрачными тенями. Однако вес файла может достигать больших размеров, если картинка большая и цветов много.

Собственно по форматам знать более и не надо. А кому интересно, может глянуть в википедии тут и тут.

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

Изображение с фоном

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

maggi Использование прозрачности PNG для решения различных вопросов

Делается это просто. Берётся рамочка и сохраняется в PNG (в примере PNG-24, так как есть тень), назовём её border.png. Затем на странице вставляем изображение рамки и через CSS прописываем ему бэкграунд - нужное нам изображение (пример по ссылке).

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

 

Тень для большого изображения

Способ предложен Владимиром Токмаковым (опубликован на сайте Лебедева) и заключается в разделении изображения на основную часть и на подложку с тенью.

knorr Использование прозрачности PNG для решения различных вопросов

Для чего это нужно? Во-первых гифка и пнг-шка-24 с малым количеством цветов будут суммарно весить меньше, чем просто пнг-шка-24. Во-вторых это комбо будет более сносно отображаться в IE версий 5,5 и ниже.

Актуальность? На момент публикации (январь 2005) это было бы актуально, но уже прошло почти 5 лет, скорость интернета возросла, что такое IE5.5 уже почти никто не знает, так что актуальность отсутствует. И это не говоря о том, что  чтобы сделать такое комбо - нужно много возиться.

Тем не менее способ такой есть, знать его следует, быть может он подтолкнёт к созданию какого-нибудь нового интересного применения. По сути исполнения он аналогичен первому предложенному применению (но если кому-то надо, то по ссылке выше можно ознакомиться с кодом примера).

Другие применения

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

В завершении

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

На сегодня всё. Пишите темы, на которые вам бы было интересно почитать посты, будем писать=). Все счастливых выходных!

,

1 звезда2 звезд3 звезд4 звезд5 звезд (ещё не оценили)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 2 на запись

"Использование прозрачности PNG для решения различных вопросов"

  1. Способ предложеный Владимиром Токмаковым думаю досих пор актуальный, независимо от того пользуются ли еще експлорером 5.5 или нет. Как и писалось в посте, разделение изоброажения пнг24 на два изображения первое png8 c полностью непрозрачной областью и png24 только с прозрачной и полурозрачной областью значительно весит меньше, чем одно изображение в пнг24.
    Минус этого способа в том что замест одного http-запроса становится два http-запроса, что не есть хорошо. Сразу появляется в голове вопрос, чем жертвовать запросами или размером?.
    К счастью придумали люди другой способ оптимизации пнг24 не разделяя на две картинки, об этом можно прочитать в том же техногреде на сайте Лебедева. Минус в том что автоматизировать его практически не возможно в отличии от варианта с разделением одной картинки на две.
    p.s.
    Также есть еще онлайн сервисы для оптимизации png24
    к примеру http://www.smushit.com/ysmush.it/ но есть и по мощнее сервис адресс которого на вскидку не припомню.:)

  2. Мне кажется, что больше всего отталкивает именно трудоёмкость процесса – всё таки два изображения – не одно.
    А по поводу оптимизации – предпочитаю фотошоп, на все форматы, делай всё что хочешь. Основные методики по уменьшению размера можно смело записывать в экшан, применять и смотреть. Хотя обычно и без них всё обходится. К счастью большие цветастые пнг-24 не так часто приходится использовать.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии