tweaking banner image loading performance

_layouts/default.html

@@ -9,10 +9,10 @@
 
     <title>{{ site.title }}</title>
 
-    <link rel="dns-prefetch" href="\cdn.jsdelivr.net">
-    <link rel="dns-prefetch" href="\use.fontawesome.com">
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
+    <link rel="dns-prefetch" href="//use.fontawesome.com">
 
-    <link rel="preload" href="/assets/images/header.webp" as="image">
+    <link rel="preload" as="image" href="/assets/images/header.webp-lores.jpg" fetchpriority="high">
 
     <link rel="icon" href="/favicon.png">
 

assets/css/animations.css

@@ -142,6 +142,25 @@
   animation: 2s bounceInRight ease-out;
 }
 
+/* https://www.youtube.com/watch?v=345V2MU3E_w */
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  font-style: italic;
+  background-repeat: no-repeat;
+  background-size: cover;
+  shape-margin: 1rem;
+}
+
+.banner {
+  min-height: 100vh;
+  min-height: 100svh;
+  background-size: cover;
+  background-image: url(/assets/images/header.webp), url(/assets/images/header-lores.jpg);
+  background-color: rgb(0, 102, 191);
+}
+
 .page-title {
   background-image: linear-gradient(to bottom, rgba(0, 102, 191, 0) 0%, rgba(0, 102, 191, 0.6) 35% 75%, rgba(0, 102, 191, 0) 100%);
 }

index.html

@@ -3,8 +3,7 @@
 permalink: /
 ---
 
-<section class="pt-5 pb-1 mt-0 align-items-center d-flex"
-  style="min-height: 100vh; min-height: 100svh; background-size: cover; background-image: url(/assets/images/header.webp); background-color: rgb(0, 102, 191);">
+<section class="pt-5 pb-1 mt-0 align-items-center d-flex banner">
   <div class="container-fluid">
     <div
       class="row justify-content-center align-items-center text-center d-flex h-100 ">