diff --git a/webapp/index.html b/webapp/index.html
index 1e82b78..78520bd 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
     <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png">
diff --git a/webapp/public/hero.jpg b/webapp/public/hero.jpg
deleted file mode 100644
index 772ef23..0000000
Binary files a/webapp/public/hero.jpg and /dev/null differ
diff --git a/webapp/public/hero.webp b/webapp/public/hero.webp
new file mode 100644
index 0000000..a0ad33a
Binary files /dev/null and b/webapp/public/hero.webp differ
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index e96edad..dabe8ee 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -148,7 +148,7 @@
 
 <style>
 .hero-section {
-  background: url('/hero.jpg') no-repeat center center;
+  background: url('/hero.webp') no-repeat center center;
   background-size: cover;
   color: white;
   padding: 60px 0 50px 0 !important;
