Eleventy: Markup statt Shortcode

Seit Juni 2022 nutze ich @11ty/eleventy-img für diesen Blog und habe es bisher immer nur brav aktualisiert, aber nie in die Doku geblickt. Mein Shortcode von damals, grob aus der damaligen Doku kopiert, hatte acht Argumente: Quelle, Alt, Klassen, Breiten, Formate, sizes.

async function imageshortcode(
	src,
	alt,
	className = undefined,
	imgClassName = undefined,
	widths = [400, 800, 1280],
	formats = ['webp', 'jpeg'],
	sizes = '100vw',
	includeOriginal = true
) {

Und baute daraus von Hand das passende <picture>/<source>-HTML zusammen:

const picture = `<picture ${pictureAttributes}>
	${sourceHtmlString}
	${imgHtmlString}
</picture>`;

Im Template sah der Aufruf dann so aus:

{% image "src/blog/bild.png", "Beschreibung", "", "" %}

Das aktuelle Plugin macht das überflüssig. Ein addPlugin, mehr ist nicht notwendig:

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
	widths: [400, 800, 1280],
	formats: ['webp', 'jpeg', 'svg'],
	svgShortCircuit: true
});

Beim Build transformiert das Plugin jedes <img> im Output automatisch, inklusive loading="lazy" und decoding="async". Meine Blog-Bilder wurden zu normalem Markdown, mit normalen relativen Pfaden:

![Prototype Chain](prototype-1.svg)

Den Shortcode samt Helfer habe ich gelöscht. Artikel zu schreiben oder mal ein Bild einzubauen wird wesentlich einfacher.

Beim Umstieg ist mir bei ein paar Bildern aufgefallen, was der alte Shortcode nebenbei falsch gemacht hat. Er rasterisierte auch SVGs. Aus drei Diagramm-SVGs in meinem Post zu Prototypen in JavaScript und TypeScript wurden zwölf PNG/WebP-Versionen. Mit svgShortCircuit: true werden SVGs jetzt unverändert durchgereicht, und bei diesen Bildern macht das den Unterschied zwischen 2,8 MB und 236 KB. Kein Effekt über die ganze Seite, aber weniger Daten, die Besucher laden müssen.

Wer nur alle <img>-Elemente im bestehenden Code automatisch optimieren will: Der Code oben reicht schon, ganz ohne Shortcode oder Umschreiben bestehender Templates. Details zu weiteren Optionen findet ihr in der Doku.