Read the Eleventy API Services documentation. Built with Eleventy Serverless. Save a bookmarklet to the Eleventy API Explorer.
IndieWeb Avatar 11ty/api-indieweb-avatar
<img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/"
alt="IndieWeb avatar for https://www.zachleat.com/web/eleventy-render-plugin/"
width="60"
height="60"
decoding="async"
loading="lazy">OpenGraph Image 11ty/api-opengraph-image
This is using <picture> with multiple formats and image sizes. Make sure you set the sizes attribute correctly so the browser loads the correct one!
<picture>
<source type="image/webp" srcset="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/small/webp/ 375w, https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/medium/webp/ 650w" sizes="100vw">
<source type="image/jpeg" srcset="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/small/jpeg/ 375w, https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/medium/jpeg/ 650w" sizes="100vw">
<img alt="OpenGraph image for https://www.zachleat.com/web/eleventy-render-plugin/" loading="lazy" decoding="async" src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/small/jpeg/" width="650" height="341">
</picture>Screenshot 11ty/api-screenshot
Small viewport (default)
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/small/"
alt="Screenshot of https://www.zachleat.com/web/eleventy-render-plugin/"
decoding="async"
width="375"
height="375"
decoding="async"
loading="lazy">Medium viewport
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/medium/"
alt="Screenshot of https://www.zachleat.com/web/eleventy-render-plugin/"
width="650"
height="650"
decoding="async"
loading="lazy">Large viewport
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/large/"
alt="Screenshot of https://www.zachleat.com/web/eleventy-render-plugin/"
width="1024"
height="1024"
decoding="async"
loading="lazy">OpenGraph viewport
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-render-plugin%2F/opengraph/"
alt="OpenGraph image sized Screenshot of https://www.zachleat.com/web/eleventy-render-plugin/"
width="1200"
height="630"
decoding="async"
loading="lazy">