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>

src/content/home/hero.yaml

@@ -9,7 +9,7 @@ subtitle:
 description: |
   Szybki i stabilny Internet światłowodowy i radiowy w Wyszkowie oraz okolicach. 
   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
-imageUrl: "/images/fiber2.webp"
+imageUrl: "fiber2.webp"
 ctas:
   - label: "Zobacz ofertę Internetu Światłowodowego"
     href: "/internet-swiatlowodowy"

src/content/internet-radiowy/hero.yaml

@@ -9,7 +9,7 @@ subtitle:
 description: |
   Internet radiowy to bezprzewodowa technologia dostępu do sieci, która sprawdza się idealnie tam, gdzie doprowadzenie kabli nie jest możliwe. 
   Dzięki niezależności od nadajników GSM, nasza usługa jest często dostępna w miejscach, gdzie zasięg LTE czy 3G zawodzi.
-imageUrl: "/images/section-radiowy.webp"
+imageUrl: "section-radiowy.webp"
 ctas:
   - label: "Zobacz ofertę internetu światłowodowego"
     href: "/internet-swiatlowodowy"

src/content/internet-swiatlowodowy/hero.yaml

@@ -10,7 +10,7 @@ subtitle:
 description: |
   Szybki i stabilny Internet światłowodowy i radiowy w Wyszkowie oraz okolicach. 
   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
-imageUrl: "/images/section-fiber.webp"
+imageUrl: "section-fiber.webp"
 ctas:
   - label: "Zobacz ofertę Internetu Radiowego"
     href: "/internet-radiowy"

src/content/internet-swiatlowodowy/section.yaml

@@ -1,6 +1,6 @@
 sections:
   - title: Sprawdź dostępność usługi
-    image: "/assets/internet/internet.webp"
+    image: "internet.webp"
     button:
       text: "Sprawdź dostępność pod Twoim adresem →"
       url: "/mapa-zasiegu" 
@@ -15,7 +15,7 @@ sections:
       Jeśli pod Twoim adresem nie ma jeszcze usług światłowodowych, to sprawdź czy dociera tam nasz [internet radiowy](/internet-radiowy "Przejdź do oferty Internetu radiowego").
 
   - title: Router WiFi 5 AC1200
-    image: "/assets/internet/E5400.webp"
+    image: "E5400.webp"
     content: |
       Dwuzakresowy router WiFi 5 AC1200 zapewnia prędkość do 1200 Mb/s.
 

src/content/internet-telewizja/hero.yaml

@@ -9,7 +9,7 @@ subtitle:
 description: |
   Szybki i stabilny Internet światłowodowy w pakiecie z telewizją w Wyszkowie oraz okolicach. 
   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
-imageUrl: "/images/section-tv.webp"
+imageUrl: "section-tv.webp"
 ctas:
   - label: "Zobacz ofertę internetu światłowodowego"
     href: "/internet-swiatlowodowy"

src/content/internet-telewizja/modal.yaml

@@ -7,7 +7,7 @@ catchup:
     
     Odnajdź go w EPG, cofając się w lewo na osi czasu.
 
-    ![Catchup screen](/assets/tv/jambox-kyanit-catchup1.png)
+    ![Catchup screen](/src/assets/sections/jambox-kyanit-catchup1.webp)
 
 nagrywarka:
   title: NAGRYWARKA
@@ -24,7 +24,7 @@ nagrywarka:
     
     Nagrywanie w chmurze dostępne jest na dekoderach Abox M15, Hybroad Z123 oraz Arris VIP 4302.
 
-    ![Nagrywarka](/assets/tv/jambox-kyanit-jpvr.png)
+    ![Nagrywarka](/src/assets/sections/jambox-kyanit-jpvr.webp)
 
 startover:
   title: STARTOVER OGLĄDAJ OD POCZĄTKU
@@ -35,7 +35,7 @@ startover:
     
     Nic nie szkodzi! Kliknij "Oglądaj od początku" i już nic Ci nie umknie!
 
-    ![STARTOVER](/assets/tv/jambox-kyanit-startover1.png)
+    ![STARTOVER](/src/assets/sections/jambox-kyanit-startover1.webp)
 
 nagrywanie_cykliczne:
   title: NAGRYWANIE CZASOWE/CYKLICZNE

src/content/internet-telewizja/section.yaml

@@ -1,6 +1,6 @@
 sections:
   - title: Dodatkowe możliwości naszej telewizji"
-    image: "/assets/tv/ekosystem-kyanit.png"
+    image: "ekosystem-kyanit.webp"
     content: |
       - **Catchup** — na wybranych kanałach możesz obejrzeć audycję z ostatnich 7 dni. [Więcej →](#catchup "Przeczytaj o usłudze CatchUp")
 
@@ -15,7 +15,7 @@ sections:
       - **Wyszukiwarka tekstowa** — wyszukaj dowolną frazę audycji i zaplanuj nagranie.
 
   - title: "Dekoder telewizyjny"
-    image: "/assets/tv/VIP4302.png"
+    image: "VIP4302.png"
     content: |
       Arris 4302 HD to kompaktowy sprzęt z możliwością korzystania z jakości HD. Oprogramowanie Kyanit z wygodnym i szybkim interfejsem użytkownika. 
 

src/content/site/site.section.yaml

@@ -1,6 +1,6 @@
 sections:
   - title: "Internet Światłowodowy"
-    image: "/images/section-fiber.webp"
+    image: "section-fiber.webp"
     dimmed: true
     type: default
     button:
@@ -13,7 +13,7 @@ sections:
       Odkryj komfort technologii stworzonej do pracy, rozrywki i życia bez ograniczeń.
 
   - title: "Internet i Telewizja"
-    image: "/images/section-tv.webp"
+    image: "section-tv.webp"
     dimmed: true
     button:
       text: "Zobacz ofertę Internetu + Telewizja →"
@@ -25,7 +25,7 @@ sections:
      Korzystaj z internetu bez limitów i oglądaj swoje ulubione programy w perfekcyjnej jakości — w jednym prostym pakiecie.
 
   - title: "Internet Radiowy"
-    image: "/images/section-radiowy.webp"
+    image: "section-radiowy.webp"
     dimmed: true
     type: default
     button:
@@ -38,7 +38,7 @@ sections:
      To szybki start w świat cyfrowej pracy i rozrywki — bez konieczności instalacji kabli.
 
   - title: "Telefon"
-    image: "/images/section-telefon.webp"
+    image: "section-telefon.webp"
     dimmed: true
     button:
       text: "Zobacz ofertę telefonu →"

src/content/telefon/hero.yaml

@@ -7,7 +7,7 @@ subtitle:
   - Wszystko, czego potrzebujesz w jednym miejscu
 description: |
   Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
-imageUrl: "/images/section-telefon.webp"
+imageUrl: "section-telefon.webp"
 ctas:
   - label: "Zobacz ofertę internetu światłowodowego"
     href: "/internet-swiatlowodowy"

src/content/telefon/section.yaml

@@ -1,6 +1,6 @@
 sections:
   - title: Zachowaj dotychczasowy numer telefonu
-    image: "/assets/telefon/przeniesienie.webp"
+    image: "przeniesienie.png"
     content: |
       Przeniesienie numeru telefonu do naszej sieci nigdy nie było takie proste!