diff --git a/static/img/header-1200.webp b/static/img/header-1200.webp
new file mode 100644
index 0000000..4eb6710
Binary files /dev/null and b/static/img/header-1200.webp differ
diff --git a/static/img/header-500.webp b/static/img/header-500.webp
new file mode 100644
index 0000000..8f88289
Binary files /dev/null and b/static/img/header-500.webp differ
diff --git a/static/img/header-800.webp b/static/img/header-800.webp
new file mode 100644
index 0000000..2e3ed87
Binary files /dev/null and b/static/img/header-800.webp differ
diff --git a/themes/bluewater/layouts/index.html b/themes/bluewater/layouts/index.html
index eade6f8..411e01a 100644
--- a/themes/bluewater/layouts/index.html
+++ b/themes/bluewater/layouts/index.html
@@ -1,7 +1,17 @@
 {{ define "main" }}
   {{ $p := where site.RegularPages "Type" "blog" }}
   <div class="mx-2 md:mx-0">
-    <img src="/img/header.jpg" class="lg:w-full my-4" />
+    <picture class="lg:w-full my-4">
+      <source media="(max-width: 376px)" 
+          srcset="/img/header-500.webp">
+      <source media="(max-width: 1400px)" 
+          srcset="/img/header-800.webp">
+      <source media="(min-width: 1401px)" 
+          srcset="/img/header-1200.webp">
+      <img 
+        alt="Ein Bild von einer Insel mit Palmen, dem Meer und dem Himmel" src="/img/header.jpg" 
+        height="280px" width="1200px">
+    </picture>
   </div>
   <div class="flex flex-col lg:flex-row px-2 md:px-0">
     <div class="basis-1/1 lg:basis-2/3 lg:mr-6 min-h-[200vh] border-2">