Внедрение изображений в саму страницу — data:url

Помимо обычного внедрения изображения в страницу

<img src="/img/test.png" />

1	<img src="/img/test.png" />

Есть ещё дополнительный способ

<img src="data:image/png;base64,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" />

,где в атрибуте src пишем data:[<тип данных>][;base64],<данные>

<тип данных> — image/png, image/gif или image/jpeg

<данные> — само изображение в base64, которое можно получить используя функцию PHP base64_encode

Таким же образом можно вставить фоновое изображение.

background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB4ZJREFUeNrs3d9RIkkAwOH26hJwQ2BDYEOAN18xBAlBQ8AQNAR59U1C0BCWEJYQOPqu+2RZepiBQf59X9WUVS44iMuvuoeZ5mo+nweAU/CXpwAQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAMECECyAFv3tKWjXzc3N9eLL02K7PuDDmC22YfpKS15fXz0JgnV2Bmk7tMlie/bnwJSQKtceBwgWIFi0bOZxHPXo92WxzZe298XW9dScBsew2jdebL0tpmSdtK2apq1prMb+FH+IYRqs+V78e314egTrUkdYt1vc736xjdZ8Px44f/S0gikhIFgAggUIFoBgAbTGu4Qsi6dixLf44+kV3fD7qRn59Ir49v9kT/vvhM9TQnor/xb3OUtfp/5UgsXliqGIp1Xc1bx9Ps/rsaV49NK+Bxtuk8VoPofqayXjz3qpuf9RWH9KybLb4Nw2U0IOPqKKL9SfDWKV7xdv/55Ct8v+48oWb6HZBePddL/3UD5Bt+0L0O/8dxEsDqebQrFrcEYpHtvc923HEHQrHr+Lv00JObNYtfWiztEZNrjPS2jnGj7XARphcebTwJeKWE1SeL4vtqu0fVts/fDfMatZRbTqjtbibXsV+79N+1y3/7rHzNpeC8zaYoLFAcTp27qLrPM1kP304pyu/FsMyUMKWeng833hZ5dGZKuGaf/jlTCu7n+49PhKARsvBS9v/cJtH9bcdnVzwF2w+GJxVDMoxKpf80WZwzYujN42jbI6hWncY4NRzHMK14ORj2Bxvu4rRjZNl1cprRk/CNXHxnoVI6KmHoNlYQSLs9QtxGKyZSxmYf2yN9eh+pSCUsyEB8Hit5FPaZSyrXFFHEGwaDVY07DbZTbTwshom2A5MRPB4l+l5ZfbuCZw2jBYpanffXCyJ4JFRUDauA7woyKSoRDJWeH2b6aTCBadhrHZ5z6jx4qwvhttUeLSnMtQevGPwu4fB9bZ4j7x3Km7ivvm1RPyigzeQUSwTAkPNv3KJ59uup7xLm11lpPBlBD2JkaoX3P0lJeT+WW6KFiwjxFUnRDlaD3UnJrm5Wzica6Bp9mUkMsb5bT9kfb5DPhZw9uPU4TqjKDisa+44sTQNFGwuBxxZDM5kscyDZ8XQMdw3YXNx9jywoGiZUrImU3RTumxxgD9SNumGI3Cdu9UIlgc8dRvne4JPO68Rlbpd6izpA2CBV9msiFaDsALFhcwwuqd2FSxX5jeXgeX9AgWZzVCKQXrlM5pyp+HWJoaIlicebRObTq1j099FjvB4shUfXDEpTOdFCyOMFilZV1GX/g4ujuOaAYNR5DLTvXdUgTr4pTWYM+jrF1HWvF42NOGnxNDFS+r+Rm2W2G0V4jLR4PnoHTQ3oqngsWReQ7lk0jjKOstNHvnsJMC9R4+P3Z+VGPqdZ3i1mR/8XYvFb9XXR8Vv3+3ELN7o7Dj4NKcyxtlDSte+L20faQp1jT8eZC7Gz4/W3DXF3He3zR8rns1WQli/rSf0gho2jBYk0Ik8+hvvBS17tIUNH7/1n8hweJrjVO0njaMhPYxophVjNS2PY423GKUWXWB9SCsP07mnURTQg44NRzu6WdPNkzH2jwtYRiaX7xddSwPweKIo/UjtLtaw3ONadNtC/uchnoXRpc8bnFfyzQLFisvwibfb0NeQK8ftv/05zzF/BbKH1/f1j7zxdDfWwhI/Dl1Fw5sepyMPbmaz+eehRbd3Nzs+iN6Ky/Qr1waJl+Tlw+sd9YE6mPpa1ujjl7FPvPHgk32GO9B2m9vze/6/xsBr6+v/oMLFoApISBYAIIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAQgWIFgAggUIFoBgAQgWIFgAggUgWIBgAQgWgGABggUgWACCBQgWgGABCBYgWACCBSBYgGABCBaAYAGCBSBYAIIFCBaAYAEIFiBYAIIFCBaAYAEIFiBYAIIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAQgWIFgAggUgWIBgAQgWgGABggUgWACCBQgWgGABCBYgWACCBQgWgGABCBYgWACCBSBYgGABCBaAYAGCBSBYAIIFCBaAYAEIFiBYAIIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAYLlKQAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsQLAABAtAsIAL9Y8AAwDWiRkF0W3JdgAAAABJRU5ErkJggg==');

background: url('data:image/png;base64,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');

Ниже общий пример внедрения изображения, файл PHP, изображение test.png лежит в папке img

<?php
$data = base64_encode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/img/test.png'));
?>
<html>
<head>

	<title>Пример внедрения изображения в сам документ</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<style type="text/css">
	.with-bg {
		background: url('data:image/png;base64,<?=$data?>');
		width: 300px;
		height: 300px;
	}
	</style>
</head>
<body>

<img src="data:image/png;base64,<?=$data?>" />
<div class="with-bg">
	test
</div>

</body>
</html>

<?php

$data = base64_encode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/img/test.png'));

<html>

<head>

<title>Пример внедрения изображения в сам документ</title>

.with-bg {

background: url('data:image/png;base64,<?=$data?>');

width: 300px;

height: 300px;

}

</style>

</head>

<body>

test

</div>

</body>

</html>

Думаю описывать данный код не нужно.

Достоинства данного способа внедрения:

Нет дополнительных запросов к серверу
Иногда просто требуется чтобы документ был единым и содержал в себе изображения(чтобы не переносить по частям файл html, изображения и прочее — документ в одном файле). Я так например делал в сгенерированном документе для бухгалтерии внедрение логотипа и печати.

Недостатки:

Браузеры Internet Explorer вплоть до 7го не поддерживают данный способ внедрения.

27.10.2012 19:49

Comment (RSS) | Обратная ссылка

Понравилось? Поделись с другими плз

Комментарии ВКонтакте

Комментарии с сайта

Оставить комментарий