refactor(NavHeader.astro): ⚡ Optimise the header background image size and resolution

Moved to using Astro's `getImage()` function to serve the image as an avif image wich was been scaled down so it's isn't larger resolution than it need to be

.vscode/settings.json

@@ -2,6 +2,7 @@
     "conventionalCommits.scopes": [
         "FriendLink.astro",
         "astro.config.mjs",
-        ".vscode"
+        ".vscode",
+        "NavHeader.astro"
     ]
 }

src/components/NavHeader.astro

@@ -1,12 +1,16 @@
 ---
-import { Picture } from "astro:assets";
+import { Picture, getImage } from "astro:assets";
 import pfp from "../img/sites/avatar.png";
 import Partition from "./Partition.astro";
+
+import myBackground from "../img/sites/avatar-ht-f.png"
+
+const optimizedBackground = await getImage({src: myBackground, format: 'avif', quality: 40, width: 680})
 ---
 
 <div
-    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center backdrop-blur-3xl bg-center bg-[url('/static/img/sites/avatar-ht-f.webp')]"
+    style={`width: 670px; border: 1px solid var(--border); background-image: url('${optimizedBackground.src}');`}
-    style="width: 670px; border: 1px solid var(--border);"
+    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
     >
     <Picture
         src={pfp}