adventskalender/2025/index.html aktualisiert

adventskalender/2025/index.html

@@ -20,7 +20,40 @@
     <h1>Bratonien Adventskalender 2025</h1>
 
     <div class="kalenderbild">
-  <img src="assets/images/Basisbild.webp" alt="Bratonien Adventskalender 2025">
+  <picture>
+  <source 
+    type="image/avif" 
+    srcset="
+      assets/images/420/avif/Basisbild.avif 420w,
+      assets/images/768/avif/Basisbild.avif 768w,
+      assets/images/1024/avif/Basisbild.avif 1024w,
+      assets/images/1280/avif/Basisbild.avif 1280w,
+      assets/images/1600/avif/Basisbild.avif 1600w,
+      assets/images/1920/avif/Basisbild.avif 1920w,
+      assets/images/2560/avif/Basisbild.avif 2560w,
+      assets/images/3840/avif/Basisbild.avif 3840w
+    "
+    sizes="100vw"
+  >
+  <source 
+    type="image/webp" 
+    srcset="
+      assets/images/420/webp/Basisbild.webp 420w,
+      assets/images/768/webp/Basisbild.webp 768w,
+      assets/images/1024/webp/Basisbild.webp 1024w,
+      assets/images/1280/webp/Basisbild.webp 1280w,
+      assets/images/1600/webp/Basisbild.webp 1600w,
+      assets/images/1920/webp/Basisbild.webp 1920w,
+      assets/images/2560/webp/Basisbild.webp 2560w,
+      assets/images/3840/webp/Basisbild.webp 3840w
+    "
+    sizes="100vw"
+  >
+  <img 
+    src="assets/images/1920/jpeg/Basisbild.jpg" 
+    alt="Bratonien Adventskalender 2025" 
+  >
+</picture>
     <div class="door hinge-right" data-day="18" data-left="6" data-top="9" data-width="8.5">18</div>
     <div class="openfield" data-day="18" data-left="6" data-top="9" data-width="8.5"></div>