Внедрение изображений в саму страницу — data:url
Помимо обычного внедрения изображения в страницу
1 |
<img src="/img/test.png" /> |
Есть ещё дополнительный способ
1 |
<img src="data:image/png;base64,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" /> |
,где в атрибуте src пишем data:[<тип данных>][;base64],<данные>
<тип данных> — image/png, image/gif или image/jpeg
<данные> — само изображение в base64, которое можно получить используя функцию PHP base64_encode
Таким же образом можно вставить фоновое изображение.
1 |
background: url('data:image/png;base64,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'); |
Ниже общий пример внедрения изображения, файл PHP, изображение test.png лежит в папке img
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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> |
Думаю описывать данный код не нужно.
Достоинства данного способа внедрения:
- Нет дополнительных запросов к серверу
- Иногда просто требуется чтобы документ был единым и содержал в себе изображения(чтобы не переносить по частям файл html, изображения и прочее — документ в одном файле). Я так например делал в сгенерированном документе для бухгалтерии внедрение логотипа и печати.
Недостатки:
- Браузеры Internet Explorer вплоть до 7го не поддерживают данный способ внедрения.
Рубрики: HTML/CSS
27.10.2012 19:49
Comment (RSS) | Обратная ссылка