Menu
The <img srcset... attribute allows different images to be shown to the user dependant on screen resolution.
Which browsers currently (Jan 2013) support this attribute?
Given that this is a useful attribute for users browsing on smartphones, additionally, which mobile browsers offer support?
281
srcset defines the set of images we will allow the browser to choose between, and what size each image is. Each set of image information is separated from the previous one by a comma.
The sizes attribute determines the media condition that applies to the current device width (the first media condition that applies is selected). Then, the browser checks the srcset attribute to find the image that most closely matches the slot size determined by the sizes attribute.
Using the srcset attribute has made responsive image sizing much simpler. It allows you to define a list of differently-sized versions of the same image, and provide information about the size of each one.
Yes it's valid. The src is used as a fallback if the browser doesn't support srcset. However if you are using it just for retina stuff you don't really need to use picturefill. I tend to just let it degrade back to the normal src if the browser doesn't support srcset.
Updated Feb 2014
There are various aspects to srcset, including pixel density and viewport width. At the time of writing:
I've put some test files and results on a Github repo which I'll try to keep current.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
