From 6d1c644f2c66b70dd4498fb77f66d3453fbd0537 Mon Sep 17 00:00:00 2001
From: BuyMyMojo <hello@buymymojo.net>
Date: Fri, 20 Dec 2024 15:29:15 +1100
Subject: [PATCH] feat(NavHeader.astro): use image-set to supply multiple file
 types for heder background

I missed image-sets in looking for a solution to this, thanks @ackwell for spotting this!
---
 src/components/NavHeader.astro | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/NavHeader.astro b/src/components/NavHeader.astro
index bb7d28f..14b07c4 100644
--- a/src/components/NavHeader.astro
+++ b/src/components/NavHeader.astro
@@ -6,10 +6,16 @@ import Partition from "./Partition.astro";
 import myBackground from "../img/sites/avatar-ht-f.png"
 
 const optimizedBackground = await getImage({src: myBackground, format: 'avif', quality: 50, width: 680})
+const optimizedBackgroundLQ = await getImage({src: myBackground, format: 'jpeg', quality: 60, width: 680})
 ---
-
+<style is:inline>
+    image-set(
+        url("image1.avif") type("image/avif"),
+        url("image2.jpg") type("image/jpeg")
+    );
+</style>
 <div
-    style={`width: 670px; border: 1px solid var(--border); background-image: url('${optimizedBackground.src}');`}
+    style={`width: 670px; border: 1px solid var(--border); background-image: image-set(url('${optimizedBackground.src}') type("image/avif"), url('/static/img/sites/avatar-ht-f.webp') type("image/webp"), url('${optimizedBackgroundLQ.src}') type("image/jpeg"));`}
     class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
     >
     <Picture