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

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