refactor: preload WebP background image based on media query

cal-itp · Nov 13, 2024 · d8e85c7 · d8e85c7
1 parent 526abe4
commit d8e85c7
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
@@ -11,6 +11,11 @@
   {% endblock title %}
 {% endblock page-title %}
 
+{% block preload %}
+  <link rel="preload" as="image" href="{% static "img/benefits-bg-mobile.webp" %}" media="(max-width: 992px)" />
+  <link rel="preload" as="image" href="{% static "img/benefits-bg-desktop.webp" %}" media="(min-width: 992px)">
+{% endblock preload %}
+
 {% block main-content %}
   <div class="container">
     <div class="row align-items-end align-items-lg-center">