Recipe: Halve the size of images by optimising for high density displays

[zachleat]

https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

[Mantish]

I think this may be related to #129, as it could be done by having an option to manually set the img element width attribute. Like this:

async function imageShortcode(src, alt, sizes) {
  const metadata = await Image(src, {
    widths: [300, 600],
  });

  let imageAttributes = {
    alt,
    sizes,
    width: 300,
    loading: "lazy",
    decoding: "async",
  };

  return Image.generateHTML(metadata, imageAttributes);
}