Картинки в теле страницы с помощью data:URL

24.02.2012

Встроенные (inline) изображения используют схему data:URI для внедрения прямо в тело веб-страницы.

Поддержка браузерами data:URL

Как и со многими «крутыми штуками» поддерживаются Opera, Firefox, Safari, Netscape и Mozilla, зато не поддерживаются Internet Explorer младше 8ой версии.

Схема data:URL

Синтаксис data:URL:

data:[<тип данных>][;base64],<данные>

В случае простых изображений вам нужно указать mime-тип для них (например, image/gif), за ним идет base64-представление бинарного файла с изображением. Ниже приведен пример (переводы строк добавлены, чтобы не разрывать страницу, на самом деле, их нет):

<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="иконка папки"/>

Для преобразования файла картинки в подходящий формат, можно воспользоваться PHP кодом:

echo base64_encode(file_get_contents("../images/folder16.gif"))

Использование в CSS

Встроенные (inline) изображения можно использовать как в HTML, так и в CSS.

При этом картинка помещенная в CSS будет кэшироваться браузером (в отличии от использования в теле самой страницы)

Пример:

Код - пример #1
1
2
3
4
5
6
7
8
9
10
 
P
{
    width        : 100%;
    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;
    border        : solid 1px red;
}

Проблемы data:URL

Кроме  проблем с поддержкой в старых версиях Internet Explorer, есть ограничения на размер (количество  символов) в data:URL - 1024 байт.

Также текстовое base64-представление данных занимает больше, чем бинарное изображение. Для решения этой проблемы можно воспользоваться gzip-сжатие CSS файла.

Категории: HTML, CSS
Яндекс.Метрика