diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index b522fd3..7efaa01 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -18,9 +18,24 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
-    # Cache static assets
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+    # Cache JS/CSS/fonts
+    location ~* \.(js|css|woff|woff2|ttf|eot)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";
     }
+
+    # Serve WebP automatically when browser supports it
+    location = /image.png {
+        expires 30d;
+        add_header Cache-Control "public";
+        add_header Vary Accept;
+        if ($http_accept ~* "webp") {
+            rewrite ^ /image.webp break;
+        }
+    }
+
+    location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
+        expires 30d;
+        add_header Cache-Control "public";
+    }
 }
diff --git a/frontend/public/image.png b/frontend/public/image.png
index e3ded59..888b2e1 100644
Binary files a/frontend/public/image.png and b/frontend/public/image.png differ
diff --git a/frontend/public/image.webp b/frontend/public/image.webp
new file mode 100644
index 0000000..acda56d
Binary files /dev/null and b/frontend/public/image.webp differ
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index be07a3e..e69b86e 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -509,7 +509,10 @@ export const LandingPage: React.FC = () => {
 
         </div>
         <div className="hero-right">
-          <img src="/image.png" alt="Velxio simulator preview" className="hero-preview-img" />
+          <picture>
+            <source srcSet="/image.webp" type="image/webp" />
+            <img src="/image.png" alt="Velxio simulator preview" className="hero-preview-img" loading="lazy" />
+          </picture>
         </div>
       </section>