Какие браузеры поддерживают data:url ?

deadrash · January 7, 2011

Никак не гуглится.

...в настоящее время поддерживается браузерами Mozilla (и его производными типа Firefox), Opera, Safari и Konqueror. Internet Explorer версии 7 не поддерживает

ещё на каком-то левом сайте говорят

Opera 7.2+, Firefox, Safari, Netscape и Mozilla поддерживают data:URI, Internet Explorer 5-7 - решительно нет.

Только вот непонятно, начиная с каких версий, какой браузер поддерживает data:utl, например Mozilla с версии 2.0?

Shift-Web · January 7, 2011

Все современные тянут. У Осла ограничение не больше 32кб на картинку

Vlad · January 7, 2011

https://developer.mozilla.org/en/data_URIs

Здесь написано следующее:

Поддерживается Opera 7.20, Safari и Konqueror. Internet Explorer 7 и ниже не поддерживает. Internet Explorer 8 и выше поддерживает только для изображений в CSS.

Firefox тоже поддерживает, но не нашел с какой версии.

Shift-Web · January 7, 2011

http://webo.in/articles/all/data-url-ie/

deadrash · January 7, 2011

Спасибо! Получается Opera 7.2, Malizilla 2.0 и IE 8 поддерживают, пока для них и воткну. Остальной зоопарк буду вручную потихоньку тестировать.

psywalker · January 8, 2011

Ребят, не хочется создавать новую тему, просто давно интересовали одни вопросы по сабжу как раз.

1. Зачем вообще нужны эти data:url ?

2. Какие они имеют преимущества перед обычными картинками или фонами css?

3. Трудны ли они в использовании, подключении и т.д., что вообще для этого нужно?

4. Какие браузеры их всё же поддерживают?

5. Если есть у кого, или если не сложно сделать отдельную страницу чисто с примером этого data:url, буду очень признателен.

arez · January 8, 2011

1-4

http://ru.wikipedia.org/wiki/Data:_URL

5

http://www-archive.mozilla.org/quality/net.../datatests.html

От себя: выгодно использовать когда много запросов на ваш ресурс и другие инструменты оптимизации уже исчерпаны. Яндекс например свой лого так грузит на http://ya.ru/

Shift-Web · January 8, 2011

Школоте потом рипать трудно

deadrash · January 8, 2011

1. Большое количество запросов к серверу тормозят загрузку, с помощью дата:урл можно свести все картинко-запросы в 1 запрос.

2. Перед обычними картинками никаких приемуществ, даже наоборот, в виде дата:урл картинки весят больше. Зато если вы занимаетесь оптимизицией например через спрайты(склеивание нескольких картинок в одну) то наверняка знаете что далеко не все картинки можно склеить. А с помощью дата:урл можно клеить их без ограничений.

3. При помощи php очень просто, функция base64_encode() переводит картинку в 64битный формат. Вот пример скрипта который я для этого написал, (я только учусь программить на php) так что лучше перечитайте и переделайте =)))

Функция узнаёт браузер поддерживающий data:url (ФУНКЦИЮ ТОЛЬКО НАЧАЛ ПИСАТЬ) она пока определяет поддержку только для IE7+ Opera7.2+ FF2+ Chrooome

