Image Transform

@11ty/eleventy-img is already required by Baseline; you can reinstall to ensure it’s present:

npm install @11ty/eleventy-img

npm install @11ty/eleventy-img

Enable the HTML transform in eleventy.config.js.

import baseline, { config as baselineConfig } from './_baseline/eleventy.config.js';

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

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(baseline());
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		urlPath: '/media/',
		outputDir: './dist/media/',
		formats: ['avif', 'webp', 'jpeg'],
		widths: [320, 640, 960, 1280],
		filenameFormat(id, src, width, format) {
			const extension = path.extname(src);
			const name = path.basename(src, extension);
			return `${name}-${width}w.${format}`;
		}
	});
}

export const config = baselineConfig;

Write plain <img> in content.

The transform rewrites <img> to <picture> (with sources) at build time. Keep alt on every image. Example in Markdown:

## Image Transform Plugin

<figure>
  <img src="/media/mountains.jpg" alt="Mountains at sunset" loading="lazy">
  <figcaption>
    Example image rendered responsively with the Eleventy Image Transform plugin.
  </figcaption>
</figure>

Handle remote images and caching.

Remote src values are fetched and cached on disk. Ensure the build environment can reach them. Cache defaults come from the plugin; adjust if you need a different cache dir.

Build and verify.

• Dev: npx rimraf dist/ && npm run dev
• Build: npx rimraf dist/ && npm run build
• Inspect rendered HTML: you should see <picture> with multiple <source> tags and <img> including width/height.
• Check generated files under dist/media/.