For a logo on a website the following image tag is used:

<img src="images/logo.png" srcset="images/logo2.png 2x"/>

It won't work for me on mobile safari on iOS7 iPhone and iPad mini retina, although multiple articles suggest it would work on Webkit and in mobile safari:

• Improved support for high-resolution displays with the srcset image attribute
• WebKit Has Implemented srcset, And It’s A Good Thing
• High DPI Images for Variable Pixel Densities

I tried to check for srcset with JavaScript, to no avail, but did get a confirming false alert:

function isSrcsetImplemented() {
  var img = new Image();
  alert('srcset' in img);
}

isSrcsetImplemented();

Why doesn't it work for me? Did they take it out of Webkit in favor of an alternative?

For a logo on a website the following image tag is used:

<img src="images/logo.png" srcset="images/logo2.png 2x"/>

It won't work for me on mobile safari on iOS7 iPhone and iPad mini retina, although multiple articles suggest it would work on Webkit and in mobile safari:

• Improved support for high-resolution displays with the srcset image attribute
• WebKit Has Implemented srcset, And It’s A Good Thing
• High DPI Images for Variable Pixel Densities

I tried to check for srcset with JavaScript, to no avail, but did get a confirming false alert:

function isSrcsetImplemented() {
  var img = new Image();
  alert('srcset' in img);
}

isSrcsetImplemented();

Why doesn't it work for me? Did they take it out of Webkit in favor of an alternative?

• javascript
• css
• html
• safari

• right now it's at about 36% global penetration according to caniuse./#feat=srcset, but that's misleading since that's basically Chrome right now which is mostly desktop. fortunately iOS users update fast and given another month or two and iOS8 this number should dramatically increase – Simon_Weaver Commented Aug 1, 2014 at 3:30

1 Answer 1

Update: 9/14/14

Supported now in iOS8 which was released to the public today, so expect very good penetration soon.

There is no support in Safari yet, mobile or desktop.

Although it was announced for webkit months ago it's only just been introduced in Chrome (desktop) as of Feb 2014. It's actually in the next public release (v34) which is the current beta as of 4/6/14. So by the time most people read this it should be available for testing on the destktop Chrome.

My current strategy/remendation is to do this:

<img src="images/high.png" 
     srcset="images/low.png 1x,images/high.png 2x" width="100" height="100"/>

where

 high.png = 200x200
 low.png = 100x100

This will give retina graphics immediately on all mobile and desktops, scaled down by the browser for lower resolution screens.

When mobile safari introduces srcset then non-retina ipads can will revert to low.png automatically to save on bandwidth (who knows maybe Apple will even include a setting to only download low res images).

On desktop Chrome (v.34) and other browsers (eventually), the browser will essentially ignore src and you'll get high.png if you have a high res screen and low.png if you have standard resolution.

In addition even on 'regular' screens if your zoomlevel is above 1.0 (as you visit the page or refresh) then it will serve you the high.png file. This is a nice touch, and a good reason for using srcset over mediaqueries or javascript replacement techniques.

Advanced version (my actual real remendation for today):

This has an obvious problem in that as of today you'll be serving everyone with high res images - until srcset support has improved which may take a while.

So I chose the following server side promise, (given that my main consumer of high res images are retina iPads):

// server side(pseudocode)- (I made an ASP.NET MVC helper for this)
@if (Request.UserAgent.Contains("iPad"))) 
{

<img src="images/high.png" 
     srcset="images/low.png 1x,images/high.png 2x" width="100" height="100"/>

} 
else {

<img src="images/low.png" 
     srcset="images/low.png 1x,images/high.png 2x" width="100" height="100"/>

}

Anyone with srcset support will always get the appropriate version. Desktop users (except Chrome v34) will get standard resolution images. ALL iPads will unconditionally get high resolution images - until Apple updates Safari at which time non-retina iPads will get the low resolution version.

Fortunately the website I'm designing won't be released for a month or two, and I'm hoping Safari will be updated within a few more months making this a future-proofing gamble I'm willing to take.

Tip: for testing high.png and low.png just put two pletely different images for high.png and low.png - like a cat and a dog - then it'll be clear if it's working or not.