Verwenden einer Bilddatei vs Daten-URI in der CSS

Question

Ich versuche zu entscheiden, die beste Möglichkeit, ein Bild, das für ein Skript, das ich geschrieben habe, erforderlich ist.

Ich entdecken this site und es machte mich zu versuchen, diese Methode zu denken, das Bild als data URI (definiert durch RFC 2397), da es so klein war, schließen - es Opazität 50% png-Datei (für einen Hintergrund verwendet) eine 1x1-Pixels ist - es endet bei 2.792 Bytes als Bild gegenüber 3.746 Bytes als Text im CSS.

Also würde dies als gute Praxis betrachtet werden, oder würde es nur unnötigerweise die CSS überladen?

Answer 1

Ich glaube nicht, dass Sie viel gewinnen ... und wenn es ein Dateibild ist, kann der Browser es zwischenspeichern. Ich würde es nicht mit CSS machen, es sei denn, du brauchst es wirklich.

Answer 2

Es gibt einen guten Grund, einen Daten-URI anstelle des Bildes zu verwenden.

Der Daten-URI ist Base 64-codiert, was bedeutet, dass es etwa 25% größer als das Bild ist. Allerdings kann Ihre CSS-Datei zwischengespeichert werden, so dass die kleine Vergrößerung wahrscheinlich kein großes Problem ist.

Wenn Sie viele Bilder haben, gibt es einen Overhead zum Nachschlagen, sowohl in Bezug auf die Namensauflösung als auch darauf, das Bild als eine andere Ressource zu erhalten.

All dies bedeutet, dass, wenn Bilder klein sind und die CSS-Datei immer noch klein ist und das CSS zwischen häufig betroffenen Seiten geteilt wird, die Leistung steigt, wenn Sie zu Daten-URIs wechseln.

Der Nachteil ist, dass sie nur in FX, Chrome usw. funktionieren. Die funktionieren teilweise im IE8, aber nur für kleine Bilder. Sie funktionieren überhaupt nicht in IE7 oder darunter.

Answer 3

Ich denke, es zu vernachlässigen ist jetzt .. (? Ein Bild, das klein ist)

Allerdings gibt es einige andere Dinge zu beachten:

1. Wird es die Möglichkeit von mehr Bilder in der Zukunft ?
2. Haben Sie Ihre CSS-Dateien gzip?

Grund dafür ist ..
Für jedes Bild in CSS geladen ist ein weniger Aufruf an den Server, die Zeit in Anspruch nimmt. Das wissen wir alle von Sprites. Selbst ein größeres Sprite, als alle Bilder kombiniert, ist vorzuziehen. Das bedeutet, dass jedes Bild, das hinzugefügt wird, eine weniger mögliche Verlangsamung ist, wenn Sie Daten verwenden: URI.

und für die zweite Frage .. Daten: URI ist SEHR gZip freundlich. Ich meine SEHR. Wir haben einige Legacy-CSS-Dateien, die riesig sind. 109 kb riesig .. und wenn wir Daten: URI das Bild, das bläst in satte 246 kb! Nach dem GZipping sind wir auf 126 kb runter.

Nicht zu vergessen .. Sprites sind nicht lustig zu pflegen, aber es gibt viel weniger Grund zu sprite, wenn Sie Daten verwenden: URI.

Hoffe, dass hilft.

PS. ein Link bezüglich Daten: URI. http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800

PS PS Prüfung der unten auf der Seite, mehr Nicolas über Daten zu sagen haben, um herauszufinden: URI

Answer 4

Using Data URIs bezieht sich auf Data URIs make CSS sprites obsolete und erweitert die Verwendung des CSSEmbed Werkzeugs durch einen Ant Erstellungsschritt der Schaffung . CSSEmbed "unterstützt auch einen MHTML-Modus, um IE6- und IE7-kompatible Stylesheets zu erstellen, die interne Bilder ähnlich wie Daten-URIs verwenden."

Beim Vergleichen von Bilddatei-Bytes mit base64-codierten Bytes, vergessen Sie nicht, dass jede HTTP-Bildanforderung/Antwort den Byte-Overhead der HTTP-Header hat. Dieses Beispiel, das gegen Yahoo geht, verbraucht ungefähr 900 Bytes (Ich habe den Proxy-Namen zu example.com geändert). Darüber hinaus ist die Domain yimg.com so optimiert, dass sie keine Cookies enthält und diese potenziellen Bytes speichert.

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

Wenn Daten URIs

Wenn anstelle eines Bildes Sprite verwendet nutzen, speichern Daten URIs eine HTTP-Anforderung und jedes Bisschen zählt. Sie sind jedoch noch nützlicher für Bilder, die nur schwer in Sprite-Sheets zu finden sind, beispielsweise benutzerdefinierte Listenpunkte, die unterschiedlich viel Leerzeichen benötigen.

Obwohl Daten-URIs eine hervorragende Möglichkeit darstellen, HTTP-Anfragen zu reduzieren, ist es nicht sinnvoll, sie in jeder Situation zu verwenden. Da sie die Raw-Dateidaten direkt in das Stylesheet einbetten, können Daten-URIs zu einem Stylesheet-Bloat führen, wenn sie nur schwer verwendet werden.

Im Folgenden finden Sie einige nützliche Links.

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

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