{% respimg %}
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:
srcset
and sizes
, they’ll deliver variable-resolution images, which respond to variable layout widths and screen densities.f_auto
, they’ll deliver variable-format images, which adapt based on both browser support and image content.q_auto
, they’ll deliver variable-quality images, which:
Save-Data
header.The plugin is available on npm.
npm install eleventy-plugin-respimg
After npm install
ing, open up your Eleventy config file (probably .eleventy.js
) and
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.
srcset
breakpoints to the intrinsic width of the original (don’t let Cloudinary upscale)src
pathsfetch
images that are already in your Cloudinary media librarysrcset
breakpoints, using Cloudinary’s automatic responsive image breakpoint featuressizes
‽ (probably using Puppeteer and @ausi’s logic?)