refactor: home hero source and srcset

add trimmed version for 2xl screens where top/bottom never display; drop quality progressively on smaller devices

Author: wackerow

app/[locale]/page.tsx

@@ -92,7 +92,6 @@ import { fetchRSS } from "@/lib/api/fetchRSS"
 import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
 import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
 import EventFallback from "@/public/images/events/event-placeholder.png"
-import Hero from "@/public/images/home/hero.png"
 
 const BentoCardSwiper = dynamic(
   () => import("@/components/Homepage/BentoCardSwiper"),
@@ -444,7 +443,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           </Link>
         </p>
       </BannerNotification>
-      <HomeHero heroImg={Hero} className="w-full" />
+      <HomeHero />
       <div className="w-full space-y-32 px-4 md:mx-6 lg:space-y-48">
         <div className="my-20 grid w-full grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-4 md:gap-x-10">
           {subHeroCTAs.map(

public/images/home/hero-2xl.png

@@ -1,34 +1,67 @@
+import { getImageProps } from "next/image"
+import { getLocale, getTranslations } from "next-intl/server"
+
 import type { ClassNameProp, CommonHeroProps } from "@/lib/types"
 
 import LanguageMorpher from "@/components/Homepage/LanguageMorpher"
-import { Image } from "@/components/Image"
 
-import useTranslation from "@/hooks/useTranslation"
+import { cn } from "@/lib/utils/cn"
+import { breakpointAsNumber } from "@/lib/utils/screen"
+
+import heroBase from "@/public/images/home/hero.png"
+import hero2xl from "@/public/images/home/hero-2xl.png"
 
 export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> & ClassNameProp
 
-const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
-  const { t } = useTranslation("page-index")
+const HomeHero = async ({ className }: HomeHeroProps) => {
+  const locale = getLocale()
+  const t = await getTranslations({ locale, namespace: "page-index" })
+
+  const alt = t("page-index-hero-image-alt")
+
+  const common = {
+    alt,
+    sizes: `(max-width: ${breakpointAsNumber["2xl"]}px) 100vw, ${breakpointAsNumber["2xl"]}px`,
+    priority: true,
+  }
+
+  const {
+    props: { srcSet: srcSet2xl },
+  } = getImageProps({ ...common, ...hero2xl, quality: 20 })
+
+  const {
+    props: { srcSet: srcSetMd },
+  } = getImageProps({ ...common, ...heroBase, quality: 10 })
+
+  const {
+    props: { srcSet: srcSetBase, ...rest },
+  } = getImageProps({ ...common, ...heroBase, quality: 5 })
 
   return (
-    <div className={className}>
-      <div className="h-[240px] md:h-[380px] lg:h-[480px]">
-        <Image
-          src={heroImg}
-          alt={t("page-index:page-index-hero-image-alt")}
-          // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
-          sizes="(max-width: 1504px) 100vw, 1504px"
-          className="h-full w-full object-cover"
-          quality={20}
-          priority
-        />
+    <div className={cn("w-full", className)}>
+      <div className="h-[240px] overflow-hidden md:h-[380px] lg:h-[480px]">
+        <picture>
+          <source
+            media={`(min-width: ${breakpointAsNumber["2xl"]}px)`}
+            srcSet={srcSet2xl}
+          />
+          <source
+            media={`(min-width: ${breakpointAsNumber["md"]}px) and (max-width: ${breakpointAsNumber["2xl"] - 1}px)`}
+            srcSet={srcSetMd}
+          />
+          <source
+            media={`(max-width: ${breakpointAsNumber["md"] - 1}px)`}
+            srcSet={srcSetBase}
+          />
+          <img {...rest} alt={alt} className="h-full w-full object-cover" />
+        </picture>
       </div>
       <div className="flex flex-col items-center border-t-[3px] border-primary-low-contrast px-4 py-10 text-center">
         <LanguageMorpher />
         <div className="flex flex-col items-center gap-y-5 lg:max-w-2xl">
-          <h1 className="font-black">{t("page-index:page-index-title")}</h1>
+          <h1 className="font-black">{t("page-index-title")}</h1>
           <p className="max-w-96 text-md text-body-medium lg:text-lg">
-            {t("page-index:page-index-description")}
+            {t("page-index-description")}
           </p>
         </div>
       </div>