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>

src/components/layout/Footer.astro

@@ -9,7 +9,7 @@ const footer = yaml.load(
 ---
 
 <footer
-  class="fuz-footer bg-[var(--fuz-bg)] text-[var(--fuz-text)] mt-0 border-t border-gray-200 dark:border-slate-700"
+  class="fuz-footer mt-0 border-t border-gray-200 dark:border-slate-700"
 >
   <!-- GŁÓWNY GRID -->
   <div class="footer-inner max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12">
@@ -61,7 +61,7 @@ const footer = yaml.load(
 
   <!-- DÓŁ FOOTERA -->
   <div
-    class="text-center py-0 text-sm text-[var(--fuz-text)] opacity-60"
+    class="text-center py-0 text-sm"
   >
     © {new Date().getFullYear()} FUZ Adam Rojek. Wszystkie prawa zastrzeżone.
 

src/components/sections/SectionDefault.astro

@@ -1,36 +1,68 @@
 ---
+import { Image } from "astro:assets";
 import Markdown from "../../islands/Markdown.jsx";
 
 const { section, index } = Astro.props;
 
 const hasImage = !!section.image;
 const reverse = index % 2 === 1;
+
+// Automatyczny import obrazów sekcji
+const sectionImages = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/sections/**/*.{png,jpg,jpeg,webp,avif}",
+  { eager: true },
+);
+
+// Znajdź obraz zgodnie z YAML
+let sectionImage: ImageMetadata | null = null;
+
+if (section.image) {
+  const path = `/src/assets/sections/${section.image}`;
+  const mod = sectionImages[path];
+  if (mod) sectionImage = mod.default;
+}
 ---
+
 <section class="fuz-section">
-  <div class={`fuz-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}>
-
-    {hasImage && (
-      <img
-        src={section.image}
-        alt={section.title}
-        class={`fuz-section-image ${reverse ? "md:order-1" : "md:order-2"} 
+  <div
+    class={`fuz-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}
+  >
+    {
+      sectionImage && (
+        <Image
+          src={sectionImage}
+          alt={section.title}
+          class={`fuz-section-image ${reverse ? "md:order-1" : "md:order-2"} 
         ${section.dimmed ? "fuz-image-dimmed" : ""}`}
-      />
-    )}
+          loading="lazy"
+          decoding="async"
+          format="webp"
+          widths={[480, 768, 1024, 1440]}
+          sizes="100vw"
+        />
+      )
+    }
 
-    <div class={`fuz-section text-center ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}>
-      <h2 class="fuz-section-title ">{section.title}</h2>
+    <div
+      class={`fuz-section text-center ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
+    >
+      <h2 class="fuz-section-title">{section.title}</h2>
 
       <Markdown text={section.content} />
 
-      {section.button && (
-        <div class="mt-8 flex justify-center">
-          <a href={section.button.url} class="btn btn-outline" title={section.button.title}>
-            {section.button.text}
-          </a>
-        </div>
-      )}
+      {
+        section.button && (
+          <div class="mt-8 flex justify-center">
+            <a
+              href={section.button.url}
+              class="btn btn-outline"
+              title={section.button.title}
+            >
+              {section.button.text}
+            </a>
+          </div>
+        )
+      }
     </div>
-
   </div>
 </section>