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
Но эта схема не лишена недостатков:
- Необходимо каждый раз пересчитывать base64 для картинки при ее изменение
- Бразуры Internet Explorer 5-7 не поддерживают data:URL
Первый недостаток решается небольшой php строкой:
<?php echo base64_encode(file_get_contents("stars.png")) ?>
Второй не достаток можно решить путем передачи браузеру Internet Explorer дополнительного файла стилей, который будет экранирован от других браузеров условным комментарием. Необходимо раскрутить сайт в поисковых системах? Воспользуйтесь услугами студии, которая выполнит продвижение сайта в ТОП Гугла, Яндекса и других поисковых систем.
Источник информации: websiteoptimization.com
11 Отзывов to “DATA:URL – Картинки в документе без дополнительных запросов к серверу”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 11 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 24 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 1 отзыв)
Ноябрь 20, 2009 в 14:36
Очень интересно.
Вообще впервые про это слышу.
Январь 4, 2010 в 15:51
Круто!!! А как конретно из картинки сделать такой код???
Январь 4, 2010 в 15:59
Ааа… Всё, понял!!! Надо создать .php файлик с кодом и в папку с ним кинуть картинку, а потом просто вызвать этот .php файл!!! ))))))
Январь 30, 2010 в 17:39
шшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшшш
Февраль 4, 2010 в 13:43
Да, только эту штуку не поддерживает ie8 в висте и для него приходится что-то другое придумывать.
А ie6 и ie7 как раз поддерживают. Там просто немного по другому это выглядеть будет.
Апрель 1, 2010 в 19:01
Ну все равно запрос к серверу.. разве не без разници как, через БД или напрямую?
Апрель 14, 2010 в 9:00
нррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррппппппппппппппппппппппррррррррррррррррррр
щщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщщлллллллллллллллллллллллллллллллллллл
Май 2, 2010 в 17:35
помоему это всё бессмысленно!
ибо у некоторые юзеры пециально отключают изображения для экономии трафика!
вот представьте, скорость загрузки 5 кб/с, страница весит 500 кб с изображениями или 20кб без изображений….
иногда это напрягает….
Июнь 20, 2010 в 11:39
довольно редко data url действительно пригождается
всё-таки нет совсем поддержки нормальной в ie
Июль 25, 2010 в 23:12
ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля ля
Июль 25, 2010 в 23:13
Ну и смысл городить этот огород ?