The benefits of using the responsive image approach versus the simple single image approach might seem overwhelming and hard to implement, but once getting into the specifics, it is not that hard.
According to “Can I use?”, the srcset property is available for about half of the global
audience of the Internet. It is likely to increase, as soon the last major
desktop browser, namely Internet Explorer, implements it.
<img src="https://internet.uri" alt="Alternative text">Image candidate in the srcset should have the following structure according to the
specification:
- Zero or more space characters
- A valid non-empty URL that does not start or end with a
U+002C(COMMA) character (,), referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted - Zero or more space characters
- Zero or one of the following:
- A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a
U+0077(LATIN SMALL LETTER W) character - A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero representing the pixel density descriptor value, and a
U+0078(LATIN SMALL LETTER X) character
- A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a
Several image candidates are separated by the U+002C (COMMA) character (,).
That can be translated as the following valid examples, but please note that the src and
alt properties should be present in order to make these valid img markup:
<img srcset="image-wide1500px.png 1500w">
<img srcset="image-density2x.png 2x">
<img srcset="image-wide1500px.png 1500w,image-density2x.png 2x">
<img srcset=" image-wide1500px.png 1500w , image-density2x.png 2x ">For the maximum efficiency, the order of the images in srcset matters. Also the src
value should be listed in the srcset, which should be the smallest image defined. This
way the browser can understand the context for the default src, if supported.
This would result the following example:
<img src="image-tiny.jpg" srcset="image-tiny.png 320w, image-small.jpg 680w,
image-mid.jpg 1024w, image-large 1680w" alt="Internet has images" />Now that the images are in place, the implementation would be ready, in case the given
image was to be shown always at 100% of the viewport width. This is not always the case,
hence another property, called sizes is needed.
The sizes property is used to list the different perceived widths of the given image in
relation to the viewport width or as static pixels or ems. It defaults to 100% of the
viewport width.
The example below would have half of the screen filled with the image as long as the
screen is bigger than 50em. Smaller screen would have the image shown at 75%.
<img src="image-tiny.jpg" srcset="image-tiny.png 320w, image-small.jpg 680w,
image-mid.jpg 1024w, image-large 1680w" alt="Internet has images"
sizes="(max-width: 50em) 75vw, 50vw"/>The presentation I had this morning demonstrates parts of this approach and I suggest you to watch the talk “Responsive images are coming to a browser near you” by Yoav Weiss at VelocityConf 2014.
Also for further analysis of the use cases and usefulness, please head over to “Srcset and sizes”.
Finally it should be noted that similar functionality is being developed for CSS,
called image-set(), which seems to be available for some time in Chrome and Safari,
although behind the --webkit- prefix.