The Srcset Attribute

It was recently announced that WebKit will now support the srcset attribute on image elements. The new attribute allows us to specify the @2x image version directly within the img tag (among other things). Browsers without the support for this feature will fallback to the src attribute and display the image with standard pixel density.

srcset not supported srcset supported
non-retina screen image.png image.png
retina screen image.png image@2x.png
<img src=”image.png” srcset=”image@2x.png 2x” />

We often use webviews, both on OS X and iOS. This change will make their usage a little bit easier. We won’t have to write any additional CSS every time we need an image. Instead of:

#image {
  background-image: url(image.png);
  background-image: -webkit-image-set(url(image@2x.png) 2x);
}

<div id=”image”></div>

we’ll use:

<img src=”image.png” srcset=”image@2x.png 2x” />

which is much simpler and cleaner.

The srcset attribute is currently only available in the nightly build of WebKit, but we hope that it will soon be available in the SDK.

NSURL Cheat Sheet
Bubble Browser’s Fisheye or How to Make a Dock-like Control for iOS