Optimize responsive hero loading

Author: Hilo-Hilo

public/hero/compbio-research-atlas-dark-1200.webp

@@ -9,7 +9,7 @@ const sourcePath = path.join(
   "assets-src/hero/compbio-research-atlas-chroma-source.png",
 );
 const outputDirectory = path.join(projectRoot, "public/hero");
-const outputWidths = [800, 1600];
+const outputWidths = [800, 1200, 1600];
 
 const clamp = (value, minimum = 0, maximum = 1) =>
   Math.max(minimum, Math.min(maximum, value));

public/hero/compbio-research-atlas-light-1200.webp

@@ -1,17 +1,23 @@
 import { cn } from "@/lib/utils";
 import { publicAssetPath } from "@/lib/publicAsset";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-const heroAssetPath = (theme: "light" | "dark", width: 800 | 1600) =>
+const heroAssetPath = (theme: "light" | "dark", width: 800 | 1200 | 1600) =>
   publicAssetPath(`/hero/compbio-research-atlas-${theme}-${width}.webp`);
 
+const heroSrcSet = (theme: "light" | "dark") =>
+  [800, 1200, 1600]
+    .map((width) => `${heroAssetPath(theme, width as 800 | 1200 | 1600)} ${width}w`)
+    .join(", ");
+
 const heroImageProps = {
   alt: "",
   width: 1600,
   height: 1200,
   decoding: "async" as const,
   draggable: false,
+  fetchpriority: "high" as const,
   loading: "eager" as const,
   sizes: "(min-width: 1024px) 72vw, (min-width: 640px) 110vw, 135vw",
 };
@@ -22,34 +28,42 @@ interface HeroScienceGraphicProps {
 
 export const HeroScienceGraphic = ({ className }: HeroScienceGraphicProps) => {
   const { resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
+  const [darkMedia, setDarkMedia] = useState("(prefers-color-scheme: dark)");
+  const themeReady = useRef(false);
 
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    if (!resolvedTheme) return;
 
-  const documentTheme =
-    mounted && document.documentElement.classList.contains("dark")
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
       ? "dark"
       : "light";
-  const theme = mounted && (resolvedTheme === "dark" || (!resolvedTheme && documentTheme === "dark"))
-    ? "dark"
-    : "light";
+
+    if (!themeReady.current) {
+      themeReady.current = true;
+      if (resolvedTheme === systemTheme) return;
+    }
+
+    setDarkMedia(resolvedTheme === "dark" ? "all" : "not all");
+  }, [resolvedTheme]);
 
   return (
     <span
       className={cn("hero-science-art block", className)}
       aria-hidden="true"
     >
-      <img
-        {...heroImageProps}
-        src={heroAssetPath(theme, 1600)}
-        srcSet={`${heroAssetPath(theme, 800)} 800w, ${heroAssetPath(theme, 1600)} 1600w`}
-        className={cn(
-          "h-auto w-full select-none object-contain transition-opacity duration-200",
-          mounted ? "opacity-100" : "opacity-0",
-        )}
-      />
+      <picture>
+        <source
+          media={darkMedia}
+          srcSet={heroSrcSet("dark")}
+          sizes={heroImageProps.sizes}
+        />
+        <img
+          {...heroImageProps}
+          src={heroAssetPath("light", 800)}
+          srcSet={heroSrcSet("light")}
+          className="h-auto w-full select-none object-contain"
+        />
+      </picture>
     </span>
   );
 };

scripts/build-hero-art.mjs

@@ -326,7 +326,6 @@
 
   .hero-science-art {
     transform-origin: center;
-    animation: hero-science-drift 10s ease-in-out infinite;
   }
 
   .site-logo-system-dark {
@@ -444,17 +443,6 @@
   }
 }
 
-@keyframes hero-science-drift {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  50% {
-    transform: translate3d(0, -5px, 0);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;