Lesson 20: Setting up images

At the moment, Eleventy handles our images with passthrough copy. This is fine, really, because I’ve already optimized the images for us in the starter files. It’s a good idea, however, to let Eleventy improve things for us.

In this last lesson of the module, we’re going to relieve passthrough copy of its duty and task Eleventy's Image plugin with processing and optimizing our images for us.

Adding the Image plugin

We’re using the official Eleventy Image plugin, @11ty/eleventy-img. Specifically, the Image plugin's HTML transform setup which post-processes the <img> and <picture> tags in our HTML.

Import the plugin in your eleventy.config.js file by adding the following line at the top:

import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';

Next, add the plugin in the main config function body, below the other plugins:

eleventyConfig.addPlugin(eleventyImageTransformPlugin);

While we're here, let's remove our old line for passthrough copying the images.

- eleventyConfig.addPassthroughCopy('src/images');

Lastly, let’s install our dependency. Open up your terminal in eleventy-from-scratch and run the following command:

npm install @11ty/eleventy-img@v6

Job done! If you now run npm start in your terminal, everything should be working fine.

Wrapping up

That’s it for the asset pipeline. Hopefully, you can see now how to add further asset processing right in Eleventy's pipeline.

We’re now moving into the final module of this course, “Front-End Build”. It’s time to get our CSS on, and I’m very excited to teach you how I like to build websites with CSS!