4

Just like "srcset" for the html <img> tag, there is a CSS background-image property called "image-set".

W3C Info: https://drafts.csswg.org/css-images-3/#funcdef-image-set

It is currently compatible with Chrome, Safari, Opera, and Android Browser. Not currently compatible with FireFox or IE / Edge browsers. It appears to be in development for Microsoft's Edge browser as well. http://caniuse.com/#feat=css-image-set

Here is an example of the implementation / testing: cloudfour.com/examples/image-set/

It appears to only accept generic (x) resolutions, dpi, for normal vs retina screens.

<image-set-option> = [ <image> | <string> ] <resolution>

background-image: image-set( "foo.png" 1x,
                             "foo-2x.png" 2x,
                             "foo-print.png" 600dpi );

I can't find any documentation on this beyond this.

My questions is are:

Does anyone use this?

Can this be used to optimize for page loading speed (ex. different versions based on screen widths for 320px width, 640px width, 1024px width, etc)?

(I know about @media screen and (max-width), don't mention this please.)

Daniel Chase
  • 41
  • 2

1 Answers1

0

this is part of image optimization as browser will use the image which it needs rather than shrinking a big image and thus will improve page loading because lesser resolution image will be smaller in size and hence faster to load..

use picturefill to the fullest.. it's a great resource..

Dhaval Chheda
  • 4,637
  • 5
  • 24
  • 44
  • Dhaval, have you used "image-set" before? What are you meaning when you say picturefill? This https://scottjehl.github.io/picturefill/ a javascript library for the picture element? – Daniel Chase May 19 '16 at 17:02
  • yes I have used responsive images I have used scottjehl.github.io/picturefill for the same – Dhaval Chheda May 19 '16 at 17:05