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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В завершении

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

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

html, png

(ещё не оценили)