Optymalizacja grafik

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>