test nextgen images on work/mastodon

content/work/mastodon/index.html

@@ -56,7 +56,9 @@ cover: "/images/cover/mastodocs.jpg"
 
 <article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
 	<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
-		<img src="/images/people/gargron.jpg" width=48 height=48 alt="Gargron's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;">
+		<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
+			{{< people/gargron >}}
+		</div>
 		<div style="line-height: 1.5">
 			<div style="font-weight: 500;">Eugen</div>
 			<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
@@ -88,7 +90,9 @@ cover: "/images/cover/mastodocs.jpg"
 
 <article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;">
 	<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
-		<img src="/images/people/gargron.jpg" width=48 height=48 alt="Gargron's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;">
+		<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
+			{{< people/gargron >}}
+		</div>
 		<div style="line-height: 1.5">
 			<div style="font-weight: 500;">Eugen</div>
 			<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
@@ -409,7 +413,7 @@ cover: "/images/cover/mastodocs.jpg"
 				bless you for being here to work on the docs btw it's a big relief
 			</blockquote>
 			<div class="attribution">
-				<img src="/images/people/gargron.jpg" alt="Gargron's avatar">
+				{{< people/gargron >}}
 				<cite><em>Eugen "Gargron" Rochko</em><br>Mastodon founder<br>& lead developer</cite>
 			</div>
 			<section class="benefit one">
@@ -445,7 +449,7 @@ cover: "/images/cover/mastodocs.jpg"
 	<section class="section" id="cta">
 		<div class="container">
 			<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
-			<img src="/images/cover/mastodocs.png" alt="Mastodon documentation landing page">
+			<img src="/images/cover/mastodocs.jpg" alt="Mastodon documentation landing page">
 			<div class="buttons">
 				<a href="https://docs.joinmastodon.org" class="demo button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>Check out the live
 					version</a>

layouts/shortcodes/people/gargron.html

@@ -0,0 +1,5 @@
+<picture>
+	<source srcset="/images/people/gargron.avif" type="image/avif">
+	<source srcset="/images/people/gargron.webp" type="image/webp">
+	<img src="/images/people/gargron.jpg" alt="Gargron's avatar" width=48 height=48>
+</picture>