Интеграция изображений в страницу (HTML, CSS3)

Сегодня поговорим о интересной особенности HTML протокола,а точнее о передачи изображения как текста.



Давайте вспомним как почтой пересылаются интегрированные в сообщение изображения и прочие данные.
Пример почтового сообщения :

--90e6ba6e83c4c085b70494b26d88
Content-Type: text/plain; charset=KOI8-R
Content-Transfer-Encoding: base64

KtTFy9PUKiAq0MnT2M3BKiAq088g19PRy8nNKiDCwczBzdXUz80K
--90e6ba6e83c4c085b70494b26d88
Content-Type: text/html; charset=KOI8-R
Content-Transfer-Encoding: base64 

PGI+1MXL09Q8L2I+IDxpPtDJ09jNwTwvaT4gPHU+088g19PRy8nNPC91PiDCPHNwYW4gc3R5bGU9
ImJhY2tncm91bmQtY29sb3I6IHJnYigyNTUsIDIwNCwgMTAyKTsiPsHMwc3V1M/NPC9zcGFuPjxi
cj4K
--90e6ba6e83c4c085b70494b26d88-- 

это не читаемый текст и есть данные передающиеся в письме кодированные по алгоритму base64, после шифрования данным алгоритмом все данные становятся текстом.
Это и есть та особенность которая нас очень интересует.
И нам никто не мешает использовать её в HTML, потому как он также является текстовым протоколом.

давайте как пример выведем значек папки в браузер:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0j
vb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAA
Re8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Cc
guWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" 
height="14" alt="Папка в base64"/>

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

data:image/gif;base64

После чего, через запятую вводятся символы изображения.

Кстати такой подход можно использовать и в CSS файлах, как пример так же с иконкой папки

ul {list-style:none;}
ul > li {
    margin:0 0 .1em;
    background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0j
    vb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1
    Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsV
    MkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) top left no-repeat;
    height:14px;
    text-indent:1.5em;
}

Теперь когда мы объявим список

<ul>
<li>Testing inline images, one</li>
<li>Two</li>
<li>Three</li>

</ul>

Мы получим вполне красивое дерево

Есть онлайн сервисы что бы преобразовать изображение в текст:
http://anosov.me/services-base64image/
http://khtulhu.org.ua/programmy/19-web-prilozheniya/204-kodirovanie-izobrazhenij-v-base64.html

Пользуйтесь, это очень интересный подход, особенно если использовать gzip на стороне сервера Apache.