It turns config like this:
eleventyConfig.cloudinaryCloudName = 'your-cloud-name-here';
eleventyConfig.srcsetWidths = [ 320, 640, 960, 1280, 1600, 1920, 2240, 2560 ];
eleventyConfig.fallbackWidth = 640;and shortcodes like this:
{% respimg
"https://cool.img/here.jpg",
"A cool image",
"(min-width: 48em) 48em, 100vw"
%}into responsive <img> tags, like this:
<img
srcset="
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_320/https://cool.img/here.jpg 320w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_640/https://cool.img/here.jpg 640w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_960/https://cool.img/here.jpg 960w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_1280/https://cool.img/here.jpg 1280w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_1600/https://cool.img/here.jpg 1600w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_1920/https://cool.img/here.jpg 1920w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_2240/https://cool.img/here.jpg 2240w,
https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_2560/https://cool.img/here.jpg 2560w"
sizes="(min-width: 48em) 48em, 100vw"
src="https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_640/https://cool.img/here.jpg"
alt="A cool image"
/>The resulting <img>s are “responsive” in the following ways:
- Using
srcsetandsizes, they’ll deliver variable-resolution images, which respond to variable layout widths and screen densities. - Using
f_auto, they’ll deliver variable-format images, which adapt based on both browser support and image content. - Using
q_auto, they’ll deliver variable-quality images, which:- strike a consistent balance between perceived quality and file-size
- respond to user preferences, dialing quality and file size way down in the presence of the
Save-Dataheader.
The plugin is available on npm.
npm install eleventy-plugin-respimg
After npm installing, open up your Eleventy config file (probably .eleventy.js) and
- require it
- set the mandatory config parameters, and
- use
addPlugin.
// ①
const pluginRespimg = require( "eleventy-plugin-respimg" );
module.exports = function( eleventyConfig ) {
// ②
eleventyConfig.cloudinaryCloudName = 'your-cloud-name-here';
eleventyConfig.srcsetWidths = [ 320, 640, 960, 1280, 1600, 1920, 2240, 2560 ];
eleventyConfig.fallbackWidth = 640;
// ③
eleventyConfig.addPlugin( pluginRespimg );
};
Also! Make sure that the domains where you’ll be hosting your originals are whitelisted in your Cloudinary settings, under “Security » Allowed fetch domains”. Alternatively, leave the field blank, and Cloudinary will happily fetch from any domain.
Here’s a quick, actual example, that uses a couple of these in a couple of contexts.
- limit
srcsetbreakpoints to the intrinsic width of the original (don’t let Cloudinary upscale) - allow relative
srcpaths - don’t
fetchimages that are already in your Cloudinary media library - smarter
srcsetbreakpoints, using Cloudinary’s automatic responsive image breakpoint features - automatic
sizes‽ (probably using Puppeteer and @ausi’s logic?) - what should it do with animated Gifs?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
