diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
index 21503d9d57..caf763b67f 100644
--- a/benefits/core/templates/core/base.html
+++ b/benefits/core/templates/core/base.html
@@ -16,6 +16,8 @@
     <title>{% block page-title %}{% endblock page-title %}| {% translate "Cal-ITP Benefits" %}</title>
     {# djlint:on #}
 
+    {% block preload %}{% endblock preload %}
+
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
 
     {% comment %}
diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
index 47b39ff892..7090d4ddab 100644
--- a/benefits/core/templates/core/landing.html
+++ b/benefits/core/templates/core/landing.html
@@ -1,5 +1,6 @@
 {% extends "core/base.html" %}
 {% load i18n %}
+{% load static %}
 
 {% block classes %}
   {{ block.super | add:" landing" }}
@@ -10,6 +11,11 @@
   {% endblock title %}
 {% endblock page-title %}
 
+{% block preload %}
+  <link rel="preload" as="image" href="{% static 'img/benefits-bg-mobile.webp' %}" media="(width < 992px)" />
+  <link rel="preload" as="image" href="{% static 'img/benefits-bg-desktop.webp' %}" media="(width >= 992px)">
+{% endblock preload %}
+
 {% block main-content %}
   <div class="container">
     <div class="row align-items-end align-items-lg-center">
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index a8f092e5d9..a2021612b0 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -841,8 +841,9 @@ a.card:focus-visible {
 
 :root {
   --landing-main-height: calc(100vh - 80px); /* Header Height (80px) */
-  --landing-background: url("/static/img/benefits-bg-mobile.jpg") no-repeat
+  --landing-background: url("/static/img/benefits-bg-mobile.webp") no-repeat
     var(--primary-color);
+  --landing-background-fallback-color: #1a1b16; /* same color the left side of the background image */
   --landing-box-background: var(--bs-white);
   --landing-box-border: 12px solid var(--primary-color);
   --landing-text-color: var(--text-primary-color);
@@ -854,7 +855,7 @@ a.card:focus-visible {
     --landing-main-height: calc(
       100vh - 130px
     ); /* 130px = Header Height (80px) + (Footer Link (50px) */
-    --landing-background: url("/static/img/benefits-bg-desktop.jpg") no-repeat;
+    --landing-background: url("/static/img/benefits-bg-desktop.webp") no-repeat;
     --landing-box-background: transparent;
     --landing-box-border: none;
     --landing-text-color: var(--bs-white);
@@ -865,6 +866,7 @@ a.card:focus-visible {
 .landing main#main-content {
   background: var(--landing-background);
   background-size: cover;
+  background-color: var(--landing-background-fallback-color);
 }
 
 .landing main#main-content .container .row:first-child {
diff --git a/benefits/static/img/benefits-bg-desktop.jpg b/benefits/static/img/benefits-bg-desktop.jpg
deleted file mode 100644
index 358369e472..0000000000
Binary files a/benefits/static/img/benefits-bg-desktop.jpg and /dev/null differ
diff --git a/benefits/static/img/benefits-bg-desktop.webp b/benefits/static/img/benefits-bg-desktop.webp
new file mode 100644
index 0000000000..62ca855022
Binary files /dev/null and b/benefits/static/img/benefits-bg-desktop.webp differ
diff --git a/benefits/static/img/benefits-bg-mobile.jpg b/benefits/static/img/benefits-bg-mobile.jpg
deleted file mode 100644
index 44b5165930..0000000000
Binary files a/benefits/static/img/benefits-bg-mobile.jpg and /dev/null differ
diff --git a/benefits/static/img/benefits-bg-mobile.webp b/benefits/static/img/benefits-bg-mobile.webp
new file mode 100644
index 0000000000..3875e91fd8
Binary files /dev/null and b/benefits/static/img/benefits-bg-mobile.webp differ