Eleventy AVIF support

0 min reading time

What is Eleventy?

Among static site generators, Eleventy (aka 11ty) is gaining popularity. This Node-based builder is unique because it has a zero-config starting point, a purely static output, and the ability to achieve a top Lighthouse performance score.

Using JavaScript, Eleventy is a static site generator. It was created as a JavaScript replacement for Jekyll. By default, it's zero-configuration but can be configured according to your needs. Eleventy respects the directory structure of your project. Both during builds and in the browser, Eleventy is extremely fast. Compared to something like Gatsby, serving content does not require loading a JavaScript bundle client-side. In this case, server-side rendering is not even an issue since filesystem pages are created from static HTML. Since Eleventy isn't a JavaScript framework, it has no client-side boilerplate. Instead of chasing frameworks, Eleventy is thinking long-term. Your front-end stack is decoupled from the toolchain, code conventions, and modules you use.

Eleventy is unique in that it allows the user to select and mix up to ten different templating languages. These can be mixed or used individually. The mixing of languages can occur within the same file or between layouts. By combining languages, you can design a write-and-build workflow tailored to your needs and that of your project.

AVIF Support

Eleventy offers plugins that provide additional functionality. One such plugin is the Image Plugin, which is based on the node.js sharp image processing module. Image Plugin is a low-level tool for performing both vector and raster image transformations at build-time. It offers multiple output sizes and formats, as well as local caching of remote images.

A wide range of image formats is supported as inputs, including JPEG, PNG, WebP, GIF, TIFF, AVIF, and SVG. It outputs the same formats in multiple sizes while maintaining the original aspect ratio.

The plugin can be installed by running the following command:

1npm install --save-dev @11ty/eleventy-img

Shortcodes, filters, and async-friendly functions can benefit from this utility. AVIF images can be created in several ways. The user can either use the generateHTML function, create a component to produce an img tag output, or produce a picture tag output.

We recommend generateHTML since it is more maintainable and enables all necessary image optimizations. A code example is shown below that generates AVIF and WebP alternative images of different sizes.

1const Image = require("@11ty/eleventy-img");
2async function imageShortcode(src, alt, sizes) {
3let metadata = await Image(src, {
4widths: [360, 720, 1080, 1440],
5formats: ["avif", "webp", "jpeg"]
6});
7let imageAttributes = {
8alt, sizes, loading: "lazy", decoding: "async",
9};
10return Image.generateHTML(metadata, imageAttributes);
11}
12module.exports = function(eleventyConfig) {
13eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
14eleventyConfig.addLiquidShortcode("image", imageShortcode);
15eleventyConfig.addJavaScriptFunction("image", imageShortcode);
16}

You can then use this information in your templates. You will automatically generate the corresponding HTML based upon the Image options you specify. See the following example code:

1module.exports = function() {
2  return `<h1>${await this.image(
3    "./src/images/cat.jpg",
4    "photo of my cat",
5    "(min-width: 30em) 50vw, 100vw"
6  )}</h1>`;
7};

Summary

With its Image Plugin, Eleventy has amazing AVIF support out of the box. Plus, there is much more to the Image Plugin! Synchronous usage, custom filenames, in-memory cache, caching images remotely, etc. We strongly recommend you review the complete documentation on 11ty.dev.

Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.