nhoizey / demo-11ty-netlify-cloudinary

A demonstration of responsive images in simple Markdown with Eleventy, Netlify and Cloudinary

demo-11ty-netlify-cloudinary

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

It uses:

• Eleventy as Static Site Generator, with my responsive images plugin eleventy-plugin-images-responsiver
• Cloudinary to resize and optimize images,
• and Netlify for building and hosting the site, and proxying requests to Cloudinary, as shown by Phil Hawksworth and Tim Kadlec.

After configuring the plugin, I "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"
/>