Load appropriately sized images

Also adds an itemprop for the header u-url.

src/lib/components/Header.svelte

@@ -52,10 +52,10 @@
 </script>
 
 <header class="h-card">
-	<link class="u-url" href="/" />
-	<picture class="me" on:touchstart|preventDefault={(e) => tapCount += 1} style:rotate={isPrompting ? "-" + ((tapCount - 5) * 2) + "deg" : "0deg"}>
-		<source type="image/avif" srcset={meAvif} />
-		<source type="image/webp" srcset={meWebp} />
+	<link class="u-url" href="/" itemprop="author" />
+	<picture class="me" on:touchstart|preventDefault={(e) => tapCount += 1} style:transform={`rotate(${isPrompting ? "-" + ((tapCount - 5) * 2) + "deg" : "0deg"})`}>
+		<source type="image/avif" sizes="12.54em" srcset={meAvif} />
+		<source type="image/webp" sizes="12.54em" srcset={meWebp} />
 		<img src={mePng} class="p-name" width="400" height="418" alt="Curtis Parfitt-Ford" />
 	</picture>
 	<div class="header-text">

src/lib/components/blog/PostImage.svelte

@@ -7,8 +7,14 @@
 
 {#if post.getImage()}
 	<picture class:headerBg>
-		<source type="image/avif" srcset={post.getImage()?.avifSrcsetImage} />
-		<source type="image/webp" srcset={post.getImage()?.webpSrcsetImage} />
+		<!--
+			We need a width to give here, but this component is used in different places.
+			For now, we'll give the width of 80% of the browser viewport, as thanks to the
+			container design, the image will never be more than that, and that will keep us
+			loading something appropriately-sized.
+		-->
+		<source type="image/avif" sizes="75vw" srcset={post.getImage()?.avifSrcsetImage} />
+		<source type="image/webp" sizes="75vw" srcset={post.getImage()?.webpSrcsetImage} />
 		<img
 			src={post.getImage()?.fallbackImage}
 			alt={post.getImage()?.alt}