srcset

 srcset  is an HTML &lt;img&gt; tag extension, an implementation of responsive images.

How
A useful article on flavours: Responsive Images Done Right: A Guide To And srcset

simple pixel density approach
This implementation triggers the upgrade to a larger image when the device pixel ratio (the pixel density) is over 2x; therefore it's usually triggered on retina displays or on mobile phones with very large resolution.

simple image pixel size approach
In this implementation the image size closest (from smaller) to the viewport width in pixels will be used. The "sizes" part is an optional addition, a media query. In this very case it means that if the viewport resolution if below 960px, the picture is set to fill in the whole viewport (this is either triggered by CSS media queries, javascript, etc), so the image size should be decided based on this. In case the screen resolution is over 960px, the image will only occupy halt of the viewport (again triggered by something else, responsive design, javascript, etc. ) therefore this should be taken in count when the browser is selecting the image to display.

complex &lt;picture&gt; approach
The &lt;picture&gt; element allows the user to specify various sources for an image which can be combined with the simple approaches described above. This approach is mostly used when the displayed image is required to change according to the circumstances. For example: a header background image, that contains graphics which graphics should always be shown, therefore the image is cropped when certain resolution criteria are met.

The complexity can easily reach levels like this:

( The example is from the afromentioned article above ).

There are no known indieweb examples for this implementation yet.

Helpers and polyfills

 * picturefill.js for older browsers

IndieWeb Examples

 * User:Petermolnar.eu had been using srcset since the first draft, but the flavour changed during the times. Right now he's settled with the "simple image pixel size approach".


 * uses srcset on adactio.com since ???
 * uses the picture element on https://unrelenting.technology to show WebP images instead of JPEG on browsers that support WebP. Instead of multiple sizes there's only the big size, just more compressed (lower "quality" value).
 * . Example: https://jonnybarnes.uk/notes/GE
 * uses srcset on his homepage profile h-card and for note and article author h-cards since 2021-04-28.

Requests

 * microformats2: spec/parser support feature request
 * Bridgy: feature request (blocked on mf2 support)
 * Bridgy Fed: feature request (blocked on mf2 support)

Implementations

 * Wordpress has added native support for the srcset and sizes attribute with version 4.4 (December 8th 2015)