PageSourceSearch

https://eleventy-excellent.netlify.app/blog/post-with-an-image/

html eleventy-excellent.netlify.app collected 2026-10-03 10:41:28 UTC 81,133 bytes, 88 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Post with an image</title><base href="/blog/post-with-an-image/">
3<script><!-- inlined for all pages -->
4(()=>{var p=Object.defineProperty;var u=(c,t,e)=>t in c?p(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var s=(c,t,e)=>u(c,typeof t!="symbol"?t+"":t,e);var r=class r extends HTMLElement{constructor(){super(),this.ready=new Promise(t=>{this.readyResolve=t})}static getParents(t,e=!1){let a=[];for(;t;){if(t.matches&&t.matches(r.tagName)){if(e&&t===e)break;d.hasConditions(t)&&a.push(t)}t=t.parentNode}return a}static async ready(t,e){if(e||(e=r.getParents(t)),e.length===0)return;let a=await Promise.all(e.map(i=>i.wait()));if(a.length)return a[0]}forceFallback(){window.Island&&Object.assign(r.fallback,window.Island.fallback);for(let t in r.fallback){let e=Array.from(this.querySelectorAll(t)).reverse();for(let a of e){if(!a.isConnected)continue;let i=r.getParents(a);if(i.length===1){let o=r.ready(a,i);r.fallback[t](o,a,r.prefix)}}}}wait(){return this.ready}async connectedCallback(){d.hasConditions(this)&&this.forceFallback(),await this.hydrate()}getTemplates(){return this.querySelectorAll(`template[${r.attr.template}]`)}replaceTemplates(t){for(let e of t){if(r.getParents(e,this).length>0)continue;let a=e.getAttribute(r.attr.template);if(a==="replace"){let i=Array.from(this.childNodes);for(let o of i)this.removeChild(o);this.appendChild(e.content);break}else{let i=e.innerHTML;if(a==="once"&&i){if(r.onceCache.has(i)){e.remove();return}r.onceCache.set(i,!0)}e.replaceWith(e.content)}}}async hydrate(){let t=[];this.parentNode&&t.push(r.ready(this.parentNode));let e=d.getConditions(this);for(let a in e)d.map[a]&&t.push(d.map[a](e[a],this));await Promise.all(t),this.replaceTemplates(this.getTemplates());for(let a of r.onReady.values())await a.call(this,r);this.readyResolve(),this.setAttribute(r.attr.ready,""),this.querySelectorAll(`[${r.attr.defer}]`).forEach(a=>a.removeAttribute(r.attr.defer))}};s(r,"tagName","is-land"),s(r,"prefix","is-land--"),s(r,"attr",{template:"data-island",ready:"ready",defer:"defer-hydration"}),s(r,"onceCache",new Map),s(r,"onReady",new Map),s(r,"fallback",{":not(is-land,:defined,[defer-hydration])":(t,e,a)=>{let i=document.createElement(a+e.localName);for(let n of e.getAttributeNames())i.setAttribute(n,e.getAttribute(n));let o=e.shadowRoot;if(!o){let n=e.querySelector(":scope > template:is([shadowrootmode], [shadowroot])");if(n){let m=n.getAttribute("shadowrootmode")||n.getAttribute("shadowroot")||"closed";o=e.attachShadow({mode:m}),o.appendChild(n.content.cloneNode(!0))}}return o&&i.attachShadow({mode:o.mode}).append(...o.childNodes),i.append(...e.childNodes),e.replaceWith(i),t.then(()=>{i.shadowRoot&&e.shadowRoot.append(...i.shadowRoot.childNodes),e.append(...i.childNodes),i.replaceWith(e)})}});var f=r,l=class l{static hasConditions(t){return Object.keys(l.getConditions(t)).length>0}static getConditions(t){let e={};for(let a of Object.keys(l.map))t.hasAttribute(`on:${a}`)&&(e[a]=t.getAttribute(`on:${a}`));return e}static visible(t,e){if("IntersectionObserver"in window)return new Promise(a=>{let i=new IntersectionObserver(o=>{let[n]=o;n.isIntersecting&&(i.unobserve(n.target),a())});i.observe(e)})}static idle(){let t=new Promise(e=>{document.readyState!=="complete"?window.addEventListener("load",()=>e(),{once:!0}):e()});return"requestIdleCallback"in window?Promise.all([new Promise(e=>{requestIdleCallback(()=>{e()})}),t]):t}static interaction(t,e){let a=["click","touchstart"];return t&&(a=(t||"").split(",").map(i=>i.trim())),new Promise(i=>{function o(n){i();for(let m of a)e.removeEventListener(m,o)}for(let n of a)e.addEventListener(n,o,{once:!0})})}static media(t){let e={matches:!0};if(t&&"matchMedia"in window&&(e=window.matchMedia(t)),!e.matches)return new Promise(a=>{e.addListener(i=>{i.matches&&a()})})}static saveData(t){if(!(!("connection"in navigator)||navigator.connection.saveData===(t!=="false")))return new Promise(()=>{})}};s(l,"map",{visible:l.visible,idle:l.idle,interaction:l.interaction,media:l.media,"save-data":l.saveData});var d=l;"customElements"in window&&(window.customElements.define(f.tagName,f),window.Island=f);var y=f.ready;var h=class{};s(h,"attr",{autoInitType:"autoinit",import:"import"}),s(h,"types",{"petite-vue":function(t){t.createApp().mount(this)},vue:function(t){t.createApp().mount(this)},svelte:function(t){new t.default({target:this})},"svelte-ssr":function(t){new t.default({target:this,hydrate:!0})},preact:function(t){t.default(this)}});Island.onReady.set("import-autoinit",async function(c){let t,e=this.getAttribute(h.attr.import);
4if(e&&(t=await import(e)),t){let a=h.types[this.getAttribute(h.attr.autoInitType)||e];a&&await a.call(this,t)}});})();
5
6(()=>{var i="theme-preference",l={dark:"#2e2e2e",light:"#f8f8f8"},t={value:s()};window.addEventListener("load",()=>{let e=document.querySelector("#light-theme-toggle"),r=document.querySelector("#dark-theme-toggle");document.querySelector("[data-theme-switcher]")&&(o(),a(),e.addEventListener("click",()=>n("light")),r.addEventListener("click",()=>n("dark")),e.setAttribute("aria-pressed",t.value==="light"),r.setAttribute("aria-pressed",t.value==="dark"))});window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:e})=>{if(d())return;t.value=e?"dark":"light",o(),a();let r=document.querySelector("#light-theme-toggle"),c=document.querySelector("#dark-theme-toggle");r?.setAttribute("aria-pressed",t.value==="light"),c?.setAttribute("aria-pressed",t.value==="dark")});function n(e){t.value=e,document.querySelector("#light-theme-toggle").setAttribute("aria-pressed",e==="light"),document.querySelector("#dark-theme-toggle").setAttribute("aria-pressed",e==="dark"),u(),a()}function d(){try{return localStorage.getItem(i)}catch{return null}}function s(){return d()||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}function u(){try{localStorage.setItem(i,t.value)}catch{}o(),a()}function o(){document.firstElementChild.setAttribute("data-theme",t.value)}function a(){let e=document.querySelector('meta[name="theme-color"]'),r=t.value==="dark"?l.dark:l.light;e.setAttribute("content",r)}o();})();</script>
6<script type="application/ld+json">{
7    "@context": "https://schema.org",
8    "@graph": [
9      {
10        "@type": "WebSite",
11        "@id": "https://eleventy-excellent.netlify.app#website",
12        "url": "https://eleventy-excellent.netlify.app",
13        "name": "Eleventy Excellent",
14        "description": "Eleventy starter for building modern, resilient websites",
15        "inLanguage": "en_EN"
16      }
17    ]
18  }</script>
18<script type="application/ld+json">{
19    "@context": "https://schema.org",
20    "@type": "BlogPosting",
21    "mainEntityOfPage": {
22      "@type": "WebPage"
23    },
24    "isPartOf": {
25      "@id": "https://eleventy-excellent.netlify.app#website"
26    },
27    "@id": "",
28    "headline": "Post with an image",
29    "description": "We can use Markdown, Nunjucks shortcodes or pure HTML to add images to posts and pages.",
30    "image": "https://eleventy-excellent.netlify.app/assets/images/template/opengraph-default.jpg",
31    "inLanguage": "en_EN",
32    "publisher": {
33      "@type": "Person",
34      "name": "Lene Saile",
35      "url": "https://eleventy-excellent.netlify.app"
36    },
37    "author": {
38      "@type": "Person",
39      "name": "Lene Saile"
40    },
41    "datePublished": "2025-01-09T00:00:00.000Z"
42  }</script>
42<style>@layer tailwindBase{.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.filter{--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:}}@layer reset{*,:after,:before{box-sizing:border-box}*{text-wrap:pretty}h1,h2,h3,h4{text-wrap:balance}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;min-height:100dvh;text-rendering:optimizeSpeed;line-height:1.5}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}[role=list]{padding:0}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;color:currentColor}canvas,img,picture,svg{max-inline-size:100%;block-size:auto;vertical-align:middle;font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:.75rem}picture{display:block}button{all:unset}button,input,select,textarea{font:inherit;color:inherit}textarea{resize:vertical;resize:block}textarea:not([rows]){min-height:10em}[role=button],[role=option],button,label,select,summary{cursor:pointer}:target{scroll-margin-block-start:2ex}:focus{scroll-margin-block-end:8vh}dialog{max-width:unset;max-height:unset}[popover],dialog{border:none;background:none;inset:unset}[popover]{color:inherit}[popover]:not(:popover-open),dialog:not([open],[popover]){display:none!important}html:has(dialog[open]:modal){overflow:hidden}@media (prefers-reduced-motion:reduce){:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@view-transition{navigation:auto}}@layer fonts{@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:400;src:local(""),url(/assets/fonts/atkinson/atkinson-hyperlegible-regular.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible;font-style:italic;font-display:swap;font-weight:400;src:local(""),url(/assets/fonts/atkinson/atkinson-hyperlegible-italic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:700;src:local(""),url(/assets/fonts/atkinson/atkinson-hyperlegible-bold.woff2) format("woff2")}@font-face{font-family:Redhat;font-style:normal;font-display:swap;font-weight:900;src:local(""),url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format("woff2")}}@layer tailwindComponents{:root{--color-gray-100:#f8f8f8;--color-gray-200:#e4e4e4;--color-gray-300:#aeaeae;--color-gray-400:gray;--color-gray-500:#636363;--color-gray-600:#484848;--color-gray-700:#3a3a3a;--color-gray-800:#2e2e2e;--color-gray-900:#161616;--color-pink:#dd4462;--color-pink-subdued:#ce5769;--color-blue:#4467dd;--color-blue-subdued:#4d6cc8;--color-gold:#fbbe25;--color-gold-subdued:#f1c15b;--color-theme-light:var(--color-light);--color-theme-dark:var(--color-dark);--color-theme-mid:var(--color-mid);--color-theme-text:var(--color-text);
42--color-theme-text-accent:var(--color-text-accent);--color-theme-bg:var(--color-bg);--color-theme-bg-accent:var(--color-bg-accent);--color-theme-primary:var(--color-primary);--color-theme-secondary:var(--color-secondary);--color-theme-tertiary:var(--color-tertiary);--border-radius-small:0.1875rem;--border-radius-medium:0.3rem;--space-3xs:clamp(.125rem, .11rem + .1vw, .1875rem);--space-2xs:clamp(.1875rem, .15rem + .19vw, .3125rem);--space-xs:clamp(.3125rem, .27rem + .19vw, .4375rem);--space-s:clamp(.625rem, .55rem + .38vw, .875rem);--space-m:clamp(.875rem, .74rem + .67vw, 1.3125rem);--space-l:clamp(1.1875rem, .96rem + 1.15vw, 1.9375rem);--space-xl:clamp(2.375rem, 2.03rem + 1.73vw, 3.5rem);--space-2xl:clamp(3.5625rem, 3.04rem + 2.6vw, 5.25rem);--space-3xl:clamp(5.9375rem, 5.07rem + 4.33vw, 8.75rem);--space-xs-s:clamp(.3125rem, .14rem + .87vw, .875rem);--space-s-m:clamp(.625rem, .41rem + 1.06vw, 1.3125rem);--space-m-l:clamp(.875rem, .55rem + 1.63vw, 1.9375rem);--space-l-xl:clamp(1.1875rem, .48rem + 3.56vw, 3.5rem);--space-l-2xl:clamp(1.1875rem, -.06rem + 6.25vw, 5.25rem);--space-xl-2xl:clamp(2.375rem, 1.49rem + 4.42vw, 5.25rem);--space-2xl-3xl:clamp(3.5625rem, 1.97rem + 7.98vw, 8.75rem);--size-step-min-2:clamp(.8125rem, .75rem + .29vw, 1rem);--size-step-min-1:clamp(1rem, .88rem + .58vw, 1.375rem);--size-step-0:clamp(1.1875rem, 1.01rem + .87vw, 1.75rem);--size-step-1:clamp(1.4375rem, 1.21rem + 1.15vw, 2.1875rem);--size-step-2:clamp(1.6875rem, 1.36rem + 1.63vw, 2.75rem);--size-step-3:clamp(2.0625rem, 1.64rem + 2.12vw, 3.4375rem);--size-step-4:clamp(2.5rem, 1.96rem + 2.69vw, 4.25rem);--size-step-5:clamp(2.9375rem, 2.19rem + 3.75vw, 5.375rem);--size-step-6:clamp(3.5rem, 2.52rem + 4.9vw, 6.6875rem);--leading-flat:1;--leading-fine:1.2;--leading-standard:1.4;--font-display:Redhat,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--font-base:Atkinson Hyperlegible,system-ui,sans-serif;--font-mono:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-regular:400;--font-bold:700;--font-extra-bold:900}}@layer variables{:root{--gutter:var(--space-m-l);--transition-duration:250ms;--transition-timing:ease;--wrapper-width:85rem;--tracking:-0.04ch;--tracking-s:-0.075ch;--tracking-wide:0.04ch;--stroke:1px solid var(--color-bg-accent);--gradient-rainbow:linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%);--gradient-conic:conic-gradient(
43    var(--color-primary) 0 28%,
44    var(--color-secondary) 0 67%,
45    var(--color-tertiary) 0 100%
46  );--gradient-stripes:linear-gradient(
47    45deg,
48    var(--color-gray-900) 0 75%,
49    var(--color-primary) 0 85%,
50    var(--color-secondary) 0 92%,
51    var(--color-tertiary) 0 100%
52  );--color-light:var(--color-gray-100);--color-dark:var(--color-gray-900);--color-mid:var(--color-gray-400)}:root,:root[data-theme=light]{--color-text:var(--color-gray-800);--color-bg:var(--color-gray-100);--color-primary:var(--color-pink);--color-secondary:var(--color-blue);--color-tertiary:var(--color-gold);
52--color-text-accent:var(--color-gray-700);--color-bg-accent:var(--color-gray-200);--color-bg-accent-2:var(--color-gray-300)}@media (prefers-color-scheme:dark){:root{--color-text:var(--color-gray-100);--color-bg:var(--color-gray-800);--color-primary:var(--color-pink-subdued);--color-secondary:var(--color-blue-subdued);--color-tertiary:var(--color-gold-subdued);--color-text-accent:var(--color-gray-300);--color-bg-accent:var(--color-gray-700);--color-bg-accent-2:var(--color-gray-600)}}:root[data-theme=dark]{--color-text:var(--color-gray-100);--color-bg:var(--color-gray-800);--color-primary:var(--color-pink-subdued);--color-secondary:var(--color-blue-subdued);--color-tertiary:var(--color-gold-subdued);--color-text-accent:var(--color-gray-300);--color-bg-accent:var(--color-gray-700);--color-bg-accent-2:var(--color-gray-600)}}@layer global{html{color-scheme:light dark}body{display:flex;flex-direction:column;font-family:var(--font-base);font-size:var(--size-step-0);font-weight:var(--font-regular);font-size-adjust:from-font;line-height:var(--leading-standard);color:var(--color-text);background-color:var(--color-bg);accent-color:var(--color-primary);letter-spacing:var(--tracking)}main{flex:auto}h1,h2,h3{font-family:var(--font-display);font-weight:var(--font-extra-bold);line-height:var(--leading-fine);letter-spacing:var(--tracking-s)}h1{font-size:var(--size-step-6)}h2{font-size:var(--size-step-4)}blockquote,h3{font-size:var(--size-step-2)}blockquote{padding:var(--space-m-l);border-inline-start:.5rem solid var(--color-primary)}blockquote>*+*{margin-block-start:var(--space-m-l)}blockquote :last-child{font-family:var(--font-base);font-style:normal;font-size:var(--size-step-1)}input,textarea{caret-color:var(--color-primary)}svg{block-size:.6lh;inline-size:auto;flex:none}b,strong{font-weight:var(--font-bold)}hr{border:none;height:1px;width:10%;margin-block:var(--flow-space,var(--space-m-l));margin-inline-start:0;background-color:var(--color-bg-accent-2)}figcaption{margin-block-start:var(--space-s);font-size:var(--size-step-min-1);text-align:center;padding-block-end:var(--space-xs)}figcaption:after{border-block:var(--stroke);content:"";display:block;margin-block:var(--space-xs);inline-size:50%;margin-inline:auto;opacity:.8}a{text-decoration-thickness:.15ex;text-underline-offset:.2ch}a:not([class]):hover{text-decoration:none}:focus{outline:none}:focus-visible{outline:3px solid var(--focus-color,currentColor);outline-offset:var(--focus-offset,.3ch)}@supports (-moz-appearance:none){:root{--focus-offset:0.08em}}::-moz-selection{background-color:var(--color-text);color:var(--color-bg)}::selection{background-color:var(--color-text);color:var(--color-bg)}.preload-transitions *{transition:none!important}@media (scripting:none){.require-js{display:none}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}}@layer compositions{.cluster{display:flex;flex-direction:var(--cluster-direction,row);flex-wrap:var(--cluster-wrap,wrap);gap:var(--gutter,var(--space-s-l));justify-content:var(--cluster-horizontal-alignment,flex-start);align-items:var(--cluster-vertical-alignment,center)}.flow>*+*{margin-block-start:var(--flow-space,1em)}.grid{display:grid;grid-template-columns:repeat(var(--grid-placement,auto-fill),minmax(var(--grid-min-item-size,16rem),1fr));gap:var(--gutter,var(--space-s-m))}.grid[data-rows=masonry]{grid-template-rows:masonry;align-items:start}.grid[data-layout="50-50"]{--grid-placement:auto-fit;--grid-min-item-size:clamp(16rem, 50vw, 28rem)}.grid[data-layout=thirds]{--grid-placement:auto-fit;--grid-min-item-size:clamp(16rem, 33%, 20rem)}.repel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:var(--repel-vertical-alignment,center);gap:var(--gutter,var(--space-s-l))}.repel[data-nowrap]{flex-wrap:nowrap}.sidebar{display:flex;flex-wrap:wrap;gap:var(--gutter,var(--space-s-l))}.sidebar:not([data-direction])>:first-child{flex-basis:var(--sidebar-target-width,20rem);flex-grow:1}.sidebar:not([data-direction])>:last-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sidebar-content-min-width,50%)}.sidebar[data-direction=rtl]>:last-child{flex-basis:var(--sidebar-target-width,20rem);flex-grow:1}.sidebar[data-direction=rtl]>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sidebar-content-min-width,50%)}.wrapper{--gap:clamp(1rem, 6vw, 3rem);--full:minmax(var(--gap), 1fr);--content:min(var(--wrapper-width, 85rem), 100% - 2 * var(--gap));--popout:minmax(0, 2rem);--feature:minmax(0, 5rem);display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]}.wrapper>*{grid-column:content}.prose-wrapper{--wrapper-width:64rem}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}}@layer blocks{.button{--button-bg:var(--color-text);--button-color:color-mix(in oklab, var(--button-bg) 10%, var(--color-bg));--button-hover-bg:color-mix(in oklab, var(--button-bg) 90%, var(--color-bg));--button-hover-color:var(--button-color);--button-border-width:var(--border-thickness);--button-border-style:solid;--button-border-color:color-mix(in oklab, var(--button-bg) 80%, var(--color-text));--button-radius:var(--border-radius-small);--button-gap:var(--space-2xs);--button-padding:var(--space-xs) var(--space-m);--button-font-family:var(--font-body);--button-font-weight:var(--font-regular);--button-font-size:var(--size-step-0);--button-text-transform:none;--button-tracking:normal;display:inline-flex;align-items:center;gap:var(--button-gap);padding:var(--button-padding);background:var(--button-bg);color:var(--button-color);border-width:var(--button-border-width);border-style:var(--button-border-style);border-color:var(--button-border-color);border-radius:var(--button-radius);text-decoration:none;font-family:var(--button-font-family);font-weight:var(--button-font-weight);font-size:var(--button-font-size);line-height:var(--leading-flat);text-transform:var(--button-text-transform);letter-spacing:var(--button-tracking);text-box-trim:trim-both;text-box-edge:cap alphabetic}.button svg{block-size:var(--button-icon-size,1.2cap)}.button:hover,.button[aria-current=page],.button[aria-pressed=true],.button[data-state=active]{background:var(--button-hover-bg);color:var(--button-hover-color)}.button:active{transform:scale(99%)}.button[data-button-variant=primary]{--button-bg:var(--color-primary);--button-color:var(--color-light);--button-color:color-mix(in oklab, var(--color-primary) 5%, var(--color-light))}.button[data-button-variant=secondary]{--button-bg:var(--color-secondary);--button-color:var(--color-light);--button-color:color-mix(in oklab, var(--color-secondary) 5%, var(--color-light))}.button[data-button-variant=tertiary]{--button-bg:var(--color-tertiary);--button-color:var(--color-dark);--button-color:color-mix(in oklab, var(--color-tertiary) 10%, var(--color-dark))}.button[data-ghost-button]{--button-bg:var(--color-bg);--button-border-color:var(--color-text);--button-color:var(--color-text);--button-hover-color:var(--color-bg)}.button[data-ghost-button]:hover{--_ghost-hover-bg:var(--color-bg);--_ghost-hover-bg:color-mix(in oklab, var(--button-bg) 95%, var(--color-dark));background:var(--_ghost-hover-bg);color:var(--button-color)}.button[data-small-button]{--button-border-width:2px;--button-radius:var(--border-radius-small);--button-font-size:var(--size-step-min-2);--button-padding:var(--space-2xs) var(--space-s) var(--space-3xs) var(--space-s);--button-text-transform:uppercase;--button-tracking:var(--tracking-wide)}.button[data-button-radius=hard]{--button-radius:0}.button[data-icon]{--button-padding:var(--space-2xs);--button-bg:var(--color-bg);--button-border-color:var(--color-bg);--button-color:var(--color-text);--button-hover-color:var(--color-primary);--button-radius:50%;aspect-ratio:1;display:inline-grid;place-items:center}:root{--color-code-orange:#e09952;--color-code-blue:var(--color-secondary);--color-code-indigo:#7d59c5;--color-code-violet:#e052bf;--color-code-pink:#e05269;--color-code-gray:#949494;--color-code-bg:color-mix(in oklab, var(--color-bg) 92%, #000)}code,pre{font-family:var(--font-mono);font-size:var(--size-step-min-1);background-color:var(--color-code-bg);border-radius:var(--border-radius-medium)}code[class*=language-],pre[class*=language-]{white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;hyphens:none}pre{grid-column:popout!important;overflow-x:auto;padding:var(--space-s) var(--space-l)}
52:where(:not(pre))>code{position:relative;top:-.05em;padding:.1em .4em}pre[class*=language-]{overflow:auto;position:relative}[class*=language-] .namespace{opacity:.7}.token.atrule{color:var(--color-code-pink)}.token.attr-name{color:var(--color-code-orange)}.token.attr-value{color:var(--color-text-accent)}.token.attribute{color:var(--color-code-blue)}.token.boolean{color:var(--color-code-pink)}.token.builtin,.token.cdata,.token.char,.token.class,.token.class-name,.token.color{color:var(--color-code-orange)}.token.comment{color:var(--color-code-gray)}.token.constant,.token.deleted{color:var(--color-code-pink)}.token.doctype{color:var(--color-code-orange)}.token.entity,.token.function{color:var(--color-code-pink)}.token.hexcode{color:var(--color-code-orange)}.token.id,.token.important{color:var(--color-code-pink);font-weight:var(--font-bold)}.token.inserted{color:var(--color-code-orange)}.token.keyword{color:var(--color-code-pink);font-style:italic}.token.number{color:var(--color-text-accent)}.token.operator{color:var(--color-code-gray)}.token.prolog,.token.property{color:var(--color-code-orange)}.token.pseudo-class,.token.pseudo-element{color:var(--color-code-blue)}.token.punctuation{color:var(--color-code-gray)}.token.regex{color:var(--color-code-orange)}.token.selector{color:var(--color-code-pink)}.token.string{color:var(--color-text-accent)}.token.symbol,.token.tag,.token.unit{color:var(--color-code-pink)}.token.url{color:var(--color-code-violet)}.token.variable{color:var(--color-code-pink)}.codepen a{--icon-size:1.2em;display:flex;align-items:center;gap:var(--space-2xs)}.prose .cp_embed_wrapper,.prose .cp_embed_wrapper+script+:not(h2){--flow-space:var(--space-l)}.cp_embed_wrapper{grid-column:popout;position:relative;overflow:auto;display:grid;place-items:center;grid-template-areas:"container";resize:horizontal}.cp_embed_wrapper iframe{grid-area:container;width:100%}.indicator,a[href^=http]:not([href*="localhost:8080"]):not([href*="eleventy-excellent.netlify.app"]):not(.button):not(.no-indicator){padding-inline-end:.8em}.indicator:after,a[href^=http]:not([href*="localhost:8080"]):not([href*="eleventy-excellent.netlify.app"]):not(.no-indicator):after{position:absolute;display:inline-block;inline-size:1em;block-size:1em;background-image:url(/assets/images/template/external.svg);background-repeat:no-repeat;background-position:50%;background-size:60% auto;content:"(external link)";overflow:hidden;white-space:nowrap;text-indent:1em}.mainnav{--nav-list-timing-function:cubic-bezier(0.68, -0.55, 0.27, 1.55);position:var(--nav-position,absolute);inset-inline-end:0}.mainnav:has([data-drawer-toggle][aria-expanded=true]){--nav-position:fixed;inset-inline-end:var(--gap)}.mainnav ul{--gutter:var(--space-xs);--cluster-vertical-alignment:normal;--cluster-wrap:wrap;--cluster-direction:column;--nav-list-background:var(--color-bg);--nav-list-shadow:-5px 0 11px 0 rgba(0,0,0,.2);--nav-list-height:100dvh;--nav-list-padding-block:var(--space-2xl);--nav-list-padding-inline:var(--space-s);--nav-list-position:fixed;--nav-list-width:min(18rem, 100vw);--nav-list-visibility:hidden;--nav-list-opacity:0;background:var(--nav-list-background);box-shadow:var(--nav-list-shadow);block-size:var(--nav-list-height);list-style:none;margin:0;padding-block:var(--nav-list-padding-block);padding-inline:var(--nav-list-padding-inline);position:var(--nav-list-position);inset-block-start:0;inset-inline-end:0;inline-size:var(--nav-list-width);opacity:var(--nav-list-opacity);transition:opacity .3 var(--nav-list-timing-function),visibility .3s ease-in-out;visibility:var(--nav-list-visibility)}.mainnav ul[data-no-flash]{transition:none}@media (prefers-reduced-motion:no-preference){.mainnav>ul{--nav-list-transform:translateX(100%);--nav-list-opacity:1;transform:var(--nav-list-transform);transition:transform .5s var(--nav-list-timing-function),visibility .3s linear}.mainnav svg{transition:transform .4s var(--nav-list-timing-function)}}.mainnav [data-drawer-toggle]{--gutter:var(--space-2xs);--cluster-vertical-alignment:center;background:var(--color-bg);display:var(--nav-button-display,inline-flex);position:relative;z-index:2;padding:var(--space-2xs) 0;line-height:var(--leading-flat)}.mainnav [data-drawer-toggle][aria-expanded=true]+ul{--cluster-wrap:nowrap;--nav-list-visibility:visible;--nav-list-transform:translateX(0);--nav-list-opacity:1;overflow-y:auto}body:has([data-drawer-toggle][aria-expanded=true]){overflow:hidden}.mainnav span{font-weight:var(--font-bold);text-transform:uppercase;font-family:var(--font-display);font-size:var(--size-step-min-1)}.mainnav svg{block-size:.9em;color:var(--color-text);stroke-width:3}.mainnav [aria-expanded=true] svg{transform:rotate(45deg)}.mainnav :is(a,[data-submenu-toggle]){--nav-item-background:transparent;--nav-item-text-color:var(--color-text);--nav-item-padding:var(--space-xs) var(--space-2xs);--nav-item-decoration-color:transparent;--nav-item-font-size:var(--size-step-0);
52--nav-item-font-weight:var(--font-bold);background:var(--nav-item-background);color:var(--nav-item-text-color);font-size:var(--nav-item-font-size);padding:var(--nav-item-padding);display:block;border-radius:var(--border-radius-medium);text-decoration-line:underline;text-decoration-color:var(--nav-item-decoration-color);text-decoration-thickness:3px;text-underline-offset:.2em}.mainnav:has(.nav-sublist) :is(a,[data-submenu-toggle]){font-weight:var(--nav-item-font-weight)}.mainnav [data-submenu-toggle]{gap:var(--space-2xs);display:flex;inline-size:100%;align-items:center;justify-content:space-between}.mainnav [data-submenu-toggle] svg{margin-inline-end:calc(var(--gap) - var(--nav-list-padding-inline))}.mainnav :is(a,[data-submenu-toggle]):hover{--nav-item-background:transparent;--nav-item-text-color:var(--color-text);--nav-item-decoration-color:var(--color-bg-accent-2)}.mainnav [aria-current=page],.mainnav [data-state=active]{--nav-item-background:var(--color-bg);--nav-item-text-color:var(--color-primary);--nav-item-decoration-color:var(--color-primary)}li:has(ul a[aria-current=page])>[data-submenu-toggle]{--nav-item-background:var(--color-bg);--nav-item-text-color:var(--color-text);--nav-item-decoration-color:var(--color-text)}.mainnav [data-submenu-toggle][aria-expanded=false]+ul{display:none}.mainnav .nav-sublist{--gutter:0;--cluster-direction:column;--nav-sublist-position:relative;--nav-sublist-background:var(--color-bg);--nav-sublist-width:100%;--nav-list-visibility:visible;--nav-list-opacity:1;--nav-list-padding-block:0 var(--space-m);--nav-list-padding-inline:0;box-shadow:none;position:var(--nav-sublist-position);inline-size:var(--nav-sublist-width);block-size:auto;background:var(--nav-sublist-background);z-index:2}.mainnav .nav-sublist a{--nav-item-font-weight:var(--font-regular)}@media (min-width:662px){.mainnav{--nav-position:static;--nav-button-display:none}.mainnav :is(a,[data-submenu-toggle]){--nav-item-font-weight:var(--font-regular)}.mainnav ul{--cluster-direction:row;--nav-list-position:static;--nav-list-padding-block:0;--nav-list-padding-inline:0;--nav-list-height:auto;--nav-list-width:100%;--nav-list-shadow:none;--nav-list-visibility:visible;--nav-list-transform:translateX(0);--nav-list-opacity:1}.mainnav [aria-current=page],.mainnav [data-state=active],li:has(ul a[aria-current=page])>[data-submenu-toggle]{--nav-item-background:transparent;--nav-item-text-color:var(--color-primary);--nav-item-decoration-color:var(--color-primary)}.mainnav [data-submenu-toggle]{inline-size:auto}.mainnav [data-submenu-toggle] svg{margin-inline-end:0}.mainnav .nav-sublist{--nav-sublist-position:absolute;--nav-sublist-background:var(--color-bg);--nav-sublist-border:var(--color-text);--nav-sublist-width:max-content;--nav-list-padding-block:var(--space-xs);--nav-list-padding-inline:var(--space-xs);border:3px solid var(--nav-sublist-border);inset-block-start:var(--space-xl);inset-inline-start:var(--space-2xs)}}.mainnav ul:first-child{--cluster-direction:row;--nav-list-position:static;--nav-list-padding-block:0;--nav-list-padding-inline:0;--nav-list-height:auto;--nav-list-width:100%;--nav-list-shadow:none;--nav-list-visibility:visible;--nav-list-transform:translateX(0);--nav-list-opacity:1}.mainnav ul:first-child [aria-current=page],.mainnav ul:first-child [data-state=active]{--nav-item-background:transparent;--nav-item-text-color:var(--color-primary);--nav-item-decoration-color:var(--color-primary)}.mainnav:has(ul:first-child){--nav-position:relative}@media (scripting:none){.mainnav ul:first-child ul.nav-sublist{--cluster-direction:row;--cluster-wrap:wrap}@media (min-width:662px){.mainnav ul:first-child ul.nav-sublist{--cluster-direction:column}}}.prose{--flow-space:var(--space-m-l);--wrapper-width:64rem}.prose :is(pre,pre+*,figure,picture){--flow-space:var(--space-m-l)}.prose :is(figure+*,picture+*){--flow-space:var(--space-xl)}.prose :is(img,video){border:var(--stroke)}.prose :is(h2,h3,h4){--flow-space:1.5em;overflow-wrap:anywhere;hyphens:auto}@media (min-width:1000px){.prose :is(h1,h2,h3){overflow-wrap:unset;hyphens:unset}}
52.prose :is(h1,h2,h3,h4)+:not([class]):not(figure){--flow-space:var(--space-l)}.prose :is(p,li,dl,blockquote){max-inline-size:60ch;text-wrap:pretty}.prose .heading-anchor:where(:hover,:focus){text-decoration:none}.heading-anchor{text-decoration:none}.prose mark{background-color:var(--color-tertiary);color:var(--color-dark)}.prose :is(ul,ol):not([class]) li+li,.prose :is(ul,ol):not([class]) li>:is(ol,ul){padding-block-start:var(--space-s)}.prose :is(ul:not([class]):not([role=list])) li::marker{color:var(--color-primary);content:"– "}.prose ul:not([class]){padding-inline-start:1.3ch}.prose ol:not([class]){padding-inline-start:1.7ch}.prose ol li::marker{color:var(--color-primary)}.prose img{border-radius:var(--border-radius-medium)}@media (max-width:640px){.prose a,.prose>*{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto}}.section>.divider:first-child{transform:rotate(180deg) translateY(-1px)}.section__inner{background-color:var(--spot-color,var(--color-bg-accent));color:var(--color-text)}.section blockquote{font-weight:var(--font-bold);line-height:1;font-size:var(--size-step-4);letter-spacing:var(--tracking-s)}.section :is(h1,h2,h3,blockquote){opacity:95%}.divider{display:block;block-size:3.5em;inline-size:100%;fill:var(--spot-color,var(--color-bg))}.divider>.divider{transform:translateY(-1px)}.site-footer{--cluster-horizontal-alignment:center}.site-footer a:not(.creator a){padding:var(--space-xs)}.site-footer .creator a:hover{color:transparent;background-image:var(--gradient-rainbow);background-size:100%;background-repeat:repeat;-webkit-background-clip:text;background-clip:text}.site-footer .creator a:hover svg{color:var(--color-primary)}.logo{--gutter:var(--space-xs);padding:var(--space-s) 0;font-size:var(--size-step-0);text-decoration:none}.skip-link{clip:rect(1px,1px,1px,1px);display:block;block-size:1px;overflow:hidden;position:absolute;inline-size:1px;top:1rem;left:1rem;z-index:999}.skip-link:focus{clip:auto;block-size:auto;overflow:visible;inline-size:auto;background-color:var(--color-text);color:var(--color-bg);padding:var(--space-xs) var(--space-s-m);border-radius:var(--border-radius-medium);line-height:1}.skip-link:not(:focus){border:0;clip:rect(0 0 0 0);block-size:auto;margin:0;overflow:hidden;padding:0;position:absolute;inline-size:1px;white-space:nowrap}.gradient-text{background-image:var(--gradient-conic);padding:.6rem 0;background-size:50%}.gradient-text,.gradient-text-linear{color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-linear{background-image:var(--gradient-rainbow);background-size:100%;background-repeat:repeat}.theme-switch h2{font-size:var(--size-step-min-1);font-family:var(--font-base)}.theme-switch .button[aria-pressed=true]{--_color-contrast:var(--color-tertiary);--button-bg:var(--_color-contrast);--button-color:var(--color-dark);--button-hover-color:var(--color-dark);--button-border-color:var(--_color-contrast);--focus-color:var(--_color-contrast)}is-land:not(:defined) .theme-switch{display:none}}@layer tailwindUtilities{.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.my-m-l{margin-top:clamp(.875rem,.55rem + 1.63vw,1.9375rem);margin-bottom:clamp(.875rem,.55rem + 1.63vw,1.9375rem)}.my-s-m{margin-top:clamp(.625rem,.41rem + 1.06vw,1.3125rem);margin-bottom:clamp(.625rem,.41rem + 1.06vw,1.3125rem)}.mt-l-xl{margin-top:clamp(1.1875rem,.48rem + 3.56vw,3.5rem)}.mt-s-m{margin-top:clamp(.625rem,.41rem + 1.06vw,1.3125rem)}.mt-xl{margin-top:clamp(2.375rem,2.03rem + 1.73vw,3.5rem)}.mt-xs{margin-top:clamp(.3125rem,.27rem + .19vw,.4375rem)}.mt-xs-s{margin-top:clamp(.3125rem,.14rem + .87vw,.875rem)}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.justify-center{justify-content:center}.bg-gray-100{background-color:#f8f8f8}.p-s-m{padding:clamp(.625rem,.41rem + 1.06vw,1.3125rem)}.text-center{text-align:center}.font-display{font-family:Redhat,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.text-step-0{font-size:clamp(1.1875rem,1.01rem + .87vw,1.75rem)}.text-step-1{font-size:clamp(1.4375rem,1.21rem + 1.15vw,2.1875rem)}
52.text-step-2{font-size:clamp(1.6875rem,1.36rem + 1.63vw,2.75rem)}.text-step-4{font-size:clamp(2.5rem,1.96rem + 2.69vw,4.25rem)}.text-step-min-1{font-size:clamp(1rem,.88rem + .58vw,1.375rem)}.capitalize{text-transform:capitalize}.italic{font-style:italic}.text-gray-900{color:#161616}.text-pink{color:#dd4462}.text-theme-light{color:var(--color-light)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.flow-space-m{--flow-space:clamp(.875rem, .74rem + .67vw, 1.3125rem)}.region-space-m{--region-space:clamp(.875rem, .74rem + .67vw, 1.3125rem)}.region-space-l{--region-space:clamp(1.1875rem, .96rem + 1.15vw, 1.9375rem)}.gutter-2xs{--gutter:clamp(.1875rem, .15rem + .19vw, .3125rem)}.gutter-xs{--gutter:clamp(.3125rem, .27rem + .19vw, .4375rem)}.gutter-s{--gutter:clamp(.625rem, .55rem + .38vw, .875rem)}.gutter-xs-s{--gutter:clamp(.3125rem, .14rem + .87vw, .875rem)}.spot-color-theme-bg{--spot-color:var(--color-bg)}.spot-color-theme-bg-accent{--spot-color:var(--color-bg-accent)}.spot-color-theme-primary{--spot-color:var(--color-primary)}.spot-color-theme-secondary{--spot-color:var(--color-secondary)}.grayscale{filter:grayscale(100%)}.heading-line{display:flex;align-items:flex-start;text-align:left}.heading-line:after{content:"";flex-grow:1;block-size:1px;background:var(--color-bg-accent-2);margin-block-start:auto;transform:translateY(-.25em);margin-left:var(--space-s)}.ontop{z-index:1;position:relative}.region{--region-space-fallback:var(--region-space, var(--space-l-xl));padding-block-start:var(--region-space-top,var(--region-space-fallback));padding-block-end:var(--region-space-bottom,var(--region-space-fallback))}.spin{animation:spin 30s linear infinite}@media (prefers-reduced-motion:no-preference){@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}}@media (min-width:1000px){.md\:text-right{text-align:right}}</style><style>.post article h1{font-size:var(--size-step-6)}.post article h2{font-size:var(--size-step-3)}.post article h3{font-size:var(--size-step-2)}.post h1+:is(picture,figure) img{max-inline-size:var(--max-img-width,100%);block-size:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.post date{font-size:var(--size-step-1);color:var(--color-text-light)}.post .credit{color:var(--color-text-accent);background-color:var(--color-bg);padding:var(--space-xs) var(--space-s);border-radius:var(--border-radius-medium);transform:translateY(-4ch) translateX(-.5ch);max-inline-size:-moz-fit-content;max-inline-size:fit-content}.post .credit,.post .meta{font-size:var(--size-step-min-1)}.footnotes{font-size:var(--size-step-min-1)}.footnote-ref{font-size:var(--size-step-min-2);vertical-align:super;margin-inline-start:.1ch;color:var(--color-text-accent)}.footnote-ref a{text-decoration:none;padding:.3ch}.footnote-backref{text-decoration:none;background-color:var(--color-bg-accent);border-radius:var(--border-radius-medium);padding-inline:var(--space-xs)}.footnote-backref:hover{color:var(--color-primary)}</style><link rel="preload" href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/assets/fonts/atkinson/atkinson-hyperlegible-regular.woff2" as="font" type="font/woff2" crossorigin><meta name="description" content="We can use Markdown, Nunjucks shortcodes or pure HTML to add images to posts and pages."><meta name="theme-color" content="#2e2e2e" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#f8f8f8" media="(prefers-color-scheme: light)"><meta name="robots" content="index,follow"><meta name="googlebot" content="index,follow"><meta name="generator" content="Eleventy v3.1.6"><meta name="format-detection" content="telephone=no"><meta name="color-scheme" content="light dark"><link rel="canonical" href="https://eleventy-excellent.netlify.app/blog/post-with-an-image/"><link rel="author" href="humans.txt"><link rel="me" href="https://front-end.social/@lene"><meta name="fediverse:creator" content="@[email protected]"><meta property="og:url" content="https://eleventy-excellent.netlify.app/blog/post-with-an-image/"><meta property="og:type" content="website"><meta property="og:title" content="Post with an image"><meta property="og:image" content="https://eleventy-excellent.netlify.app/assets/og-images/post-with-an-image-preview.jpeg"><meta property="og:image:alt" content="Post with an image">
52<meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:description" content="We can use Markdown, Nunjucks shortcodes or pure HTML to add images to posts and pages."><meta property="og:site_name" content="Eleventy Excellent"><meta property="og:locale" content="en_EN"><meta property="article:author" content="Lene Saile"><link rel="alternate" type="application/atom+xml" title="Atom Feed: Eleventy Excellent" href="/feed.xml"><link rel="alternate" type="application/json" title="JSON Feed: Eleventy Excellent" href="/feed.json"><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">
52<script type="speculationrules">{
53    "prefetch": [
54      {
55        "where": {"href_matches": "/*"},
56        "eagerness": "moderate"
57      }
58    ]
59  }</script>
59</head><body class="post"><header class="wrapper"><a href="#main" class="skip-link">Skip to content</a><div class="repel ontop gutter-s"><a href="/" class="logo | cluster"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#dd4462" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433z" clip-rule="evenodd"></path></svg> <span class="font-display">Eleventy Excellent</span></a><nav id="mainnav" aria-label="Main" class="mainnav"><ul role="list" data-no-flash class="cluster"><li><a href="/about/">About</a></li><li><a href="/get-started/">Docs</a></li><li><a href="/built-with/">Built with</a></li><li><a href="/blog/" aria-current="page" data-state="active">Blog</a></li></ul></nav></div></header><main id="main" class="flow"><div style="--region-space-top: var(--space-xl-2xl)" class="region"><div class="wrapper flow prose"><h1 class="gradient-text">Post with an image</h1><picture slot="image" class="feature"><source type="image/avif" srcset="/assets/images/asturias-1-650w.avif 650w, /assets/images/asturias-1-960w.avif 960w, /assets/images/asturias-1-1400w.avif 1400w" sizes="100vw"><source type="image/webp" srcset="/assets/images/asturias-1-650w.webp 650w, /assets/images/asturias-1-960w.webp 960w, /assets/images/asturias-1-1400w.webp 1400w" sizes="100vw"><source type="image/jpeg" srcset="/assets/images/asturias-1-650w.jpeg 650w, /assets/images/asturias-1-960w.jpeg 960w, /assets/images/asturias-1-1400w.jpeg 1400w" sizes="100vw"><img src="/assets/images/asturias-1-1400w.jpeg" width="1400" height="1050" alt="A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape" loading="eager" decoding="sync"></picture><p class="meta | cluster gutter-xs-s"><time datetime="2025-01-09T00:00:00.000Z">January 9, 2025 </time><a href="/tags/image/" data-small-button class="button">image </a><a href="/tags/feature/" data-small-button class="button">feature</a></p><p>Using the powerful <a href="https://www.11ty.dev/docs/plugins/image/" rel="noopener">Eleventy Image plugin</a>, we have three ways to optimize images: <a href="#html-transform">HTML Transform</a>, <a href="#markdown-syntax">Markdown syntax</a>, and <a href="#nunjucks-shortcodes">Nunjucks shortcodes</a>.</p><h2 id="html-transform"><a href="#html-transform" class="heading-anchor">HTML Transform</a></h2><p>Transforms any <code>&lt;img&gt;</code> or <code>&lt;picture&gt;</code> tags in HTML files as a post-processing step. Find the default settings directly in <code>eleventy.config.js</code>.</p><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./co-located-image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alt text<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
60<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/images/absolute-path-image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alt text<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></code></pre><p>We can pass in overrides for every instance and use attributes. By default all images are set to be lazy loaded, but we can override this by directly setting <code>loading="eager"</code> and <code>decoding="sync"</code>on the <code>&lt;img&gt;</code> element.</p><p>Another thing to note is the <code>widths: ['auto']</code> setting, which by default only includes the original size image. We can set the dedicated <code>widths</code> to be used by adding <code>eleventy:widths="800,1200"</code> on the element. A single HTML <code>width</code> attribute (e.g. <code>width="400"</code>) is also treated as an alias for <code>eleventy:widths</code> when it is a valid integer. If both are set on the same element, Image gives <code>eleventy:widths</code> priority. For images with <a href="/blog/post-with-an-image/#markdown-syntax">Markdown syntax</a>, I set fixed <code>widths</code> so we don’t need to set a value on every instance.</p><p><code>sizes</code> defaults to <code>auto</code>, which is by default applied to all lazy loading images. See: <a href="https://github.com/whatwg/html/pull/8008" rel="noopener">https://github.com/whatwg/html/pull/8008</a>. We can overwrite this with a normal <code>sizes</code> attribute, or, since <a href="https://github.com/11ty/image/releases/tag/v7.0.0" rel="noopener">Image v7</a>, with <code>eleventy:sizes</code>, which also overrides any <code>sizes</code> set in the plugin config. Note:<br>The <code>sizes</code> attribute is required if <code>widths</code> has more than one entry. No default value for is added for <code>sizes</code> for eagerly loaded images, so we need to set it explicitly.</p><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./co-located-image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alt text<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">eleventy:</span>widths</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200,600<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">eleventy:</span>sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100vw<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eager<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sync<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></code></pre><picture><source type="image/webp" srcset="/blog/post-with-an-image/Y4zzqT6El3-200.webp 200w, /blog/post-with-an-image/Y4zzqT6El3-600.webp 600w" sizes="100vw"><img loading="eager" decoding="sync" src="/blog/post-with-an-image/Y4zzqT6El3-200.jpeg" alt="A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape" width="600" height="450" srcset="/blog/post-with-an-image/Y4zzqT6El3-200.jpeg 200w, /blog/post-with-an-image/Y4zzqT6El3-600.jpeg 600w" sizes="100vw"></picture><p>
60If an image is already optimized elsewhere and you only want <code>width</code>/<code>height</code> (no Sharp re-encoding), Image v7 adds New <code>passthrough</code> format (usage: formats: [“passthrough”]).</p><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./co-located-image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alt text<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">eleventy:</span>formats</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>passthrough<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></code></pre><p><strong>Extra benefit:</strong> we can use both relative and absolute image sources.<br>One downside is that it comes with a higher build cost due to the post-processing step (unless you opt into <code>passthrough</code>).</p><p>More info: <a href="https://www.11ty.dev/docs/plugins/image/#html-transform" rel="noopener">https://www.11ty.dev/docs/plugins/image/#html-transform</a></p><h2 id="markdown-syntax"><a href="#markdown-syntax" class="heading-anchor">Markdown syntax</a></h2><p>This also uses <a href="https://www.11ty.dev/docs/plugins/image/#html-transform" rel="noopener">Image HTML Transform </a>.<br>The markdown sytnax for images creates the <code>&lt;img&gt;</code> element the plugin is looking for, and then transforms it to the <code>&lt;picture&gt;</code> element (if more than one format is set).</p><p>In <code>src/_config/plugins/markdown.js</code> I customized the Markdown rendering for images slightly. What normally would become a <code>title</code> attribute is used to create the caption (<code>&lt;figcaption&gt;</code> within a <code>&lt;figure&gt;</code> element). Note that I set a fixed <code>widths</code> value instead of <code>auto</code> as the default.</p><pre class="language-markdown"><code class="language-markdown">![alt text](/path/to/image 'caption text')
61<span class="token url"><span class="token operator">!</span>[<span class="token content">Close-up...</span>](<span class="token url">/assets/images/gallery/asturias-4.jpg</span>)</span> 'I used a portrait lens for this one'</code></pre><p></p><figure><picture><source type="image/webp" srcset="/img/52cMXATwJ0-650.webp 650w, /img/52cMXATwJ0-960.webp 960w, /img/52cMXATwJ0-1400.webp 1400w" sizes="auto"><img loading="lazy" decoding="async" src="/img/52cMXATwJ0-650.jpeg" alt="Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras" title="I used a portrait lens for this one" width="1400" height="930" srcset="/img/52cMXATwJ0-650.jpeg 650w, /img/52cMXATwJ0-960.jpeg 960w, /img/52cMXATwJ0-1400.jpeg 1400w" sizes="auto"></picture><figcaption>I used a portrait lens for this one</figcaption></figure><p></p><p>We can also add custom attributes here (<a href="https://www.aleksandrhovhannisyan.com/blog/eleventy-image-transform/" rel="noopener">Kudos to Aleksandr</a>), to overwrite the default <code>widths</code>, have the image eagerly loaded, or add a <code>class</code> attribute, etc.</p><pre class="language-markdown"><code class="language-markdown"><span class="token url"><span class="token operator">!</span>[<span class="token content">alt text</span>](<span class="token url">/path/to/image</span>)</span>{attrs}
62<span class="token url"><span class="token operator">!</span>[<span class="token content">Close-up...</span>](<span class="token url">/assets/images/gallery/asturias-2.jpg</span>)</span>{loading="eager" decoding="sync" eleventy:widths="400" eleventy:sizes="100vw" class="grayscale"}</code></pre><p><picture><source type="image/webp" srcset="/img/sJaJhkRrjR-400.webp" sizes="100vw"><img loading="eager" decoding="sync" src="/img/sJaJhkRrjR-400.jpeg" alt="Close-up of a delicate white flower with a yellow center, surrounded by green leaves" width="400" height="265" class="grayscale"></picture></p><p>As the Markdown syntax is based on the HTML Transform, we must also add a custom <code>sizes</code> attribute to the image if we want to eager-load the image.</p><h2 id="nunjucks-shortcodes"><a href="#nunjucks-shortcodes" class="heading-anchor">Nunjucks shortcodes</a></h2><p>There are two Nunjucks shortcodes available: <code>image</code> and <code>imageKeys</code>. All skipped or left out parameters are set to their default values: an empty string if no <code>alt</code> text is passed, <code>loading = 'lazy'</code>, the <code>&lt;picture&gt;</code> element gets its set of images from the default <code>widths=[650,960,1400]</code> and compares to a condition of <code>sizes="auto"</code> (for lazy loading images) or <code>100vw</code> (for eager loading images), formats are <code>['avif', 'webp', 'jpeg']</code>.</p><h3 id="positional-parameters-shortcode"><a href="#positional-parameters-shortcode" class="heading-anchor">Positional parameters Shortcode</a></h3><p>The positional parameters shortcode is the legacy approach and requires the arguments to be <strong>passed in the correct order</strong>.</p><p>The most basic version contains only the path to the image.</p><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token string">"path to image"</span> <span class="token delimiter punctuation">%}
62</span></span></code></pre><p>We can pass in manually all the conditions, and add <code>null</code> to skip. The arguments include classes for the outer container ( <code>&lt;picture&gt;</code> or <code>&lt;figure&gt;</code> element), and for the <code>&lt;img&gt;</code> element.</p><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token string">"path to image"</span><span class="token punctuation">,</span> <span class="token string">"alt text"</span><span class="token punctuation">,</span> <span class="token string">"caption text"</span><span class="token punctuation">,</span> <span class="token string">"eager"</span><span class="token punctuation">,</span> <span class="token string">"container class names"</span><span class="token punctuation">,</span> <span class="token string">"img class names"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">400</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">"(min-width:30em) 50vw, 100vw"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'webp'</span><span class="token punctuation">,</span> <span class="token string">'jpeg'</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span>
63<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token string">"path to image"</span><span class="token punctuation">,</span> <span class="token string">"alt text"</span><span class="token punctuation">,</span> <span class="token variable">null</span><span class="token punctuation">,</span> <span class="token string">"eager"</span> <span class="token delimiter punctuation">%}</span></span></code></pre><figure slot="image" class="text-center"><picture><source type="image/webp" srcset="/assets/images/asturias-3-200w.webp 200w, /assets/images/asturias-3-400w.webp 400w" sizes="(min-width:30em) 50vw, 100vw"><source type="image/jpeg" srcset="/assets/images/asturias-3-200w.jpeg 200w, /assets/images/asturias-3-400w.jpeg 400w" sizes="(min-width:30em) 50vw, 100vw"><img src="/assets/images/asturias-3-400w.jpeg" width="400" height="265" alt="A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains" loading="lazy" decoding="async" class="grayscale"></picture><figcaption>An example for the positional parameters shortcode.</figcaption></figure><p><strong>Example:</strong> predefine <code>widths</code> and <code>sizes</code> using Nunjuck’s <code>set</code> tag or front matter fields, and dynamically get the image path, like I do in the “<a href="/blog/built-with/">Built with</a>” template.</p><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">widths</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">520</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span>
64<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">sizes</span> <span class="token operator">=</span> <span class="token string">'(max-width: 615px) 50vw, 100vw'</span> <span class="token delimiter punctuation">%}</span></span>
65
66<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token string">"/assets/images/screenshots/"</span> <span class="token operator">+</span> <span class="token variable">site</span><span class="token punctuation">.</span><span class="token variable">filename</span> <span class="token operator">+</span> <span class="token string">".jpg"</span><span class="token punctuation">,</span> <span class="token variable">site</span><span class="token punctuation">.</span><span class="token variable">name</span><span class="token punctuation">,</span> <span class="token variable">null</span><span class="token punctuation">,</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span> <span class="token variable">null</span><span class="token punctuation">,</span> <span class="token variable">null</span><span class="token punctuation">,</span> <span class="token variable">widths</span><span class="token punctuation">,</span> <span class="token variable">sizes</span> <span class="token delimiter punctuation">%}
66</span></span></code></pre><h3 id="named-parameters-shortcode"><a href="#named-parameters-shortcode" class="heading-anchor">Named Parameters Shortcode</a></h3><p>Remembering the order of the arguments is a bit of a pain, so I added a second shortcode: <code>imageKeys</code>.</p><p>This shortcode allows us to specify parameters in any order or only include the ones we need to customize. We need to pass the parameters as a <code>JSON</code> object with the key-value pairs.</p><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">imageKeys</span> <span class="token punctuation">{</span>
67  <span class="token string">"src"</span><span class="token punctuation">:</span> <span class="token string">"/assets/images/gallery/asturias-3.jpg"</span><span class="token punctuation">,</span>
68  <span class="token string">"alt"</span><span class="token punctuation">:</span> <span class="token string">"A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains"</span><span class="token punctuation">,</span>
69  <span class="token string">"caption"</span><span class="token punctuation">:</span> <span class="token string">"An example for the named parameters shortcode."</span><span class="token punctuation">,</span>
70  <span class="token string">"loading"</span><span class="token punctuation">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span>
71  <span class="token string">"containerClass"</span><span class="token punctuation">:</span> <span class="token string">"text-center"</span><span class="token punctuation">,</span>
72  <span class="token string">"imageClass"</span><span class="token punctuation">:</span> <span class="token string">"grayscale"</span><span class="token punctuation">,</span>
73  <span class="token string">"widths"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">400</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
74  <span class="token string">"sizes"</span><span class="token punctuation">:</span> <span class="token string">"(min-width:30em) 50vw, 100vw"</span><span class="token punctuation">,</span>
75  <span class="token string">"formats"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"webp"</span><span class="token punctuation">,</span> <span class="token string">"jpeg"</span><span class="token punctuation">]</span>
76<span class="token punctuation">}</span> <span class="token delimiter punctuation">%}</span></span></code></pre><figure slot="image" class="text-center"><picture><source type="image/webp" srcset="/assets/images/asturias-3-200w.webp 200w, /assets/images/asturias-3-400w.webp 400w" sizes="(min-width:30em) 50vw, 100vw"><source type="image/jpeg" srcset="/assets/images/asturias-3-200w.jpeg 200w, /assets/images/asturias-3-400w.jpeg 400w" sizes="(min-width:30em) 50vw, 100vw"><img src="/assets/images/asturias-3-400w.jpeg" width="400" height="265" alt="A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains" loading="lazy" decoding="async" class="grayscale"></picture><figcaption>An example for the named parameters shortcode.</figcaption></figure><p><strong>Example:</strong> if we only need to customize <code>alt</code> text and <code>sizes</code>:</p><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">imageKeys</span> <span class="token punctuation">{</span>
77  <span class="token string">"sizes"</span><span class="token punctuation">:</span> <span class="token string">'(min-width:30em) 50vw, 100vw'</span><span class="token punctuation">,</span>
78  <span class="token string">"alt"</span><span class="token punctuation">:</span> <span class="token string">"A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains"</span><span class="token punctuation">,</span>
79  <span class="token string">"src"</span><span class="token punctuation">:</span> <span class="token string">"/assets/images/photo.jpg"</span>
80<span class="token punctuation">}</span> <span class="token delimiter punctuation">%}
80</span></span></code></pre><p>The shortcodes are defined in <code>src/_config/shortcodes/image.js</code>. They also set <code>slot="image"</code> on their container element, so they can be used with any WebC component that contains a <code>&lt;slot name="image"&gt;&lt;/slot&gt;</code>, see <code>src/_includes/webc/custom-card.web</code> for example.</p><p>Since we are using them alongside the <a href="#html-transform">Image HTML Transform</a> method, the shortcodes add <code>eleventy:ignore</code> to the <code>&lt;img&gt;</code> attributes so the images aren’t processed twice.</p><h2 id="comparing-shortcode-and-html-transform"><a href="#comparing-shortcode-and-html-transform" class="heading-anchor">Comparing Shortcode and HTML Transform</a></h2><p>The shortcode can be much terser than the HTML syntax, while the HTML syntax is more readable and has a well known structure.</p><p><strong>These two approaches produce (almost) the same output:</strong></p><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token variable">image</span><span class="token punctuation">,</span> <span class="token variable">alt</span> <span class="token keyword">or</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token variable">credit</span><span class="token punctuation">,</span> <span class="token string">"eager"</span><span class="token punctuation">,</span> <span class="token string">"feature"</span><span class="token punctuation">,</span> <span class="token string">"grayscale"</span> <span class="token delimiter punctuation">%}</span></span>
81
82<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feature<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
83  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">image</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">alt</span> <span class="token keyword">or</span> <span class="token string">''</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eager<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sync<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grayscale<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
84  <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">credit</span> <span class="token delimiter punctuation">%}</span></span>
85    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">&gt;</span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">credit</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">&gt;</span></span>
86  <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}
86</span></span>
87<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figure</span><span class="token punctuation">&gt;</span></span></code></pre><figure slot="image" class="feature"><picture><source type="image/avif" srcset="/assets/images/asturias-1-650w.avif 650w, /assets/images/asturias-1-960w.avif 960w, /assets/images/asturias-1-1400w.avif 1400w" sizes="100vw"><source type="image/webp" srcset="/assets/images/asturias-1-650w.webp 650w, /assets/images/asturias-1-960w.webp 960w, /assets/images/asturias-1-1400w.webp 1400w" sizes="100vw"><source type="image/jpeg" srcset="/assets/images/asturias-1-650w.jpeg 650w, /assets/images/asturias-1-960w.jpeg 960w, /assets/images/asturias-1-1400w.jpeg 1400w" sizes="100vw"><img src="/assets/images/asturias-1-1400w.jpeg" width="1400" height="1050" alt="A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape" loading="eager" decoding="sync" class="grayscale"></picture><figcaption>Example image using the positional shortcode</figcaption></figure><figure class="feature"><picture><source type="image/webp" srcset="/img/Y4zzqT6El3-2000.webp" sizes="100vw"><img loading="eager" decoding="sync" src="/img/Y4zzqT6El3-2000.jpeg" alt="A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape" width="2000" height="1500" class="grayscale"></picture><figcaption>Example image using the HTML syntax</figcaption></figure><h2 id="animated-images"><a href="#animated-images" class="heading-anchor">Animated images</a></h2><p>Animated GIF and WebP sources need <code>sharpOptions: { animated: true }</code> on Eleventy Image (currently set for both the HTML Transform plugin and the image shortcodes). When the source has multiple frames, Image v6+ keeps only animation-friendly output formats (typically WebP and/or GIF) from the <code>formats</code> list.</p><p><img src="/img/9KV2UpDfry-88.webp" alt="Built with Eleventy animated badge" loading="lazy" decoding="async" width="88" height="31"></p><p>(Badge by <a href="https://chrisburnell.com/note/eleventy-animated-88x31/" rel="noopener">Chris Burnell</a>. For crisp pixel art, use <code>image-rendering: pixelated</code>.)</p><p>More:</p><ul><li><a href="https://www.11ty.dev/docs/plugins/image/" rel="noopener">https://www.11ty.dev/docs/plugins/image/</a></li><li><a href="https://www.youtube.com/watch?v=e0OHgC677ec" rel="noopener">https://www.youtube.com/watch?v=e0OHgC677ec</a></li><li><a href="https://piccalil.li/blog/the-end-of-responsive-images/" rel="noopener">https://piccalil.li/blog/the-end-of-responsive-images/</a></li><li><a href="https://www.aleksandrhovhannisyan.com/blog/eleventy-image-transform/" rel="noopener">https://www.aleksandrhovhannisyan.com/blog/eleventy-image-transform/</a></li><li><a href="https://coryd.dev/posts/2024/setting-up-image-transforms-in-eleventy" rel="noopener">https://coryd.dev/posts/2024/setting-up-image-transforms-in-eleventy</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes</a></li><li><a href="https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/" rel="noopener">https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/</a></li></ul><hr><p class="text-step-min-1"><a href="https://github.com/madrilene/eleventy-excellent/tree/main/./src/posts/2025/2025-01-09-post-with-image/post-with-image.md">View this page on GitHub</a>.</p></div><div hidden class="h-entry"><a href="https://eleventy-excellent.netlify.app/blog/post-with-an-image/" class="u-url">Post with an image</a> <a rel="author" href="https://eleventy-excellent.netlify.app" class="p-name u-url">Lene Saile</a> <img src="https://eleventy-excellent.netlify.app/icon-512x512.png" alt="Lene Saile" class="u-author h-card"></div></div></main><footer class="site-footer mt-l-xl p-s-m"><div class="wrapper"><div class="cluster gutter-xs"><nav aria-label="Complementary" class="cluster text-step-0">© 2026 <a href="/"><span class="font-display">Eleventy Excellent</span> <small>4.8.0</small> </a><a href="/styleguide/">Style guide</a> <a href="/imprint/">Imprint</a> <a href="/privacy/">Privacy</a> <a href="/accessibility/">Accessibility</a></nav><nav aria-label="Platforms" class="cluster"><a href="/feed.xml" rel="alternate" type="application/atom+xml" data-icon class="button"><span class="visually-hidden">Atom Feed</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg> </a><a data-icon href="https://github.com/madrilene/eleventy-excellent" rel="me" class="no-indicator button"><span class="visually-hidden">Github</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg> </a><a data-icon href="https://front-end.social/@lene" rel="me" class="no-indicator button"><span class="visually-hidden">Mastodon</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1">
87<path d="M21.887 5.996c-.308-2.314-2.298-4.14-4.655-4.492-.399-.059-1.906-.278-5.398-.278h-.026c-3.495 0-4.243.219-4.642.278-2.295.345-4.387 1.982-4.897 4.326-.242 1.153-.268 2.433-.222 3.606.065 1.684.078 3.361.228 5.039a24 24 0 0 0 .543 3.304c.484 2.009 2.439 3.68 4.355 4.359 2.049.71 4.256.829 6.368.342q.347-.085.69-.193c.513-.165 1.114-.351 1.559-.676q.009-.006.013-.016.006-.01.007-.024v-1.624s0-.013-.007-.02q-.002-.01-.013-.016l-.02-.01h-.019a17.4 17.4 0 0 1-4.132.49c-2.397 0-3.041-1.153-3.224-1.63a5.3 5.3 0 0 1-.281-1.287q0-.01.003-.019.002-.012.013-.017l.02-.01h.023c1.33.325 2.697.491 4.067.491.33 0 .657 0 .987-.01 1.376-.04 2.828-.11 4.184-.378.033-.007.069-.013.098-.02 2.138-.418 4.172-1.724 4.378-5.032.006-.129.026-1.365.026-1.498 0-.461.147-3.258-.023-4.979z"></path><path fill="currentColor" stroke-width="1" d="M6.061 7.288c0-.676.533-1.219 1.193-1.219.661 0 1.193.547 1.193 1.219 0 .673-.532 1.22-1.193 1.22-.66 0-1.193-.547-1.193-1.22Z"></path></svg> </a><a data-icon href="https://bsky.app/profile/lenesaile.com" rel="me" class="no-indicator button"><span class="visually-hidden">Bluesky</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height=".9em" fill="var(--color-bg)" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path></svg> </a><a data-icon href="https://ko-fi.com/lenesaile" rel="me" class="no-indicator button"><span class="visually-hidden">Kofi</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path stroke-linecap="round" stroke-linejoin="round" d="M18 3h1c1.06 0 2.078.527 2.828 1.464C22.578 5.402 23 6.674 23 8s-.421 2.598-1.172 3.536C21.078 12.473 20.061 13 19 13h-1M1 3h17v12.461c0 1.47-.512 2.878-1.423 3.917-.91 1.038-2.146 1.622-3.434 1.622H5.857c-1.288 0-2.523-.584-3.434-1.622S1 16.93 1 15.46z"></path><path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13.288 8.707a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-3.44 0c-.95.939-1 2.527.2 3.736L9.497 16l3.6-3.547c1.2-1.208 1.14-2.797.19-3.736v-.01Z"></path></svg></a></nav></div><is-land on:idle><div role="region" aria-labelledby="theme-switcher-label" data-theme-switcher style="--cluster-horizontal-alignment: center" class="theme-switch | cluster gutter-s mt-xs"><h2 id="theme-switcher-label">Theme</h2><button id="light-theme-toggle" data-theme="light" data-ghost-button data-small-button class="button"><span>light</span></button> <button id="dark-theme-toggle" data-theme="dark" data-ghost-button data-small-button class="button"><span>dark</span></button></div></is-land><aside class="creator | cluster gutter-2xs text-step-min-1 mt-xl">Made with <span class="visually-hidden">love</span> <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" focusable="false" tabindex="-1"><path d="M7 3C4.239 3 2 5.216 2 7.95c0 2.207.875 7.445 9.488 12.74a.99.99 0 0 0 1.024 0C21.125 15.395 22 10.157 22 7.95 22 5.216 19.761 3 17 3s-5 3-5 3-2.239-3-5-3"></path></svg> and <a href="https://www.11ty.dev/" class="no-indicator"><span class="visually-hidden">Eleventy</span> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 29 29" aria-hidden="true" focusable="false" tabindex="-1"><path fill="currentColor" d="M9.156 22.425q-.324 0-.324-.878V7.08q0-.419-.168-.394l-1.035.263q-.284.026-.284-.576V5.116q0-.523.31-.588l3.415-.89a.5.5 0 0 1 .116-.012q.284 0 .283.615V21.55q0 .878-.336.877zm8.846.027q-.518 0-.899-.073a2.4 2.4 0 0 1-.795-.328 2 2 0 0 1-.68-.7q-.265-.446-.432-1.245t-.168-1.899v-6.714q0-.263-.142-.263h-.802q-.324 0-.324-.627v-.708q0-.64.324-.641h.803q.14 0 .141-.353l.233-5.093q.039-.693.336-.693h1.295q.324 0 .324.693v5.093q-.001.354.156.353h1.65q.324 0 .324.641v.708q0 .627-.324.627h-1.655q-.09 0-.122.046-.032.045-.031.217v6.756q0 .759.096 1.264.097.504.283.739.188.235.375.313.188.08.459.078h.917q.349.001.348.484v.785q0 .537-.374.537zm4.964 1.57q.296 0 .516-.49.22-.493.221-1.396 0-.211-.26-1.454l-2.536-10.67a2 2 0 0 1-.026-.29q0-.47.195-.47h1.566q.18 0 .297.123.12.124.18.503l1.681 9.008q.051.157.065.158.052-.002.053-.144l1.319-8.983q.052-.392.16-.53a.34.34 0 0 1 .28-.138h1.085q.22 0 .22.51 0 .118-.026.302l-2.303 12.138q-.271 1.506-.595 2.305-.324.798-.726 1.086a1.85 1.85 0 0 1-1.061.302h-.13q-1.048 0-1.422-.564-.104-.118-.103-.603 0-.97.31-.97.026 0 .466.131.445.138.574.136M2.648 22.45q-.324.001-.324-.877V7.105q0-.42-.169-.394l-1.035.262Q.836 7 .837 6.397V5.14q0-.521.31-.588l3.417-.892a.5.5 0 0 1 .116-.012q.284 0 .283.615v17.309q0 .878-.336.877z"></path></svg> </a>by <a href="https://www.lenesaile.com">Lene Saile</a></aside></div></footer>
87<script type="module" src="/assets/scripts/components/custom-easteregg.js"></script>
87<custom-easteregg></custom-easteregg></body>
88</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.