diff --git a/client/public/bg-image-pier.jpg b/client/public/bg-image-pier.jpg
deleted file mode 100644
index 11e1a721..00000000
Binary files a/client/public/bg-image-pier.jpg and /dev/null differ
diff --git a/client/public/bg-image-pier.webp b/client/public/bg-image-pier.webp
new file mode 100644
index 00000000..2c1e20c9
Binary files /dev/null and b/client/public/bg-image-pier.webp differ
diff --git a/client/public/bg-image-skyline.jpg b/client/public/bg-image-skyline.jpg
deleted file mode 100644
index 72f9e092..00000000
Binary files a/client/public/bg-image-skyline.jpg and /dev/null differ
diff --git a/client/public/bg-image-skyline.webp b/client/public/bg-image-skyline.webp
new file mode 100644
index 00000000..5a806d15
Binary files /dev/null and b/client/public/bg-image-skyline.webp differ
diff --git a/client/public/bg-image-sunset.jpg b/client/public/bg-image-sunset.jpg
deleted file mode 100644
index f5b90a0b..00000000
Binary files a/client/public/bg-image-sunset.jpg and /dev/null differ
diff --git a/client/public/bg-image-sunset.webp b/client/public/bg-image-sunset.webp
new file mode 100644
index 00000000..d797e53d
Binary files /dev/null and b/client/public/bg-image-sunset.webp differ
diff --git a/client/src/index.scss b/client/src/index.scss
index 049a8088..6b38d874 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -15,7 +15,7 @@ body {
         "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    background-image: url("/bg-image-skyline.jpg");
+    background-image: url("/bg-image-skyline.webp");
     background-repeat: no-repeat;
     background-position: bottom;
     background-position-y: 80%;
@@ -156,7 +156,7 @@ label {
     }
 
     body {
-        background-image: url("/bg-image-pier.jpg");
+        background-image: url("/bg-image-pier.webp");
         background-repeat: no-repeat;
         background-position: top;
         background-size: 1200px 1200px;