feat: preloaded placeholder image

Author: FireIsGood

public/previewplaceholder.webp

@@ -60,6 +60,9 @@ const { title, description, image } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
+<!-- Placeholder preloading -->
+<link rel="preload" href="/previewplaceholder.webp" as="image" />
+
 <!-- Fix theme FOUC -->
 <script is:inline>
   // This must be inline to stop FOUC

src/components/BaseHead.astro

@@ -35,6 +35,9 @@ const post = Astro.props;
     aspect-ratio: 2 / 1;
     border-radius: var(--pico-border-radius);
     box-shadow: 0 0 4px rgb(from var(--pico-muted-color) r g b / 40%);
+    background-image: url("/previewplaceholder.webp");
+    background-size: cover;
+    background-position: center;
   }
   .hero-image:not(:has(img)) {
     display: grid;

src/components/PostPreview.astro

@@ -110,6 +110,9 @@ const images = import.meta.glob("@/images/*");
     aspect-ratio: 2 / 1;
     border-radius: var(--pico-border-radius);
     box-shadow: 0 0 4px rgb(from var(--pico-muted-color) r g b / 40%);
+    background-image: url("/previewplaceholder.webp");
+    background-size: cover;
+    background-position: center;
   }
   .hero-image:not(:has(img)) {
     display: grid;

src/components/ToolList.astro

@@ -62,6 +62,9 @@ const titlePrefixed = `FireIsBlog - ${title}`;
 <style>
   .cover {
     margin-bottom: var(--pico-spacing);
+    background-image: url("/previewplaceholder.webp");
+    background-size: cover;
+    background-position: center;
   }
   .cover img {
     max-height: 80vh;