//——————————————————————-
// Функция определения браузера по данным поля User-Agent
//——————————————————————-
function getUserAgent()
{
	// Получить переменную окружения
	$str=getenv('HTTP_USER_AGENT');
	$result = 'NO';
	// Попытаться определить известные браузеры по сигнатурам
	if (eregi("Chrome/([0-9a-z\.]*)",$str,$pocket)) {// "Google Chrome " $pocket[1];
		$result = 'OK';
	}
	elseif (eregi("Opera[/ ]([0-9a-z\.]*)",$str,$pocket)) {// "Opera "
		if($pocket[1] >= "7.2") $result = 'OK';
	}
	elseif (eregi("MSIE ([0-9a-z\.]*)",$str,$pocket)) {// "Internet Explorer "
		if($pocket[1] > "7") $result = 'OK';
	}
	elseif (eregi("(SeaMonkey|Firefox|GranParadiso|Minefield|Namoroka|" . "Shiretoko)/([0-9a-z\.]*)", $str, $pocket)) {// "Mozilla ".$pocket[1] . " "
		if($pocket[2] >= "2.0") $result = 'OK';
	}
	elseif (eregi("rv:([0-9a-z\.]*)",$str,$pocket) && strpos($str,"Mozilla/",0)!==false) {// "Mozilla "
		if($pocket[1] > "1") $result = 'OK';
	}
	elseif (eregi("(NetFront|K-Meleon|Netscape|Galeon|Epiphany|Konqueror|" . "Safari|Opera Mini)/([0-9a-z\.]*)",$str,$pocket)) {
		// $pocket[1]." "
		//$pocket[2];
	}
	elseif (eregi("Orca/([ 0-9a-z\.]*)",$str,$pocket)) {// "Orca Browser "
		//$pocket[1];
	}
	elseif (strpos($str,"Acoo Browser",0)!==false) {// "Acoo Browser";
	}
	elseif (eregi("Iron/([0-9a-z\.]*)",$str,$pocket)) {
		// "SRWare Iron ".$pocket[1];
	}
	elseif (eregi("(Maxthon|NetCaptor)( [0-9a-z\.]*)?",$str,$pocket)) {
		// $pocket[1]
		//$pocket[2];
	}
	elseif (strpos($str,"MyIE2",0)!==false) {// "MyIE2";
	}
	elseif (eregi("Lynx/([0-9a-z\.]*)",$str,$pocket)) {// "Lynx "
		//$pocket[1];
	}
	elseif (strpos($str,"Avant Browser",0)!==false) {// "Avant Browser";
	}
	else {// Это какой-то неизвестный браузер
		$result = 'NO';
	}
	return $result;
}

$support_data_url = getUserAgent();

Функция перевода изображения в дата:урл (все картинки должны быть от корня сайта)

function dataUrl($url)
{
	global $support_data_url;
	if($support_data_url === 'OK')
	{
		$filetype = strtolower(substr($url, strpos($url, ".") + 1));
		$patch = $_SERVER['DOCUMENT_ROOT'] . $url;
		$code = base64_encode(file_get_contents($patch));
		print 'data:image/' . $filetype . ';base64,' . $code;
	}
	else
	{
		print $url;
	}
}

Теперь для картинок маленького размера, в CSS файле я пишу:

background-image:url("<?php dataUrl('/sys/img/back/ramki/orange/gorizantal.png') ?>");

Всё остальное скрипт делает сам.

4. Загвоздка в оснавном в IE <= 7

5. http://webo.in/articles/habrahabr/64-css-to-post-load/ посмотри параграф "примеры загрузки".

Есть и подводные камни. Самый главный заключается в том что цсс файл становиться очень весомым, а это очень плохо по многим причинам. По этому data:url имеет смысл использовать ТОЛЬКО в с применением пос- загрузки дополнительного CSS файла с этими самыми картинками, как описано в этой статье http://webo.in/articles/habrahabr/64-css-to-post-load/

p.s. Эти скрипты должны работать в самом CSS файле, для этого на серве в файле .thaccess нужно указать что цсс файл нужно обрабатывать php интерпритатором, делается это строчкой AddType application/x-httpd-php .php .html .css

Если стили не применяются возможно кодировка не подходит. Её можно указать в начале CSS файла строчкой <?php header('Content-Type: text/css; charset=utf-8'); ?>

Edited January 8, 2011 by deadrash

Shift-Web · January 8, 2011

Всё верно ... Поэкспериментировал и решил, что смысла нет по сути. Спрайты -- это геморой, перегонка в дата урл напрягает трафик но минимизирует DNS преобразования .. Как бы палка о двух концах.

Интернеты растут, скорости увеличиваются. Проку нет. Это как извраты на канвасах.

Edited January 8, 2011 by Shift-Web

deadrash · January 8, 2011

Интернеты растут, скорости увеличиваются. Проку нет. Это как извраты на канвасах.

