diff --git a/layouts/index.html b/layouts/index.html
index 90751db..459f37b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,16 +8,23 @@
         <div id="galerie" class="carousel">
                 {{ $carouselImages := resources.Match "carousel/*"}}
                 {{ range $index, $image := $carouselImages }}
-                {{- $jpeg := $image.Resize (printf "%dx jpeg q%d" 2200 75) }}
-                {{- $webp := $image.Resize (printf "%dx webp q%d picture" 2200 75) }}
-
-
+                {{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
+                {{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
+                {{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 2200 75) }}
+                {{- $webps := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
+                {{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
+                {{- $webpl := $image.Resize (printf "%dx webp q%d picture" 2200 75) }}
                 <figure class="image">
                     <picture>
-                        <source srcset="{{ $webp.Permalink }}" type="image/webp">
-                        <img src='{{ $jpeg.Permalink }}' 
+                        <source type="image/webp"
+                            srcset="{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,{{ $jpegl.Permalink }} {{ $jpegl.Width }}w"  
+                            sizes="(max-width: {{ $jpegs.Width }}px) {{ $jpegs.Width }}px, (max-width: {{ $jpegm.Width }}px) {{ $jpegm.Width }}px, {{ $jpegl.Width }}px"
+                            >
+                        <img src='{{ $jpegl.Permalink }}' 
                             {{ if ne $index 0 }} loading="lazy" {{ end }} 
-                            width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ $image.Permalink }}">
+                            srcset="{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,{{ $jpegl.Permalink }} {{ $jpegl.Width }}w"  
+                            sizes="(max-width: {{ $jpegs.Width }}px) {{ $jpegs.Width }}px, (max-width: {{ $jpegm.Width }}px) {{ $jpegm.Width }}px, {{ $jpegl.Width }}px"
+                            alt="{{ $image.Permalink }}">
                     </picture>
                 </figure>
                 {{ end }}