Использование файла изображения против URI данных в CSS

Question

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

я обнаружил this site и это заставило меня думать о попытке этого метода, чтобы включить изображение в виде data URI (определяется RFC 2397), так как он был настолько мал - это 1x1 пиксели 50% непрозрачность PNG файл (используется для фона) - он заканчивается на 2,792 байта как изображение против 3,746 байт в виде текста в CSS.

Так будет ли это считаться хорошей практикой, или это просто лишний раз излишним CSS?

Answer 1

Я не думаю, что вы получите много ... и если это файл, браузер может его кешировать. Я бы не стал делать это с помощью CSS, если у вас нет реальной потребности в нем.

Answer 2

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

URI базы данных кодируется базой 64, что означает, что он примерно на 25% больше изображения. Однако ваш файл CSS может быть кэширован, поэтому увеличение небольшого размера, вероятно, не является большой проблемой.

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

Все это означает, что если изображения небольшие, а общий CSS-файл по-прежнему невелик, а CSS используется совместно с часто используемыми страницами, то вы можете повысить производительность, если переключитесь на URI данных.

Недостатком является то, что они работают только в FX, Chrome и т. Д. Частично работают в IE8, но только для небольших изображений. Они не работают в IE7 или ниже.

Answer 3

Я думаю, что сейчас это ничтожно .. (? Один образом, который маленький)

Однако, есть некоторые другие вещи, чтобы рассмотреть следующие вопросы:

1. Будет ли возможность генерации большего количества изображений в будущем ?
2. Вы gzip ваши файлы css?

Причина в том ..
Для каждого изображения, загруженного в CSS один меньше вызова к серверу, который занимает много времени. Мы все знаем, что из спрайтов. Предпочтительным является даже спрайт большего размера, чем все изображения в сочетании. Это означает, что каждое добавленное изображение является одним из менее возможных замедление, если вы используете данные: URI.

и для второго вопроса .. данные: URI ОЧЕНЬ gZip дружественный. Я имею в виду ОЧЕНЬ. У нас есть некоторые устаревшие файлы css, которые огромны. 109 kb огромный .. и когда мы данные: URI изображение, которое раздувается в колоссальные 246 kb! После gZipping мы доходим до 126 кб.

Не говоря уже о том, что спрайты не очень удобны в обслуживании, но есть гораздо меньше причин справляться, если вы используете данные: URI.

Надеюсь, что это поможет.

PS. ссылка на данные: URI. http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800

PS PS проверка в нижней части этой страницы, чтобы узнать больше Николас должен сказать о данных: URI

Answer 4

Using Data URIs относится к Data URIs make CSS sprites obsolete и расширяет использование CSSEmbed инструмента путем создания Ant шаг сборки , CSSEmbed "также поддерживает режим MHTML для создания таблиц стилей, совместимых с IE6 и IE7, которые используют внутренние изображения, похожие на URI данных."

Кроме того, при сравнении байтов файлов изображений с байтами с кодировкой base64 не забывайте, что каждый запрос/ответ на изображение с URL-адресом имеет служебные данные байтов заголовков http. В этом примере против Yahoo потребляется около 900 байт (я изменил имя прокси на example.com). Кроме того, домен yimg.com оптимизирован, чтобы не иметь куки-файлов и сохранять эти потенциальные байты.

GET http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png HTTP/1.1 
Accept: */* 
Referer: http://www.yahoo.com/ 
Accept-Language: en-US 
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E) 
Accept-Encoding: gzip, deflate 
Host: l.yimg.com 
Proxy-Connection: Keep-Alive 

HTTP/1.0 200 OK 
Date: Sat, 31 Jul 2010 22:27:25 GMT 
Cache-Control: max-age=315360000 
Expires: Tue, 28 Jul 2020 22:27:25 GMT 
Last-Modified: Wed, 16 Jun 2010 18:06:49 GMT 
Accept-Ranges: bytes 
Content-Length: 1750 
Content-Type: image/png 
Age: 321472 
Server: YTS/1.17.23.1 
X-Cache: MISS from a-proxy-server.example.com 
Via: 1.0 a-proxy-server.example.com:80 (squid/2.6.STABLE22) 
Proxy-Connection: keep-alive 

Answer 5

Когда использовать данные идентификаторы URI

При использовании вместо спрайтов изображения, URIs сохранения данных одного запроса HTTP, и каждый маленький бит подсчитывает. Однако они еще более полезны для изображений, которые трудно включить в листы спрайтов, например шаблоны настраиваемых списков, которым требуется различное количество пробелов.

Хотя URI данных - отличный способ уменьшить HTTP-запросы, нет смысла использовать их в каждой ситуации. Поскольку они вставляют исходные данные файла непосредственно в таблицу стилей, URI данных могут приводить к раздуванию таблиц стилей, если они используются тяжело.

Ниже приведены некоторые полезные ссылки.

http://jonraasch.com/blog/css-data-uris-in-all-browsers

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/