ZODIOS.net

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

09.8.2009  –  Рубрика: HTML&CSS

При отображении картинок и всех других внешних элементов на странице браузер пользователя делает запрос к серверу для получения этого элемента, используя схему 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