eleventy-respimg
eleventy-respimg copied to clipboard
A responsive-image Eleventy shortcode, powered by Cloudinary
{% respimg %}
What does it do?
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
srcset
andsizes
, 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-Data
header.
Installation
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
- 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.
Example
Here’s a quick, actual example, that uses a couple of these in a couple of contexts.
TODO
- [ ] limit
srcset
breakpoints to the intrinsic width of the original (don’t let Cloudinary upscale) - [ ] allow relative
src
paths - [ ] don’t
fetch
images that are already in your Cloudinary media library - [ ] smarter
srcset
breakpoints, using Cloudinary’s automatic responsive image breakpoint features - [ ] automatic
sizes
‽ (probably using Puppeteer and @ausi’s logic?) - [ ] what should it do with animated Gifs?