Larry Hudson

Writing about making websites

Using @11ty/image to serve optimised images with Eleventy

28 March 2021

Optimising images and serving them in modern formats can be a real headache when you’re making a website.

With my new website powered by headless WordPress, I thought this would be difficult. I would need to:

  • download images from the WordPress site
  • optimise them with an image compression library
  • change the image URL to the optimised URL from the build directory

But it turns out that Zach Leatherman, the creator of Eleventy, has already solved this problem! His package @11ty/image handles the process of downloading remote images, converting them to modern formats and generating the HTML to use in your template. It even has some nice caching features so it doesn’t download more than it needs to.

To use the @11ty/image package:

Zach also gave a great talk explaining how he solved this problem.

Replacing images from inside CMS content

It took me a bit more work to replace image URLs from headless WordPress content with optimised images. I had to use regex to find <img> ‘src’ attributes and replace the tags. You can see how I did this in the Git repo.