Maybe new Image...?

src/components/BackgroundImage.astro

@@ -0,0 +1,9 @@
+---
+import { Image } from "astro:assets";
+import localBau from "@images/90.png";
+---
+
+<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 h-full object-cover rounded-b-2xl shadow-2xl" quality={100}
+    draggable="false" loading="eager"/>

src/layouts/PageLayout.astro

@@ -1,15 +1,15 @@
 ---
 import NavbarLayout from "./NavbarLayout.astro";
-import localBau from "@images/90.png";
+import BackgroundImage from "../components/BackgroundImage.astro";
-import {Image} from "astro:assets";
 
-const {title, description, image} = Astro.props;
+const {title, description} = Astro.props;
 ---
 
 <NavbarLayout title={title} description={description}>
     <slot name="head" slot="head"/>
-    <Image src={image || localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
+    <div class="h-screen">
-        class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
+        <BackgroundImage />
+    </div>
     <div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14 relative
             dark:text-white dark:bg-neutral-900" style="width: min(100%, 75em);">
         <slot/>

src/pages/index.astro

@@ -4,9 +4,8 @@ import NavbarLayout from "@layouts/NavbarLayout.astro";
 import {getCollection} from "astro:content";
 import {astroI18n} from "astro-i18n";
 
-import {Image, Picture} from "astro:assets";
+import {Image} from "astro:assets";
 import Card from "@components/Card.svelte";
-import localBau from "@images/90.png";
 import {CaretRight, Pause, Rocket, Code, Crosshair1} from "@astropub/icons";
 import {t} from "astro-i18n";
 import {l} from "@utils/util";
@@ -14,6 +13,7 @@ import PlayerCount from "@components/PlayerCount.svelte";
 import "../../public/fonts/barlow-condensed/barlow-condensed.css";
 import {Player} from "../components/types/data";
 import PostComponent from "../components/PostComponent.astro";
+import BackgroundImage from "../components/BackgroundImage.astro";
 
 const teamMember: { [key: string]: Player[]} = await fetch("http://127.0.0.1:1337/data/team")
     .then(value => value.json());
@@ -35,10 +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" widths={[240, 540, 720, 1080, 1920, localBau.width]}
+        <div style="height: calc(100vh + 1rem)">
-            sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`}
+            <BackgroundImage />
-            class="w-full object-cover rounded-b-2xl shadow-2xl"
+        </div>
-            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"
                 style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);">