Welcome to this demo!

This is a demonstration of how to get an optimized performance with responsive images while letting content author writing simple Markdown.

Eleventy

This site is generated by Eleventy.

It uses eleventy-plugin-images-responsiver, a plugin for Eleventy, to generate responsive image syntax with srcset and sizes attributes, so that loaded images are not too large (and heavy) for the area of the page they are supposed to fill.

Cloudinary

The configuration of the plugin makes it generate multiple versions of the original images thanks to Cloudinary's Fetch API and URL based transformations.

Any other image resizing tool (SaaS or not) could be used with adapted configuration.

Netlify

The site is built and hosted by Netlify.

The source code is managed on GitHub, and any push to the main branch triggers a build and deploy on Netlify.

Netlify is also convenient here to proxy requests to Cloudinary, so that a single domain is "seen" by the browser, which is better for performance. Thanks Phil Hawksworth and Tim Kadlec for this nice trick! 👍

What's the point of all this?

After developers have configured the plugin, content authors "just" had to write this in the Markdown content:

![Eleventy](/images/eleventy.png){.logo}

To get this responsive image in the HTML:

<img
  src="https://demo-11ty-netlify-cloudinary.netlify.app/responsive/320/images/eleventy.png"
  alt="Eleventy"
  class="logo"
  srcset="
    https://demo-11ty-netlify-cloudinary.netlify.app/responsive/90/images/eleventy.png   90w,
    https://demo-11ty-netlify-cloudinary.netlify.app/responsive/168/images/eleventy.png 168w,
    https://demo-11ty-netlify-cloudinary.netlify.app/responsive/245/images/eleventy.png 245w,
    https://demo-11ty-netlify-cloudinary.netlify.app/responsive/323/images/eleventy.png 323w,
    https://demo-11ty-netlify-cloudinary.netlify.app/responsive/400/images/eleventy.png 400w
  "
  sizes="(min-width: 47rem) 10rem, (min-width: 30rem) calc((90vw - 1rem) / 4), calc((90vw - 1rem) / 2)"
  data-pristine="https://demo-11ty-netlify-cloudinary.netlify.app/images/eleventy.png"
  loading="lazy"
  width="480"
  height="400"
/>

Ok, here I am both the developer and the content writer… 😅

But even if I'm a developer, I like to use plain simple Markdown for images, so that: