Martin Schneider

Using the Eleventy Image Plugin to Generate Images


In the changelog I’m documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work.

When I initially build the homepage of this website, I generated the used image sizes by hand and converted them to WebP with an online image converter. That was a bit of pain, but since I needed to do it only once I did not want to spend the time to automate it.

The image sizes and file formats for images in the articles are generated while uploading them to the WordPress backend. With the rising support of the AVIF image format and the wish to output the images in different sizes, it was time to begin bring the image generation to the build process of the site. Fortunately, there’s the eleventy-img plugin, a utility that wraps around the sharp image processor to generate image sizes and formats.

I played around with the plugin on some evenings until I build a shortcode that fits my needs and I’m pretty happy with it. Image generation is pretty fast and modern browsers like Chrome (and soon Firefox) now deliver the much smaller files. Since I have just been building a similar functionality for my WordPress blog in PHP with Cloudinary as backend, I am really happy to benefit from Zachs work and did not have to implement all on my own.

The next step is downloading and processing the images in the articles while building the site. That shouldn’t be too complicated once I decided how to mark the images in the API output.

If you’re interested in my solution, have a look at the commits in my repository on Github or check out the final version of the function.

Related commits:

0 Reactions

Loading Webmentions...

Other articles I've written recently