Feat: use pre-loaded WebP background image on homepage (#2523)

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 %}

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">

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 {