srcset is an HTML <img> tag extension, an implementation of responsive images.
A useful article on flavours: Responsive Images Done Right: A Guide To And srcset
simple pixel density approach
<img srcset="image_standard.jpg 1x, imaget_dense.jpg 2x" src="image_standard.jpg" alt="An image" />
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
<img src="img-360x540.jpg" alt="img" srcset="img-240x360.jpg 360w, img-360x540.jpg 540w, img-653x980.jpg 980w, img-853x1280.jpg 1280w" sizes="(min-width: 960px) 50vw, 100vw" />
complex <picture> approach
The <picture> 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:
<picture> <source media="(min-width: 36em)" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="33.3vw" /> <source srcset="cropped-large.jpg 2x, cropped-small.jpg 1x" /> <img src="small.jpg" alt="A rad wolf" /> </picture>
( 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
- 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".
- Jeremy Keith uses srcset on adactio.com since ???
- Greg V 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).