Сайтостроение

Создание сайта

Раскрутка сайта

Заработок на сайте

...еще о сайтостроении

Внедрение картинки (данных) непосредственно в HTML-код

В HTML существует возможность хранить картинки или другие данные в текстовом виде непосредственно в файле HTML.

Это может пригодиться, если вы хотите, например, в подпись своих писем вставить небольшую картинку и не хотите, чтобы она была вложена в письмо или загружалась из сети. Вставленная таким образом картинка всегда доступна.

Данные должны быть предварительно закодированы в Base64. Закодировать картинку в Base64 можно при помощи онлайн сервисов, например http://www.motobit.com/util/base64-decoder-encoder.asp или используя Total Commander.

Для вставки используем конструкцию вида:

<img src="data:image/gif;base64,
...картинка в кодировке base64...">

Формат картинки может быть любым, конечно поддерживаемым тегом <IMG>, только не забываем менять тип.

Для того, чтобы закодировать картинку, используя Total Commander, идем в меню Files => Encode Files (Файлы => Кодировать), выбираем MIME (Base64), указываем куда сохранить.

Открываем полученный файл с помощью текстового редактора и копируем все после служебной информации.

Пример:

Допустим мы хотим вставить такую картинку u.png ()

Кодируем используя Total Commander, в результате получаем файл u.b64:

MIME-Version: 1.0
Content-Type: application/octet-stream; name="u.png"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="u.png"


iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD
UUlEQVR42lWTWUwTURSGaUtIKY5QweISTUzceDGu0Rj1xURjTNQEE+ODGn0hPhBEQdqZztahBbrA
tFih1Fprh9IBiVLLErZSU7BUoS7VqNH44ovx0S0ovdfO4Ez04cw9Ofec7/5zzr15NEnkUxSVFx8O
bZ1x7nzHN6z9nOhnzOFwWCnECcKoEFbBRrrp6iF/XRvD0BoplkdTuAiIhtt3P3Fu+jJlKlkM1WoX
LFjVeSnpXrC94gV3ciJp1X0L1K7+NtDfvXdpj1TmmUwm8QTfLa867T+ceWTSwO5r5b87XNaDEoBr
v3p2Ai+AU1Qh5OiDGS4UXi4roAisQHBiYfJS2obAVPMyELYcGxViOIaKcLaNLXzadej5nBUBPXW6
hdYW0z4RQOYUXK2tUfr8QeXL0Kn4JKEBk7QWdtrrLggJJEmoCBxVCf50qIaaa0HABFkEPZaLNnGf
wPNFGV0u05Y554bvMQoBPLbxs9t9QydJpHP/KayRbsf+pG1NdgTTgDuGXa8dbS41ZtArxaQYT1Wl
HVqYaloGOcvJIan4X2MdViTl3vExbS+GPfXlvzzutj1LPch9HrYea59t0YIRtAAO+PQuIWYwNKik
Yty41Iuk/3TvMzsCB9HcQR7msgzgjZs7Z5rLQPR6PojeJW2d3oDCoG/IlwAYqlexbp/i9eB19ziu
BoMoAlrR03YZ0G8+0JFhS8EjuhD6zWfuCTEjppcBOKYX1bwaqA5MM2oYZ4pBy7XjrAyY7sPqU01F
cNZW/jtwZeXXVpt5u1RM4JhYzHFBddqz5/28fUU2NwngtVUbZUCE79o6x67/MYiXLiSbS8D9xp1v
I7znkLvDK07A5/MiT7mzdxMMAsdMqxaiWDHkgzePigBUXy9KTfdWeVKNSjjPrvv5uKkYxszlIHX7
eDLeVfkgbt30bt5eAlOOtT9nLRrI03szrOumOtcb4SrTSj2KKfr4nuUZ7kR8HFPAYXLlYqxRl43T
GjjTWAhHCC1MNK/+lWA0cJLRgfsh95G/N1H136z7+BCSuHMuMEGVLo4a1XCKKcuO0WXZBw1FcNig
hmPWbe8jIeeJpdFiCrkHguWUyM92NBKseBut8T92bfsw66z49IyrHH2T5CvlqeCYUvL/ANIZ7+oh
XSdWAAAAAElFTkSuQmCC

Картинка готова. Цветом выделены необходимые нам данные. Осталось только вставить подготовленную картинку в нужное место html-страницы (подписи письма в формате html). Используем тег <IMG>:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD
UUlEQVR42lWTWUwTURSGaUtIKY5QweISTUzceDGu0Rj1xURjTNQEE+ODGn0hPhBEQdqZztahBbrA
tFih1Fprh9IBiVLLErZSU7BUoS7VqNH44ovx0S0ovdfO4Ez04cw9Ofec7/5zzr15NEnkUxSVFx8O
bZ1x7nzHN6z9nOhnzOFwWCnECcKoEFbBRrrp6iF/XRvD0BoplkdTuAiIhtt3P3Fu+jJlKlkM1WoX
LFjVeSnpXrC94gV3ciJp1X0L1K7+NtDfvXdpj1TmmUwm8QTfLa867T+ceWTSwO5r5b87XNaDEoBr
v3p2Ai+AU1Qh5OiDGS4UXi4roAisQHBiYfJS2obAVPMyELYcGxViOIaKcLaNLXzadej5nBUBPXW6
hdYW0z4RQOYUXK2tUfr8QeXL0Kn4JKEBk7QWdtrrLggJJEmoCBxVCf50qIaaa0HABFkEPZaLNnGf
wPNFGV0u05Y554bvMQoBPLbxs9t9QydJpHP/KayRbsf+pG1NdgTTgDuGXa8dbS41ZtArxaQYT1Wl
HVqYaloGOcvJIan4X2MdViTl3vExbS+GPfXlvzzutj1LPch9HrYea59t0YIRtAAO+PQuIWYwNKik
Yty41Iuk/3TvMzsCB9HcQR7msgzgjZs7Z5rLQPR6PojeJW2d3oDCoG/IlwAYqlexbp/i9eB19ziu
BoMoAlrR03YZ0G8+0JFhS8EjuhD6zWfuCTEjppcBOKYX1bwaqA5MM2oYZ4pBy7XjrAyY7sPqU01F
cNZW/jtwZeXXVpt5u1RM4JhYzHFBddqz5/28fUU2NwngtVUbZUCE79o6x67/MYiXLiSbS8D9xp1v
I7znkLvDK07A5/MiT7mzdxMMAsdMqxaiWDHkgzePigBUXy9KTfdWeVKNSjjPrvv5uKkYxszlIHX7
eDLeVfkgbt30bt5eAlOOtT9nLRrI03szrOumOtcb4SrTSj2KKfr4nuUZ7kR8HFPAYXLlYqxRl43T
GjjTWAhHCC1MNK/+lWA0cJLRgfsh95G/N1H136z7+BCSuHMuMEGVLo4a1XCKKcuO0WXZBw1FcNig
hmPWbe8jIeeJpdFiCrkHguWUyM92NBKseBut8T92bfsw66z49IyrHH2T5CvlqeCYUvL/ANIZ7+oh
XSdWAAAAAElFTkSuQmCC">

Результат:

P.S.
Работает: Opera 10, Firefox 3, IE 8, Thunderbird 2, Thunderbird 3.
Не работает: IE 6.
Если вашего браузера (почтового клиента) нет в списке, отпишитесь пожалуйста на форуме о работоспособности метода, конечно с указанием наименования и версии. О работоспособности в браузере можно судить по результату.

NumWord.com - числа прописью, онлайн сервис.