Optymalizacja grafik

src/components/hero/Hero.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+
 const {
   title = [],
   subtitle = [],
@@ -6,21 +8,46 @@ const {
   imageUrl,
   ctas = []
 } = Astro.props;
+
+// Automatyczne wczytanie wszystkich obrazów hero
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
+  eager: true
+});
+
+// Przygotowanie zmiennej ImageMetadata | null
+let imageAsset: ImageMetadata | null = null;
+
+if (imageUrl) {
+  const path = `/src/assets/hero/${imageUrl}`;
+  const mod = images[path];
+
+  if (mod) {
+    imageAsset = mod.default;
+  }
+}
+
+// Obraz HERO jest LCP
+const isLCP = true;
 ---
+
 <section class="fuz-hero">
 
-  {imageUrl && (
-    <img
-      src={imageUrl}
+  {imageAsset && (
+    <Image
+      src={imageAsset}
       alt="Światłowód FUZ – szybki internet w Wyszkowie"
       class="fuz-hero-bg"
       loading="eager"
+      fetchpriority={isLCP ? "high" : "auto"}
+      decoding="async"
+      format="webp"
+      widths={[640, 960, 1280, 1920]}
+      sizes="100vw"
     />
   )}
 
   <div class="fuz-hero-inner">
 
-    <!-- Tytuł (pojedynczy lub lista) -->
     {Array.isArray(title)
       ? title.map(line => (
           <h1 class="fuz-hero-title">{line}</h1>
@@ -28,37 +55,30 @@ const {
       : <h1 class="fuz-hero-title">{title}</h1>
     }
 
-    <!-- Podtytuły (lista) -->
     {subtitle && Array.isArray(subtitle) && (
       <div class="fuz-hero-subtitles">
-
-        <!-- Pierwszy: H2 -->
         <h2 class="fuz-hero-subtitle" style={`--delay:0`}>
           {subtitle[0]}
         </h2>
 
-        <!-- Reszta: <p> (dla SEO najlepsze) -->
         {subtitle.slice(1).map((line, i) => (
           <p class="fuz-hero-subline" style={`--delay:${i + 1}`}>
             {line}
           </p>
         ))}
-
       </div>
     )}
 
-    <!-- Opis -->
     {description && (
       <p class="fuz-hero-description">{description}</p>
     )}
 
-    <!-- CTA -->
     {ctas.length > 0 && (
       <div class="fuz-hero-cta gap-4">
         {ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; title: string }) => {
           const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
           return (
-            <a href={cta.href} class={cls} title={cta.title ?? 'Link do podstrony'}>
+            <a href={cta.href} class={cls}>
               {cta.label}
             </a>
           );
@@ -66,4 +86,5 @@ const {
       </div>
     )}
   </div>
+
 </section>