diff --git a/app/[locale]/assets/_components/assets.tsx b/app/[locale]/assets/_components/assets.tsx
index 7b4fd39e058..b6802faef41 100644
--- a/app/[locale]/assets/_components/assets.tsx
+++ b/app/[locale]/assets/_components/assets.tsx
@@ -54,10 +54,10 @@ import finance from "@/public/images/finance_transparent.png"
 import future from "@/public/images/future_transparent.png"
 import hackathon from "@/public/images/hackathon_transparent.png"
 import communityHero from "@/public/images/heroes/community-hero.png"
-import developersHero from "@/public/images/heroes/developers-hub-hero.jpg"
+import developersHero from "@/public/images/heroes/developers-hub-hero.png"
 import garden from "@/public/images/heroes/garden.jpg"
 import guidesHero from "@/public/images/heroes/guides-hub-hero.jpg"
-import layer2Hero from "@/public/images/heroes/layer-2-hub-hero.jpg"
+import layer2Hero from "@/public/images/heroes/layer-2-hub-hero.png"
 import learnHero from "@/public/images/heroes/learn-hub-hero.png"
 import quizzesHub from "@/public/images/heroes/quizzes-hub-hero.png"
 import roadmapHero from "@/public/images/heroes/roadmap-hub-hero.jpg"
