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.
This site is generated by Eleventy.
It uses eleventy-plugin-images-responsiver, a plugin for Eleventy, to generate responsive image syntax with
sizes attributes, so that loaded images are not too large (and heavy) for the area of the page they are supposed to fill.
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.
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:
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:
- it's much simpler to write,
- they show up in my Markdown editor,
- and they also show up on GitHub (exemple here).