Geek Answers Handbook

Using image file and data URI in CSS

I am trying to decide how best to include the image that is required for the script I wrote.

I discovered this site , and it made me think that this method should include the image as a data URI (defined by RFC 2397 ), because it was so small - it is 1x1 pixel 50% opacity png file (used for background) - it ends in 2,792 bytes as an image versus 3,746 bytes as text in CSS.

So will this be considered good practice, or is it just redundant CSS?

+5
source share
5 answers

I do not think that you will get much ... and if it is an image of a file, the browser can cache it. I would not do this with CSS unless you have a real need.

+4
source

There is a good reason to use data URIs rather than images.

The data URI is encoded by base 64, which means that it is approximately 25% larger than the image. However, your CSS file may be cached, so expanding a small size is probably not a big problem.

If you have a lot of images, there is overhead for finding each of them, both in terms of name resolution, and to get the image as another resource.

, , CSS - , CSS , , URI .

, FX, Chrome .. IE8, . IE7 .

+20

, . ( )

, :

  • ?
  • 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

+4

URI URI CSS CSSEmbed, Ant. CSSEmbed " MHTML , IE6 IE7, , URI .

, , base64, , / HTTP- 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
+1

More articles:


All Articles