Сегодня поговорим о интересной особенности 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.
Комментариев нет:
Отправить комментарий