diff --git a/parfum-shop/index.html b/parfum-shop/index.html
index b410625..e025c19 100644
--- a/parfum-shop/index.html
+++ b/parfum-shop/index.html
@@ -51,7 +51,9 @@
     <link
       rel="preload"
       as="image"
-      href="/blasse-seide-hero-product.webp"
+      href="/images/hero/768/blasse-seide-hero-product.webp"
+      imagesrcset="/images/hero/480/blasse-seide-hero-product.webp 480w, /images/hero/768/blasse-seide-hero-product.webp 768w, /images/hero/960/blasse-seide-hero-product.webp 960w, /blasse-seide-hero-product.webp 1078w"
+      imagesizes="(max-width: 760px) 92vw, (max-width: 1180px) 45vw, 768px"
       fetchpriority="high"
     />
   </head>
diff --git a/parfum-shop/public/images/hero/480/blasse-seide-hero-product.webp b/parfum-shop/public/images/hero/480/blasse-seide-hero-product.webp
new file mode 100644
index 0000000..95cfa7a
Binary files /dev/null and b/parfum-shop/public/images/hero/480/blasse-seide-hero-product.webp differ
diff --git a/parfum-shop/public/images/hero/768/blasse-seide-hero-product.webp b/parfum-shop/public/images/hero/768/blasse-seide-hero-product.webp
new file mode 100644
index 0000000..0dfe163
Binary files /dev/null and b/parfum-shop/public/images/hero/768/blasse-seide-hero-product.webp differ
diff --git a/parfum-shop/public/images/hero/960/blasse-seide-hero-product.webp b/parfum-shop/public/images/hero/960/blasse-seide-hero-product.webp
new file mode 100644
index 0000000..3ee5efc
Binary files /dev/null and b/parfum-shop/public/images/hero/960/blasse-seide-hero-product.webp differ
diff --git a/parfum-shop/public/images/products/540/blasse-seide-product-image.webp b/parfum-shop/public/images/products/540/blasse-seide-product-image.webp
new file mode 100644
index 0000000..fba3735
Binary files /dev/null and b/parfum-shop/public/images/products/540/blasse-seide-product-image.webp differ
diff --git a/parfum-shop/public/images/products/540/kalter-beton-product-image.webp b/parfum-shop/public/images/products/540/kalter-beton-product-image.webp
new file mode 100644
index 0000000..c707263
Binary files /dev/null and b/parfum-shop/public/images/products/540/kalter-beton-product-image.webp differ
diff --git a/parfum-shop/public/images/products/540/nasser-marmor-product-image.webp b/parfum-shop/public/images/products/540/nasser-marmor-product-image.webp
new file mode 100644
index 0000000..941925c
Binary files /dev/null and b/parfum-shop/public/images/products/540/nasser-marmor-product-image.webp differ
diff --git a/parfum-shop/public/images/products/540/schwarzes-benzin-product-image.webp b/parfum-shop/public/images/products/540/schwarzes-benzin-product-image.webp
new file mode 100644
index 0000000..0caa718
Binary files /dev/null and b/parfum-shop/public/images/products/540/schwarzes-benzin-product-image.webp differ
diff --git a/parfum-shop/public/images/products/540/verbranntes-chrom-product-image.webp b/parfum-shop/public/images/products/540/verbranntes-chrom-product-image.webp
new file mode 100644
index 0000000..0cdcaf2
Binary files /dev/null and b/parfum-shop/public/images/products/540/verbranntes-chrom-product-image.webp differ
diff --git a/parfum-shop/public/images/products/540/weisse-asche-product-image.webp b/parfum-shop/public/images/products/540/weisse-asche-product-image.webp
new file mode 100644
index 0000000..4674047
Binary files /dev/null and b/parfum-shop/public/images/products/540/weisse-asche-product-image.webp differ
diff --git a/parfum-shop/public/images/products/720/blasse-seide-product-image.webp b/parfum-shop/public/images/products/720/blasse-seide-product-image.webp
new file mode 100644
index 0000000..5d2ffa1
Binary files /dev/null and b/parfum-shop/public/images/products/720/blasse-seide-product-image.webp differ
diff --git a/parfum-shop/public/images/products/720/kalter-beton-product-image.webp b/parfum-shop/public/images/products/720/kalter-beton-product-image.webp
new file mode 100644
index 0000000..978176f
Binary files /dev/null and b/parfum-shop/public/images/products/720/kalter-beton-product-image.webp differ
diff --git a/parfum-shop/public/images/products/720/nasser-marmor-product-image.webp b/parfum-shop/public/images/products/720/nasser-marmor-product-image.webp
new file mode 100644
index 0000000..01acc81
Binary files /dev/null and b/parfum-shop/public/images/products/720/nasser-marmor-product-image.webp differ
diff --git a/parfum-shop/public/images/products/720/schwarzes-benzin-product-image.webp b/parfum-shop/public/images/products/720/schwarzes-benzin-product-image.webp
new file mode 100644
index 0000000..bce91a2
Binary files /dev/null and b/parfum-shop/public/images/products/720/schwarzes-benzin-product-image.webp differ
diff --git a/parfum-shop/public/images/products/720/verbranntes-chrom-product-image.webp b/parfum-shop/public/images/products/720/verbranntes-chrom-product-image.webp
new file mode 100644
index 0000000..844da65
Binary files /dev/null and b/parfum-shop/public/images/products/720/verbranntes-chrom-product-image.webp differ
diff --git a/parfum-shop/public/images/products/720/weisse-asche-product-image.webp b/parfum-shop/public/images/products/720/weisse-asche-product-image.webp
new file mode 100644
index 0000000..056960b
Binary files /dev/null and b/parfum-shop/public/images/products/720/weisse-asche-product-image.webp differ
diff --git a/parfum-shop/src/components/landing/HeroSection.jsx b/parfum-shop/src/components/landing/HeroSection.jsx
index 16aeb2d..e005332 100644
--- a/parfum-shop/src/components/landing/HeroSection.jsx
+++ b/parfum-shop/src/components/landing/HeroSection.jsx
@@ -1,5 +1,11 @@
 import { Link } from "react-router";
 import IntroOverlay from "./IntroOverlay";