diff --git a/app/[locale]/empty/page.tsx b/app/[locale]/empty/page.tsx
new file mode 100644
index 00000000000..d24ea68a82a
--- /dev/null
+++ b/app/[locale]/empty/page.tsx
@@ -0,0 +1,24 @@
+import { getMetadata } from "@/lib/utils/metadata"
+
+import { routing } from "@/i18n/routing"
+
+const Page = async () => {
+  return <h1 className="text-center font-black">ethereum.org</h1>
+}
+
+export async function generateStaticParams() {
+  return routing.locales.map((locale) => ({
+    locale,
+  }))
+}
+
+export async function generateMetadata() {
+  return await getMetadata({
+    locale: "en",
+    slug: [""],
+    title: "ethereum.org",
+    description: "Empty page test",
+  })
+}
+
+export default Page
diff --git a/app/[locale]/hero/page.tsx b/app/[locale]/hero/page.tsx
new file mode 100644
index 00000000000..a149e4205ab
--- /dev/null
+++ b/app/[locale]/hero/page.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Image from "next/image"
+import { useTranslations } from "next-intl"
+
+import { Heading2 } from "@/components/MdComponents"
+
+import { breakpointAsNumber } from "@/lib/utils/screen"
+
+import heroImage from "@/public/images/home/hero.png"
+
+export default function HeroQualityDemo() {
+  const t = useTranslations("page-index")
+  const [selectedQualities, setSelectedQualities] = useState<number[]>([100, 5])
+  const [customHeight, setCustomHeight] = useState(300) // Default height in px
+  const [isMobile, setIsMobile] = useState(false)
+  const [useCustomHeight, setUseCustomHeight] = useState(false) // Toggle for custom height
+
+  // Check if mobile on mount
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768)
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  const alt = t("page-index-hero-image-alt")
+
+  // Generate quality values from 100% to 5% in 5% decrements
+  const qualityValues = Array.from({ length: 20 }, (_, i) => 100 - i * 5)
+
+  const toggleQuality = (quality: number) => {
+    setSelectedQualities(
+      (prev) =>
+        prev.includes(quality)
+          ? prev.filter((q) => q !== quality)
+          : [...prev, quality].sort((a, b) => b - a) // Keep sorted descending
+    )
+  }
+
+  const handleMouseResize = (
+    e: React.MouseEvent,
+    direction: "top" | "bottom"
+  ) => {
+    if (isMobile) return
+
+    const startY = e.clientY
+    const startHeight = customHeight
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const deltaY =
+        direction === "top"
+          ? startY - moveEvent.clientY
+          : moveEvent.clientY - startY
+      const newHeight = Math.max(100, Math.min(600, startHeight + deltaY))
+      setCustomHeight(newHeight)
+    }
+
+    const handleMouseUp = () => {
+      document.removeEventListener("mousemove", handleMouseMove)
+      document.removeEventListener("mouseup", handleMouseUp)
+      document.body.style.cursor = "default"
+      document.body.style.userSelect = "auto"
+    }
+
+    document.body.style.cursor = direction === "top" ? "n-resize" : "s-resize"
+    document.body.style.userSelect = "none"
+    document.addEventListener("mousemove", handleMouseMove)
+    document.addEventListener("mouseup", handleMouseUp)
+  }
+
+  const ImageContainer = ({
+    quality,
+    isComparison = false,
+  }: {
+    quality: number
+    isComparison?: boolean
+  }) => (
+    <div className="relative mx-auto w-full max-w-[1536px]">
+      {!isMobile && useCustomHeight && (
+        <>
+          <div
+            className="absolute left-0 right-0 top-0 z-10 h-2 cursor-n-resize hover:bg-primary/20"
+            onMouseDown={(e) => handleMouseResize(e, "top")}
+          />
+          <div
+            className="absolute bottom-0 left-0 right-0 z-10 h-2 cursor-s-resize hover:bg-primary/20"
+            onMouseDown={(e) => handleMouseResize(e, "bottom")}
+          />
+        </>
+      )}
+      <div
+        className={
+          useCustomHeight
+            ? "overflow-hidden"
+            : "h-[240px] overflow-hidden md:h-[380px] lg:h-[480px]"
+        }
+        style={useCustomHeight ? { height: `${customHeight}px` } : undefined}
+      >
+        <Image
+          src={heroImage}
+          alt={`${alt} (Quality: ${quality}%)`}
+          width={1536}
+          height={480}
+          quality={quality}
+          sizes={`(max-width: ${breakpointAsNumber["2xl"]}px) 100vw, ${breakpointAsNumber["2xl"]}px`}
+          className="h-full w-full object-cover"
+          priority={!isComparison && quality >= 80}
+        />
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="min-h-screen bg-background pb-20">
+      <div className="p-8 text-center">
+        <h1 className="mb-4 text-3xl font-bold">
+          Hero Image Quality Comparison
+        </h1>
+        <p className="text-body-medium">
+          Comparing the homepage hero image at different quality settings (100%
+          to 5% in 5% decrements). Check the boxes below to compare selected
+          qualities side-by-side.
+        </p>
+      </div>
+      <div className="sticky inset-x-auto top-20 z-sticky mx-auto mb-8 flex w-fit flex-col items-center rounded-2xl border bg-background/90 px-3 py-2">
+        {/* Custom Height Toggle */}
+        <div className="mb-4 flex items-center justify-center gap-4">
+          <label
+            htmlFor="custom-height-toggle"
+            className="flex cursor-pointer items-center gap-3"
+          >
+            <span className="block text-sm font-medium">Prod</span>
+            <div className="relative">
+              <input
+                id="custom-height-toggle"
+                type="checkbox"
+                checked={useCustomHeight}
+                onChange={(e) => setUseCustomHeight(e.target.checked)}
+                className="sr-only"
+              />
+              <div
+                className={`h-6 w-11 rounded-full transition-colors ${useCustomHeight ? "bg-primary" : "bg-gray-300"}`}
+              >
+                <div
+                  className={`h-5 w-5 transform rounded-full bg-white shadow-md transition-transform ${useCustomHeight ? "translate-x-5" : "translate-x-0"} ml-0.5 mt-0.5`}
+                ></div>
+              </div>
+            </div>
+            <span className="block text-sm font-medium">Play with height</span>
+          </label>
+        </div>
+
+        {useCustomHeight && (
+          <div className="flex items-center justify-center gap-4 text-center">
+            <span className="text-sm text-body-medium">
+              Height: {customHeight}px
+            </span>
+            {!isMobile && (
+              <span className="text-xs text-body-medium">
+                (Hover top/bottom edges to resize)
+              </span>
+            )}
+          </div>
+        )}
+
+        {!useCustomHeight && (
+          <div className="text-center text-sm text-body-medium">
+            Using responsive breakpoint heights: 240px (mobile) • 380px (tablet)
+            • 480px (desktop)
+          </div>
+        )}
+      </div>
+
+      {/* Comparison Section */}
+      {selectedQualities.length > 0 && (
+        <div className="mb-24">
+          <h2 className="mb-6 text-center text-2xl font-bold">
+            Selected Qualities Comparison ({selectedQualities.length} selected)
+          </h2>
+          <div className="space-y-6">
+            {selectedQualities.map((quality) => (
+              <div key={`comparison-${quality}`} className="w-full">
+                <div className="relative">
+                  <div className="absolute start-4 top-4 z-20 text-center">
+                    <span className="inline-block rounded bg-primary px-3 py-1 text-sm font-semibold text-primary-high-contrast">
+                      Quality: {quality}%
+                    </span>
+                  </div>
+                  <ImageContainer quality={quality} isComparison={true} />
+                </div>
+              </div>
+            ))}
+          </div>
+          <hr className="my-8" />
+        </div>
+      )}
+
+      <div className="space-y-8">
+        {qualityValues.map((quality) => (
+          <div key={quality} className="w-full">
+            <div className="flex items-center gap-4 px-6 pb-4">
+              <input
+                type="checkbox"
+                id={`quality-${quality}`}
+                checked={selectedQualities.includes(quality)}
+                onChange={() => toggleQuality(quality)}
+                className="-ms-4 h-4 w-4 flex-shrink-0 rounded border-gray-300 text-primary focus:ring-primary"
+              />
+              <div className="flex-1">
+                <Heading2
+                  id={quality.toString()}
+                  className="m-0 ms-4 text-xl font-semibold"
+                >
+                  Quality: {quality}%
+                </Heading2>
+              </div>
+            </div>
+            <ImageContainer quality={quality} />
+          </div>
+        ))}
+      </div>
+
+      {/* Mobile Height Slider */}
+      {isMobile && useCustomHeight && (
+        <div className="fixed bottom-4 left-4 right-4 z-30 rounded-lg border border-border bg-background p-4 shadow-lg">
+          <div className="flex items-center gap-4">
+            <label
+              htmlFor="height-slider"
+              className="flex-shrink-0 text-sm font-medium"
+            >
+              Height:
+            </label>
+            <input
+              id="height-slider"
+              type="range"
+              min="100"
+              max="600"
+              value={customHeight}
+              onChange={(e) => setCustomHeight(Number(e.target.value))}
+              className="flex-1"
+            />
+            <span className="w-12 flex-shrink-0 text-sm text-body-medium">
+              {customHeight}px
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="mx-auto mt-12 max-w-4xl px-8">
+        <div className="rounded-lg bg-background-highlight p-6">
+          <h3 className="mb-4 text-lg font-semibold">Usage Notes:</h3>
+          <ul className="space-y-2 text-sm text-body-medium">
+            <li>
+              • Lower quality (5-20%) = smaller file size, faster loading, but
+              visible compression artifacts
+            </li>
+            <li>
+              • Medium quality (25-50%) = balanced file size and visual quality
+            </li>
+            <li>
+              • Higher quality (55-100%) = larger file size, slower loading, but
+              better visual fidelity
+            </li>
+            <li>
+              • The optimal quality depends on your performance vs visual
+              quality requirements
+            </li>
+            <li>• Use the height controls to test different viewport sizes</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/[locale]/layer-2/_components/layer-2.tsx b/app/[locale]/layer-2/_components/layer-2.tsx
index 7216a7c88db..ea7c4fdcc3f 100644
--- a/app/[locale]/layer-2/_components/layer-2.tsx
+++ b/app/[locale]/layer-2/_components/layer-2.tsx
@@ -14,7 +14,7 @@ import InlineLink from "@/components/ui/Link"
 import { Rollups } from "@/data/networks/networks"
 
 import useTranslation from "@/hooks/useTranslation"
-import HeroImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
+import HeroImage from "@/public/images/heroes/layer-2-hub-hero.png"
 import EthereumLogo from "@/public/images/layer-2/ethereum.png"
 import WalkingImage from "@/public/images/layer-2/layer-2-walking.png"
 import ExploreImage from "@/public/images/layer-2/learn-hero.png"
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 581adcfec38..31b00eb3fcb 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -17,6 +17,7 @@ import { ChevronNext } from "@/components/Chevron"
 import HomeHero from "@/components/Hero/HomeHero"
 import BentoCard from "@/components/Homepage/BentoCard"
 import CodeExamples from "@/components/Homepage/CodeExamples"
+import HomepageSectionImage from "@/components/Homepage/HomepageSectionImage"
 import { getBentoBoxItems } from "@/components/Homepage/utils"
 import ValuesMarqueeFallback from "@/components/Homepage/ValuesMarquee/Fallback"
 import BlockHeap from "@/components/icons/block-heap.svg"
@@ -91,11 +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 BuildersImage from "@/public/images/heroes/developers-hub-hero.jpg"
-import ActivityImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
-import LearnImage from "@/public/images/heroes/learn-hub-hero.png"
-import CommunityImage from "@/public/images/heroes/quizzes-hub-hero.png"
-import Hero from "@/public/images/home/hero.png"
 
 const BentoCardSwiper = dynamic(
   () => import("@/components/Homepage/BentoCardSwiper"),
@@ -437,7 +433,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           </Link>
         </p>
       </BannerNotification>
-      <HomeHero heroImg={Hero} className="w-full" locale={locale} />
+      <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(
@@ -517,7 +513,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
         {/* Activity - The strongest ecosystem */}
         <Section id="activity" variant="responsiveFlex">
           <SectionBanner>
-            <Image src={ActivityImage} alt="" />
+            <HomepageSectionImage sectionId="activity" alt="" />
           </SectionBanner>
 
           <SectionContent>
@@ -566,7 +562,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           className="md:flex-row-reverse"
         >
           <SectionBanner>
-            <Image src={LearnImage} alt="" />
+            <HomepageSectionImage sectionId="learn" alt="" />
           </SectionBanner>
 
           <SectionContent>
@@ -647,7 +643,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
         {/* Builders - Blockchain's biggest builder community */}
         <Section id="builders" variant="responsiveFlex">
           <SectionBanner className="relative">
-            <Image src={BuildersImage} alt="" />
+            <HomepageSectionImage sectionId="builders" alt="" />
           </SectionBanner>
 
           <SectionContent>
@@ -700,7 +696,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           className="md:flex-row-reverse"
         >
           <SectionBanner>
-            <Image src={CommunityImage} alt="" />
+            <HomepageSectionImage sectionId="community" alt="" />
           </SectionBanner>
 
           <SectionContent>
diff --git a/app/[locale]/start/page.tsx b/app/[locale]/start/page.tsx
index 51bf42a9b7d..4ae641ec845 100644
--- a/app/[locale]/start/page.tsx
+++ b/app/[locale]/start/page.tsx
@@ -10,7 +10,7 @@ import ShareModal from "@/components/StartWithEthereumFlow/ShareModal"
 import { getMetadata } from "@/lib/utils/metadata"
 import { getNewToCryptoWallets } from "@/lib/utils/wallets"
 
-import HeroImage from "@/public/images/heroes/developers-hub-hero.jpg"
+import HeroImage from "@/public/images/heroes/developers-hub-hero.png"
 import ManDogeImage from "@/public/images/start-with-ethereum/man-doge-playing.png"
 
 const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
@@ -79,7 +79,7 @@ export async function generateMetadata({
     slug: ["start"],
     title: t("page-start-meta-title"),
     description: t("page-start-meta-description"),
-    image: "/images/heroes/developers-hub-hero.jpg",
+    image: "/images/heroes/developers-hub-hero.png",
   })
 }
 
diff --git a/public/images/heroes/developers-hub-hero-portrait.png b/public/images/heroes/developers-hub-hero-portrait.png
new file mode 100644
index 00000000000..76a6e8a00f6
Binary files /dev/null and b/public/images/heroes/developers-hub-hero-portrait.png differ
diff --git a/public/images/heroes/developers-hub-hero.jpg b/public/images/heroes/developers-hub-hero.jpg
deleted file mode 100644
index abdf671a49f..00000000000
Binary files a/public/images/heroes/developers-hub-hero.jpg and /dev/null differ
diff --git a/public/images/heroes/developers-hub-hero.png b/public/images/heroes/developers-hub-hero.png
new file mode 100644
index 00000000000..46c26c8de88
Binary files /dev/null and b/public/images/heroes/developers-hub-hero.png differ
diff --git a/public/images/heroes/layer-2-hub-hero-portrait.png b/public/images/heroes/layer-2-hub-hero-portrait.png
new file mode 100644
index 00000000000..7069d1a78fb
Binary files /dev/null and b/public/images/heroes/layer-2-hub-hero-portrait.png differ
diff --git a/public/images/heroes/layer-2-hub-hero.jpg b/public/images/heroes/layer-2-hub-hero.jpg
deleted file mode 100644
index 9554c185756..00000000000
Binary files a/public/images/heroes/layer-2-hub-hero.jpg and /dev/null differ
diff --git a/public/images/heroes/layer-2-hub-hero.png b/public/images/heroes/layer-2-hub-hero.png
new file mode 100644
index 00000000000..77a18fcab4c
Binary files /dev/null and b/public/images/heroes/layer-2-hub-hero.png differ
diff --git a/public/images/heroes/learn-hub-hero-portrait.png b/public/images/heroes/learn-hub-hero-portrait.png
new file mode 100644
index 00000000000..cf26aa0ec7c
Binary files /dev/null and b/public/images/heroes/learn-hub-hero-portrait.png differ
diff --git a/public/images/heroes/learn-hub-hero.png b/public/images/heroes/learn-hub-hero.png
index 41b03361cda..42417c0b9df 100644
Binary files a/public/images/heroes/learn-hub-hero.png and b/public/images/heroes/learn-hub-hero.png differ
diff --git a/public/images/heroes/quizzes-hub-hero-portrait.png b/public/images/heroes/quizzes-hub-hero-portrait.png
new file mode 100644
index 00000000000..f2b41fbd1ff
Binary files /dev/null and b/public/images/heroes/quizzes-hub-hero-portrait.png differ
diff --git a/public/images/heroes/quizzes-hub-hero.png b/public/images/heroes/quizzes-hub-hero.png
index 41163b0bc7f..0e07cb21343 100644
Binary files a/public/images/heroes/quizzes-hub-hero.png and b/public/images/heroes/quizzes-hub-hero.png differ
diff --git a/public/images/home/hero-2xl.png b/public/images/home/hero-2xl.png
new file mode 100644
index 00000000000..42c97e3c7a9
Binary files /dev/null and b/public/images/home/hero-2xl.png differ
diff --git a/public/images/home/hero.png b/public/images/home/hero.png
index ae5670ad9ef..38817ab859d 100644
Binary files a/public/images/home/hero.png and b/public/images/home/hero.png differ
diff --git a/src/components/Hero/HomeHero/HomeHero.stories.tsx b/src/components/Hero/HomeHero/HomeHero.stories.tsx
new file mode 100644
index 00000000000..cc51a78dff1
--- /dev/null
+++ b/src/components/Hero/HomeHero/HomeHero.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { langViewportModes } from "@/storybook/modes"
+
+import HomeHeroComponent from "."
+
+const meta = {
+  title: "Organisms / Layouts / Hero",
+  component: HomeHeroComponent,
+  parameters: {
+    layout: "none",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+} satisfies Meta<typeof HomeHeroComponent>
+
+export default meta
+
+export const HomeHero: StoryObj<typeof meta> = {
+  render: () => <HomeHeroComponent />,
+}
diff --git a/src/components/Hero/HomeHero/index.tsx b/src/components/Hero/HomeHero/index.tsx
index 8d41eb1d20a..11d683f0787 100644
--- a/src/components/Hero/HomeHero/index.tsx
+++ b/src/components/Hero/HomeHero/index.tsx
@@ -1,29 +1,58 @@
-import { getTranslations } from "next-intl/server"
+import { getImageProps } from "next/image"
+import { getLocale, getTranslations } from "next-intl/server"
 
-import type { ClassNameProp, CommonHeroProps, Lang } from "@/lib/types"
+import type { ClassNameProp } from "@/lib/types"
 
 import LanguageMorpher from "@/components/Homepage/LanguageMorpher"
-import { Image } from "@/components/Image"
 
-export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> &
-  ClassNameProp & {
-    locale: Lang
-  }
+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"
 
-const HomeHero = async ({ heroImg, className, locale }: HomeHeroProps) => {
+const HomeHero = async ({ className }: ClassNameProp) => {
+  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-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"
-          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 />
diff --git a/src/components/Hero/index.ts b/src/components/Hero/index.ts
index 63d0131a664..c3e14baf76d 100644
--- a/src/components/Hero/index.ts
+++ b/src/components/Hero/index.ts
@@ -1,4 +1,4 @@
 export { default as ContentHero, type ContentHeroProps } from "./ContentHero"
-export { default as HomeHero, type HomeHeroProps } from "./HomeHero"
+export { default as HomeHero } from "./HomeHero"
 export { default as HubHero } from "./HubHero"
 export { default as MdxHero, type MdxHeroProps } from "./MdxHero"
diff --git a/src/components/Homepage/HomepageSectionImage.tsx b/src/components/Homepage/HomepageSectionImage.tsx
new file mode 100644
index 00000000000..0eb616b4c10
--- /dev/null
+++ b/src/components/Homepage/HomepageSectionImage.tsx
@@ -0,0 +1,97 @@
+import type { StaticImageData } from "next/image"
+import { getImageProps } from "next/image"
+
+import { breakpointAsNumber } from "@/lib/utils/screen"
+
+// Import all landscape images (all PNG now)
+import developersHubHero from "@/public/images/heroes/developers-hub-hero.png"
+// Import all portrait images (all PNG)
+import developersHubHeroPortrait from "@/public/images/heroes/developers-hub-hero-portrait.png"
+import layerTwoHubHero from "@/public/images/heroes/layer-2-hub-hero.png"
+import layerTwoHubHeroPortrait from "@/public/images/heroes/layer-2-hub-hero-portrait.png"
+import learnHubHero from "@/public/images/heroes/learn-hub-hero.png"
+import learnHubHeroPortrait from "@/public/images/heroes/learn-hub-hero-portrait.png"
+import quizzesHubHero from "@/public/images/heroes/quizzes-hub-hero.png"
+import quizzesHubHeroPortrait from "@/public/images/heroes/quizzes-hub-hero-portrait.png"
+
+const imageMap: Record<
+  string,
+  {
+    mobile: StaticImageData
+    desktop: StaticImageData
+  }
+> = {
+  activity: {
+    mobile: layerTwoHubHero,
+    desktop: layerTwoHubHeroPortrait,
+  },
+  learn: {
+    mobile: learnHubHero,
+    desktop: learnHubHeroPortrait,
+  },
+  builders: {
+    mobile: developersHubHero,
+    desktop: developersHubHeroPortrait,
+  },
+  community: {
+    mobile: quizzesHubHero,
+    desktop: quizzesHubHeroPortrait,
+  },
+}
+
+type HomepageSectionImageProps = {
+  sectionId: string // e.g. "activity", "learn", "builders", "community"
+  alt: string
+  className?: string
+}
+
+export default function HomepageSectionImage({
+  sectionId,
+  alt,
+  className,
+}: HomepageSectionImageProps) {
+  const images = imageMap[sectionId]
+
+  if (!images) {
+    throw new Error(
+      `Image not found for section: ${sectionId}. Available sections: ${Object.keys(imageMap).join(", ")}`
+    )
+  }
+
+  const common = {
+    alt,
+    // Be very specific: Desktop max 512px, Mobile 100vw
+    sizes: `(max-width: ${breakpointAsNumber.md}px) 100vw, 512px`,
+    priority: false,
+  }
+
+  const {
+    props: { srcSet: desktop },
+  } = getImageProps({
+    ...common,
+    ...images.desktop,
+    quality: 25,
+  })
+
+  const {
+    props: { srcSet: mobile, ...rest },
+  } = getImageProps({
+    ...common,
+    ...images.mobile,
+    quality: 40,
+  })
+
+  return (
+    <picture className={className}>
+      <source
+        media={`(min-width: ${breakpointAsNumber.md}px)`}
+        srcSet={desktop}
+      />
+      <source
+        media={`(max-width: ${breakpointAsNumber.md - 1}px)`}
+        srcSet={mobile}
+      />
+      <img {...rest} alt={alt} className="h-full w-full object-cover" />
+    </picture>
+  )
+}
diff --git a/src/data/roadmap/releases.tsx b/src/data/roadmap/releases.tsx
index 70d57f6ffc5..ba7c5b4b64d 100644
--- a/src/data/roadmap/releases.tsx
+++ b/src/data/roadmap/releases.tsx
@@ -1,8 +1,8 @@
 import { StaticImageData } from "next/image"
 
-import DevelopersHubHeroImage from "@/public/images/heroes/developers-hub-hero.jpg"
+import DevelopersHubHeroImage from "@/public/images/heroes/developers-hub-hero.png"
 import GuidesHubHeroImage from "@/public/images/heroes/guides-hub-hero.jpg"
-import Layer2HubHeroImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
+import Layer2HubHeroImage from "@/public/images/heroes/layer-2-hub-hero.png"
 import QuizzesHubHeroImage from "@/public/images/heroes/quizzes-hub-hero.png"
 import FusakaImage from "@/public/images/roadmap/roadmap-fusaka.png"
 import PectraImage from "@/public/images/roadmap/roadmap-pectra.png"
diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx
index cd984372b02..e35840211fd 100644
--- a/src/layouts/BaseLayout.tsx
+++ b/src/layouts/BaseLayout.tsx
@@ -4,7 +4,7 @@ import dynamic from "next/dynamic"
 import type { Root } from "@/lib/types"
 
 import Footer from "@/components/Footer"
-import Nav from "@/components/Nav"
+// import Nav from "@/components/Nav"
 import { SkipLink } from "@/components/SkipLink"
 
 // import TranslationBanner from "@/components/TranslationBanner"
@@ -52,8 +52,6 @@ export const BaseLayout = async ({
        */}
       <SkipLink />
       <div className="mx-auto max-w-screen-2xl">
-        <Nav />
-
         {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}
         {/* <TranslationBanner
             shouldShow={shouldShowTranslationBanner}
diff --git a/src/lib/utils/metadata.ts b/src/lib/utils/metadata.ts
index ed8b8523456..5c3002c8c15 100644
--- a/src/lib/utils/metadata.ts
+++ b/src/lib/utils/metadata.ts
@@ -11,7 +11,7 @@ import { routing } from "@/i18n/routing"
  * List of default og images for different sections
  */
 const imageForSlug = [
-  { section: "developers", image: "/images/heroes/developers-hub-hero.jpg" },
+  { section: "developers", image: "/images/heroes/developers-hub-hero.png" },
   { section: "roadmap", image: "/images/heroes/roadmap-hub-hero.jpg" },
   { section: "guides", image: "/images/heroes/guides-hub-hero.jpg" },
   { section: "community", image: "/images/heroes/community-hero.png" },