DATA:URL – Картинки в документе без дополнительных запросов к серверу

При отображении картинок и всех других внешних элементов на странице браузер пользователя делает запрос к серверу для получения этого элемента, используя схему data:url можно избежать нескольких запросов к серверу.

Схема работы data:URL

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAKCAMAAADII105AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFdQTFRFrnsAqncA16QA39OvsowzyrBt3aoAto8z7NNvy5sQwI0A4Lk4z6g0x5QAwqht28Jv/8wA/9Ib1KEAupMz58ph//nC/9tB///d/+Vv7L0UzpsA//Cc+Pj4Zr1LNgAAAHRJREFUeNqU0FkKgDAMBNDRutXdaq3Wuf85jaL/6ZDCYyBQAkqqin+UhLypaaav1PJZcyG4r9USfYyb91uMPROIIVxvwsAEwrTdIelawwSCpd0ltpQf6wmu53LKrNLqCWLO6zqfn5PqCRbZSI5ZIa2etwADAF/7KlmRn64EAAAAAElFTkSuQmCC" alt="image"/>  

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

Аналогичным образом можно использовать вставку картинок в CSS:

 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAKCAMAAADII105AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFdQTFRFrnsAqncA16QA39OvsowzyrBt3aoAto8z7NNvy5sQwI0A4Lk4z6g0x5QAwqht28Jv/8wA/9Ib1KEAupMz58ph//nC/9tB///d/+Vv7L0UzpsA//Cc+Pj4Zr1LNgAAAHRJREFUeNqU0FkKgDAMBNDRutXdaq3Wuf85jaL/6ZDCYyBQAkqqin+UhLypaaav1PJZcyG4r9USfYyb91uMPROIIVxvwsAEwrTdIelawwSCpd0ltpQf6wmu53LKrNLqCWLO6zqfn5PqCRbZSI5ZIa2etwADAF/7KlmRn64EAAAAAElFTkSuQmCC) top left no-repeat;  

Вот пример реализации data:URL

Но эта схема не лишена недостатков:

1. Необходимо каждый раз пересчитывать base64 для картинки при ее изменение
2. Бразуры Internet Explorer 5-7 не поддерживают data:URL

Первый недостаток решается небольшой php строкой:

 <?php echo base64_encode(file_get_contents("stars.png")) ?>  

Второй не достаток можно решить путем передачи браузеру Internet Explorer дополнительного файла стилей, который будет экранирован от других браузеров условным комментарием.

Источник информации: websiteoptimization.com

Html-верстка полезные советы.