adventskalender/2025/index.html aktualisiert

adventskalender/2025/index.html

@@ -26,6 +26,7 @@
 
     <div class="kalenderbild">
   <picture>
+  <!-- AVIF -->
   <source
     type="image/avif"
     srcset="
@@ -36,10 +37,16 @@
       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"
-  >
+      assets/images/3840/avif/Basisbild.avif 3840w"
+    sizes="
+      (min-width: 3840px) 3840px,
+      (min-width: 2560px) 2560px,
+      (min-width: 1920px) 1920px,
+      (min-width: 1600px) 1600px,
+      (min-width: 1280px) 1280px,
+      100vw">
+
+  <!-- WebP -->
   <source
     type="image/webp"
     srcset="
@@ -50,12 +57,18 @@
       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"
-  >
+      assets/images/3840/webp/Basisbild.webp 3840w"
+    sizes="
+      (min-width: 3840px) 3840px,
+      (min-width: 2560px) 2560px,
+      (min-width: 1920px) 1920px,
+      (min-width: 1600px) 1600px,
+      (min-width: 1280px) 1280px,
+      100vw">
+
+  <!-- JPEG-Fallback -->
   <img
-    src="assets/images/1920/jpeg/Basisbild.jpg"
+    src="assets/images/1280/jpeg/Basisbild.jpg"
     srcset="
       assets/images/420/jpeg/Basisbild.jpg 420w,
       assets/images/768/jpeg/Basisbild.jpg 768w,
@@ -64,13 +77,17 @@
       assets/images/1600/jpeg/Basisbild.jpg 1600w,
       assets/images/1920/jpeg/Basisbild.jpg 1920w,
       assets/images/2560/jpeg/Basisbild.jpg 2560w,
-      assets/images/3840/jpeg/Basisbild.jpg 3840w
-    "
-    sizes="100vw"
+      assets/images/3840/jpeg/Basisbild.jpg 3840w"
+    sizes="
+      (min-width: 3840px) 3840px,
+      (min-width: 2560px) 2560px,
+      (min-width: 1920px) 1920px,
+      (min-width: 1600px) 1600px,
+      (min-width: 1280px) 1280px,
+      100vw"
     alt="Bratonien Adventskalender 2025"
     decoding="async"
-    fetchpriority="high"
-  >
+    fetchpriority="high">
 </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>