Maybe new Image...

src/pages/index.astro

@@ -4,7 +4,7 @@ import NavbarLayout from "@layouts/NavbarLayout.astro";
 import {getCollection} from "astro:content";
 import {astroI18n} from "astro-i18n";
 
-import {Image} from "astro:assets";
+import {Image, Picture} from "astro:assets";
 import Card from "@components/Card.svelte";
 import localBau from "@images/90.png";
 import {CaretRight, Pause, Rocket, Code, Crosshair1} from "@astropub/icons";
@@ -35,8 +35,9 @@ const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.d
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
     <div class="w-full h-screen relative mb-4">
-        <Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
-            class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75"
+        <Image src={localBau} alt="Bau" widths={[240, 540, 720, 1080, 1920, localBau.width]}
+            sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`}
+            class="w-full object-cover rounded-b-2xl shadow-2xl"
             style="height: calc(100vh + 1rem)" draggable="false" loading="eager"/>
         <drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
             <h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"