Optimize page images and remove unused assets

src/components/layout/footer.tsx

@@ -39,8 +39,10 @@ export function Footer() {
             skratchdot{" "}
             <img
               className="inline size-4"
+              width={16}
+              height={16}
               alt=""
-              src={`${import.meta.env.BASE_URL}img/favicon.ico`}
+              src={`${import.meta.env.BASE_URL}img/favicon.png`}
             />
           </TextLink>
         </div>

src/components/layout/site-document.tsx

@@ -14,9 +14,10 @@ export function SiteDocument({ children }: { children: ReactNode }) {
         <meta name="description" content="audio, sorting algorithms, visualizations" />
         <meta name="author" content="skratchdot.com" />
         <link
-          rel="shortcut icon"
+          rel="icon"
           type="image/png"
-          href={`${import.meta.env.BASE_URL}img/favicon.ico`}
+          sizes="32x32"
+          href={`${import.meta.env.BASE_URL}img/favicon.png`}
         />
         <link rel="stylesheet" href={stylesheet} />
         <HeadContent />

src/components/visualizations/player-chart.tsx

@@ -51,7 +51,7 @@ export function PlayerChart({ runtime, id }: Props & { id: PlayerId }) {
       id={`${id}-svg`}
       aria-label={id === "base" ? "Input data visualization" : "Sorting visualization"}
       className={cn(
-        "h-full w-full rounded-lg border border-neutral-300 bg-neutral-100 bg-[url('/img/gradient_squares.png')] bg-center bg-repeat",
+        "h-full w-full rounded-lg border border-neutral-300 bg-neutral-100 bg-[url('/img/gradient_squares.webp')] bg-center bg-repeat",
         id === "base" && "cursor-pointer touch-none",
       )}
       viewBox={flat ? `0 0 ${Math.max(1, frames.length - 1)} ${Math.max(1, size)}` : undefined}

src/routes/index.tsx

@@ -37,4 +37,17 @@ function Home() {
   );
 }
 
-export const Route = createFileRoute("/")({ component: Home });
+export const Route = createFileRoute("/")({
+  component: Home,
+  head: () => ({
+    links: [
+      {
+        rel: "preload",
+        as: "image",
+        type: "image/webp",
+        href: `${import.meta.env.BASE_URL}img/gradient_squares.webp`,
+        fetchPriority: "high",
+      },
+    ],
+  }),
+});