+import {
+  HERO_PRODUCT_IMAGE_SIZES,
+  buildPublicImageSrcSet,
+} from "../../utils/responsiveImages";
+
+const HERO_PRODUCT_IMAGE = "/blasse-seide-hero-product.webp";
 
 function HeroSection({
   heroImageWrapRef,
@@ -34,7 +40,13 @@ function HeroSection({
       <figure className="hero-product">
         <div className="hero-product__inner" ref={setDescriptionRef}>
           <img
-            src="/blasse-seide-hero-product.webp"
+            src={HERO_PRODUCT_IMAGE}
+            srcSet={buildPublicImageSrcSet(HERO_PRODUCT_IMAGE, {
+              folder: "/images/hero",
+              widths: [480, 768, 960],
+              originalWidth: 1078,
+            })}
+            sizes={HERO_PRODUCT_IMAGE_SIZES}
             alt="Blasse Seide Parfumflakon auf einer dunklen Produktkarte"
             className="hero-product__image"
             loading="eager"
diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx
index 4b816a6..97378e8 100644
--- a/parfum-shop/src/pages/LandingPage.jsx
+++ b/parfum-shop/src/pages/LandingPage.jsx
@@ -14,6 +14,10 @@ import SharedNavbar from "../components/SharedNavbar";
 import PageMeta from "../components/seo/PageMeta";
 import perfumes from "../data/perfumes";
 import { useProductTransition } from "../transitions/ProductTransitionContext";
+import {
+  PRODUCT_CARD_IMAGE_SIZES,
+  buildPublicImageSrcSet,
+} from "../utils/responsiveImages";
 import "../pages/LandingPage.css";
 import "../style/navbar.css";
 
@@ -504,6 +508,12 @@ function LandingPage() {
                 <div className="product-image-wrap">
                   <img
                     src={item.image}
+                    srcSet={buildPublicImageSrcSet(item.image, {
+                      folder: "/images/products",
+                      widths: [540, 720],
+                      originalWidth: 1080,
+                    })}
+                    sizes={PRODUCT_CARD_IMAGE_SIZES}
                     alt={item.name}
                     className="product-image"
                     data-product-transition-source
diff --git a/parfum-shop/src/utils/responsiveImages.js b/parfum-shop/src/utils/responsiveImages.js
new file mode 100644
index 0000000..f27b761
--- /dev/null
+++ b/parfum-shop/src/utils/responsiveImages.js
@@ -0,0 +1,14 @@
+export const PRODUCT_CARD_IMAGE_SIZES =
+  "(min-width: 1280px) 520px, (min-width: 1024px) 31vw, (min-width: 768px) 46vw, 92vw";
+
+export const HERO_PRODUCT_IMAGE_SIZES =
+  "(max-width: 760px) 92vw, (max-width: 1180px) 45vw, 768px";
+
+export function buildPublicImageSrcSet(src, { folder, widths, originalWidth }) {
+  const fileName = src.replace(/^\//, "");
+  const variants = widths.map(
+    (width) => `${folder}/${width}/${fileName} ${width}w`
+  );
+
+  return [...variants, `${src} ${originalWidth}w`].join(", ");
+}