Дело не в скорости интернета, у вас может быть 1000МБ спутниковая прямая связь до сервера, но сайт всё равно будет долго грузиться если в нём большое количество(больше 100) файлов (даже если они весят по 1кб) по той просто причине что однавременно может передаваться толкько ~6 файлов.

Хотя есть техника нескольких серверов для отдачи одного сайта, но как это реализовать я ещё не понял =)

p.s. Как в моём понимании происходит загрузка файлов с сервера:

Например пинг до сервера у нас 40ms, а одновременная загрузка возможна только для 6-ти файлов.

Диалог серверов:

привет> 40ms

<привет 40ms

запрос> 40ms

<передача фалов 40ms

запрос> 40ms

<передача файлов 40ms

запрос> 40ms

<передача файлов 40ms

представь что файлов штук 300 ...

Edited January 8, 2011 by deadrash

rash · January 8, 2011

Всё верно ... Поэкспериментировал и решил, что смысла нет по сути. Спрайты -- это геморой, перегонка в дата урл напрягает трафик но минимизирует DNS преобразования .. Как бы палка о двух концах.
Интернеты растут, скорости увеличиваются. Проку нет. Это как извраты на канвасах.

Если на вашем сайте 3 калеки в базарный день — то проку нет. За всех не говорите <_<

Shift-Web · January 8, 2011

Если на вашем сайте 3 калеки в базарный день — то проку нет. За всех не говорите

Время покажет Да и не так много вы видели.

rash · January 8, 2011

Время покажет Да и не так много вы видели.

В смысле — не так много я видел?

Я сужу не по вашему сайту или вашим проектам (я вообще их не видел), а по тому, что такие оптимизации вы считаете излишними. Значит нагрузки еще не требуют таких оптимизаций, только и всего.

Shift-Web · January 8, 2011

В смысле — не так много я видел?
Я сужу не по вашему сайту или вашим проектам (я вообще их не видел), а по тому, что такие оптимизации вы считаете излишними. Значит нагрузки еще не требуют таких оптимизаций, только и всего.

Да нет ))) Чтобы что-то воткнуть на серьёзный проект сначала это что-то нужно потестить на чем-то менее серьёзном(ну это я так считаю), не ограничиваясь локалкой. Вот поэтому и делаю выводы. Если графики мало, то это экономия на спичках. Трафик то больше

psywalker · January 9, 2011

