Merge pull request #13106 from ethereum/performance/optimize-hero-images

Performance: optimize hero images

Author: nhsz

src/components/Hero/ContentHero/index.tsx

@@ -26,7 +26,8 @@ const ContentHero = (props: ContentHeroProps) => {
             blurDataURL={blurDataURL}
             width={760}
             height={451}
-            sizes="(max-width: 992px) 100vw, 50vw"
+            // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+            sizes="(max-width: 992px) 100vw, 760px"
             boxSize="full"
             style={{ objectFit: "contain" }}
             flex={{ base: "1 1 100%", md: "none" }}

src/components/Hero/HubHero/index.tsx

@@ -26,7 +26,8 @@ const HubHero = ({
         src={heroImg}
         alt=""
         priority
-        sizes="100vw"
+        // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+        sizes="(max-width: 1504px) 100vw, 1504px"
         style={{ width: "100vw", objectFit: "cover" }}
         h={{
           base: "192px",

src/components/PageHero.tsx

@@ -156,7 +156,8 @@ const PageHero = ({
       >
         <Image
           src={image}
-          sizes="(max-width: 992px) 100vw, 50vw"
+          // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+          sizes="(max-width: 992px) 100vw, 624px"
           style={{
             width: "100%",
             height: "auto",

src/layouts/Roadmap.tsx

@@ -185,6 +185,8 @@ export const RoadmapLayout = ({
               style={{ objectFit: "contain" }}
               width={1504}
               height={336}
+              // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+              sizes="(max-width: 992px) 100vw, 720px"
               priority
             />
           </Center>

src/layouts/UseCases.tsx

@@ -216,6 +216,7 @@ export const UseCasesLayout = ({
           width={1200}
           height={610}
           style={{ objectFit: "cover" }}
+          // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
           sizes="(max-width: 992px) 100vw, 750px"
           priority
           alignSelf={{

src/pages/eth.tsx

@@ -396,7 +396,8 @@ const EthPage = () => {
           <Hero>
             <Image
               src={eth}
-              width={800}
+              // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+              sizes="(max-width: 768px) 100vw, 800px"
               alt={t("page-eth-whats-eth-hero-alt")}
               priority
             />

src/pages/wallets/find-wallet.tsx

@@ -165,7 +165,8 @@ const FindWalletPage = () => {
         <Center w={{ base: "full", sm: "50%" }}>
           <Image
             src={HeroImage}
-            width={500}
+            // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+            sizes="(max-width: 480px) 100vw, 500px"
             alt=""
             priority
             style={{

src/pages/what-is-ethereum.tsx

@@ -347,6 +347,8 @@ const WhatIsEthereumPage = ({
             <Image
               src={hero}
               alt={t("page-what-is-ethereum-alt-img-bazaar")}
+              // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
+              sizes="(max-width: 992px) 100vw, 750px"
               priority
             />
           </Hero>