srcset

This article is a stub. You can help the IndieWeb wiki by expanding it.

srcset is an HTML <img> 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

<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"
/>

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 <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

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".

Jeremy Keith uses srcset on adactio.com since ???
unrelentingtech 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).
Jonny Barnes. Example: https://jonnybarnes.uk/notes/GE
Barnaby Walters uses srcset on his homepage profile h-card and for note and article author h-cards since 2021-04-28.