1. Большое количество запросов к серверу тормозят загрузку, с помощью дата:урл можно свести все картинко-запросы в 1 запрос.
2. Перед обычними картинками никаких приемуществ, даже наоборот, в виде дата:урл картинки весят больше. Зато если вы занимаетесь оптимизицией например через спрайты(склеивание нескольких картинок в одну) то наверняка знаете что далеко не все картинки можно склеить. А с помощью дата:урл можно клеить их без ограничений.
3. При помощи php очень просто, функция base64_encode() переводит картинку в 64битный формат. Вот пример скрипта который я для этого написал, (я только учусь программить на php) так что лучше перечитайте и переделайте =)))
Функция узнаёт браузер поддерживающий data:url (ФУНКЦИЮ ТОЛЬКО НАЧАЛ ПИСАТЬ) она пока определяет поддержку только для IE7+ Opera7.2+ FF2+ Chrooome
//——————————————————————-
// Функция определения браузера по данным поля User-Agent
//——————————————————————-
function getUserAgent()
{
	// Получить переменную окружения
	$str=getenv('HTTP_USER_AGENT');
	$result = 'NO';
	// Попытаться определить известные браузеры по сигнатурам
	if (eregi("Chrome/([0-9a-z\.]*)",$str,$pocket)) {// "Google Chrome " $pocket[1];
		$result = 'OK';
	}
	elseif (eregi("Opera[/ ]([0-9a-z\.]*)",$str,$pocket)) {// "Opera "
		if($pocket[1] >= "7.2") $result = 'OK';
	}
	elseif (eregi("MSIE ([0-9a-z\.]*)",$str,$pocket)) {// "Internet Explorer "
		if($pocket[1] > "7") $result = 'OK';
	}
	elseif (eregi("(SeaMonkey|Firefox|GranParadiso|Minefield|Namoroka|" . "Shiretoko)/([0-9a-z\.]*)", $str, $pocket)) {// "Mozilla ".$pocket[1] . " "
		if($pocket[2] >= "2.0") $result = 'OK';
	}
	elseif (eregi("rv:([0-9a-z\.]*)",$str,$pocket) && strpos($str,"Mozilla/",0)!==false) {// "Mozilla "
		if($pocket[1] > "1") $result = 'OK';
	}
	elseif (eregi("(NetFront|K-Meleon|Netscape|Galeon|Epiphany|Konqueror|" . "Safari|Opera Mini)/([0-9a-z\.]*)",$str,$pocket)) {
		// $pocket[1]." "
		//$pocket[2];
	}
	elseif (eregi("Orca/([ 0-9a-z\.]*)",$str,$pocket)) {// "Orca Browser "
		//$pocket[1];
	}
	elseif (strpos($str,"Acoo Browser",0)!==false) {// "Acoo Browser";
	}
	elseif (eregi("Iron/([0-9a-z\.]*)",$str,$pocket)) {
		// "SRWare Iron ".$pocket[1];
	}
	elseif (eregi("(Maxthon|NetCaptor)( [0-9a-z\.]*)?",$str,$pocket)) {
		// $pocket[1]
		//$pocket[2];
	}
	elseif (strpos($str,"MyIE2",0)!==false) {// "MyIE2";
	}
	elseif (eregi("Lynx/([0-9a-z\.]*)",$str,$pocket)) {// "Lynx "
		//$pocket[1];
	}
	elseif (strpos($str,"Avant Browser",0)!==false) {// "Avant Browser";
	}
	else {// Это какой-то неизвестный браузер
		$result = 'NO';
	}
	return $result;
}

$support_data_url = getUserAgent();
Функция перевода изображения в дата:урл (все картинки должны быть от корня сайта)
function dataUrl($url)
{
	global $support_data_url;
	if($support_data_url === 'OK')
	{
		$filetype = strtolower(substr($url, strpos($url, ".") + 1));
		$patch = $_SERVER['DOCUMENT_ROOT'] . $url;
		$code = base64_encode(file_get_contents($patch));
		print 'data:image/' . $filetype . ';base64,' . $code;
	}
	else
	{
		print $url;
	}
}
Теперь для картинок маленького размера, в CSS файле я пишу:
background-image:url("<?php dataUrl('/sys/img/back/ramki/orange/gorizantal.png') ?>");
Всё остальное скрипт делает сам.
4. Загвоздка в оснавном в IE <= 7
5. http://webo.in/articles/habrahabr/64-css-to-post-load/ посмотри параграф "примеры загрузки".
Есть и подводные камни. Самый главный заключается в том что цсс файл становиться очень весомым, а это очень плохо по многим причинам. По этому data:url имеет смысл использовать ТОЛЬКО в с применением пос- загрузки дополнительного CSS файла с этими самыми картинками, как описано в этой статье http://webo.in/articles/habrahabr/64-css-to-post-load/
p.s. Эти скрипты должны работать в самом CSS файле, для этого на серве в файле .thaccess нужно указать что цсс файл нужно обрабатывать php интерпритатором, делается это строчкой AddType application/x-httpd-php .php .html .css
Если стили не применяются возможно кодировка не подходит. Её можно указать в начале CSS файла строчкой <?php header('Content-Type: text/css; charset=utf-8'); ?>

Понял, спасиб за ответы. Короче я так понял, это гемор, ещё и с траблами и сама идея мне не понравилась. Заморочка в общем.

rash · January 9, 2011

Да нет ))) Чтобы что-то воткнуть на серьёзный проект сначала это что-то нужно потестить на чем-то менее серьёзном(ну это я так считаю), не ограничиваясь локалкой. Вот поэтому и делаю выводы. Если графики мало, то это экономия на спичках. Трафик то больше

Кеширование не для джедаев? <_<

Sign In

Какие браузеры поддерживают data:url ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information