Image Workflow

<h1>Image Workflow</h1> <p>This project uses the Eleventy Image utility (<code>@11ty/eleventy-img</code>) through a global <code>image</code> Nunjucks shortcode to generate responsive <code><picture></code> markup with AVIF, WebP, and raster fallbacks.</p> <h2>Source Assets</h2> <ul> <li>Place source files in the root <a href="../images"><code>images/</code></a> directory. Assets in this folder are kept in version control and are also copied to the output for legacy references (e.g., favicons and the web manifest).</li> <li>When adding a new asset, prefer the highest-quality original you have. The shortcode will create appropriately sized derivatives at build time.</li> </ul> <h2>Using the <code>image</code> shortcode</h2> <pre><code>{% image "/images/example.jpg", "Descriptive alt text", { widths: [400, 800, 1200], sizes: "(min-width: 900px) 50vw, 100vw", class: "example-class", formats: ["avif", "webp", "jpeg"], width: 400, height: 250 } %} </code></pre> <p>Key options:</p> <ul> <li><code>src</code> — Root-relative path to the source asset. Remote URLs are also supported.</li> <li><code>alt</code> — Required alt text (pass an empty string for decorative images).</li> <li><code>widths</code> — Array of target widths. Use smaller values for icons (e.g., <code>[40, 80]</code>) or <code>"auto"</code> to keep the original width. Defaults to <code>[320, 640, 960, 1280, 1600]</code>.</li> <li><code>sizes</code> — The <code>sizes</code> attribute that informs the browser which source width to choose. Defaults to <code>100vw</code>.</li> <li><code>class</code>, <code>style</code>, <code>width</code>, <code>height</code>, <code>ariaHidden</code>, <code>fetchpriority</code>, and other standard attributes can be supplied for the rendered <code><img></code> element.</li> <li><code>formats</code> — Output formats; defaults to AVIF, WebP, and PNG. Override with <code>["avif", "webp", "jpeg"]</code> for photographs or when transparency is not required.</li> </ul> <p>The shortcode returns a complete <code><picture></code> element with generated <code><source></code> elements and an <code><img></code> fallback. Image derivatives are written to <code>_site/img/</code> and cached under <code>.cache/eleventy-img/</code> for faster rebuilds.</p> <h2>Building and Previewing</h2> <p>Run the full build to generate the responsive assets and the static site:</p> <pre><code>npm run build </code></pre> <p>The optimized images will appear in <code>_site/img/</code>. Launching the dev server (<code>npm run dev</code>) serves the same processed assets so you can validate responsive behaviour in the browser.</p>