В вебе используются два формата изображений, которые обладают прозрачностью: 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.
На сегодня всё. Пишите темы, на которые вам бы было интересно почитать посты, будем писать=). Все счастливых выходных!
17/12/2009 at 17:27 Постоянная ссылка Цитировать
Способ предложеный Владимиром Токмаковым думаю досих пор актуальный, независимо от того пользуются ли еще експлорером 5.5 или нет. Как и писалось в посте, разделение изоброажения пнг24 на два изображения первое png8 c полностью непрозрачной областью и png24 только с прозрачной и полурозрачной областью значительно весит меньше, чем одно изображение в пнг24.http://www.smushit.com/ysmush.it/ но есть и по мощнее сервис адресс которого на вскидку не припомню.:)
Минус этого способа в том что замест одного http-запроса становится два http-запроса, что не есть хорошо. Сразу появляется в голове вопрос, чем жертвовать запросами или размером?.
К счастью придумали люди другой способ оптимизации пнг24 не разделяя на две картинки, об этом можно прочитать в том же техногреде на сайте Лебедева. Минус в том что автоматизировать его практически не возможно в отличии от варианта с разделением одной картинки на две.
p.s.
Также есть еще онлайн сервисы для оптимизации png24
к примеру
17/12/2009 at 17:39 Постоянная ссылка Цитировать
Мне кажется, что больше всего отталкивает именно трудоёмкость процесса – всё таки два изображения – не одно.
А по поводу оптимизации – предпочитаю фотошоп, на все форматы, делай всё что хочешь. Основные методики по уменьшению размера можно смело записывать в экшан, применять и смотреть. Хотя обычно и без них всё обходится. К счастью большие цветастые пнг-24 не так часто приходится использовать.