0

I’m developing a webpage with Retina image support for the first time,

I’m using

   background: -webkit-image-set( url(images/myimage.png)    1x,
                           url(images/myimage_2x.png) 2x);

I’ve got Safari on Mac working like expected, and also Chrome on Windows works, but with Internet Explorer and Firefox on Windows no images are displayed.

I thought maybe adding background: url(images/myimage.png) like:

 background: -webkit-image-set( url(images/myimage.png)    1x,
                           url(images/myimage_2x.png) 2x);
 background: url(images/myimage.png)

and using that as a fall back would be the right way to do it, while this now get images to show in Internet Explorer and Firefox I then lose my Retina version on Safari (it now only loads the standard resolution image).

If someone could please show me the right way how I provide retina support for Safari on Mac while providing a fall back for IE and FF browsers on Windows etc.

Any help would be great

TF35Lightning
  • 365
  • 3
  • 7
  • 22

1 Answers1

1

-webkit- is exclusive to Chrome and Safari (& Opera now). You've to supply vendor specific tags for css to pick up.

Coming ot your question, as of now image-set property is not available for IE or Firefox. You can see this Caniuse data.

Bikas
  • 2,709
  • 14
  • 32
  • Hi Bikas I just found that If I moved the standard background tag before the -webkit-image-set tag it works as I hoped! Standard image is loaded in Windows Firefox and IE and on Mac Safari I get the beautiful Retina image. background: url(images/myimage.png) background: -webkit-image-set( url(images/myimage.png) 1x, url(images/myimage_2x.png) 2x); – TF35Lightning Mar 16 '15 at 06:38
  • That's true because CSS overwrites the already defined property. But you'll not get retina on IE or FF as I said. – Bikas Mar 16 '15 at 06:40
  • no worries @Bikas, also with image-set and doing -webkit-image-set( url(images/myimage.png) 1x, url(images/myimage_2x.png) 2x); Is that downloading both versions of the image when I go to the url???, or does it only download the specific one? (I can see the image changes to the correct version when I simply move/drag the window from retina to non-retina or non-retina to retina etc) – TF35Lightning Mar 16 '15 at 06:54
  • Image-set always downloads the 1x version. When it finds the retina display, it downloads 2x version and replace the 1x version. So, on non-retina display only 1x is downloaded but on retina both images will be downloaded. – Bikas Mar 16 '15 at 06:58
  • ok @bikas, so I guess that is no different on mobile/retina retina screens then??? Where ideally only one image should be downloaded etc, I guess I could just set my ATmedia screen and (max-width: 480px) { css codes to download the standard background: url(images/myimage.png) instead of using -webkit-image-set there. Seems logical? – TF35Lightning Mar 16 '15 at 07:10
  • For me I rarely use retina as it's limited to few browser and is quite less scalable. And for modern browser `srcset` is better property to handle different image resolutions. You can see details here https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ – Bikas Mar 16 '15 at 07:13