Update masthead LQIPs

csswizardry · Aug 25, 2023 · 0c8a2f6 · 0c8a2f6
1 parent 0a44b5c
commit 0c8a2f6
Show file tree

Hide file tree

Showing 13 changed files with 12 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ bower_components/
 _drafts/
 Icon
 Gemfile.lock
+img/css/_masthead.jpg

diff --git a/_includes/css/components.page-head--masthead.css b/_includes/css/components.page-head--masthead.css
diff --git a/_includes/header--masthead.html b/_includes/header--masthead.html
@@ -8,9 +8,13 @@
   - Only needed on homepage.
   -->
 {% endcomment %}
-<link rel=preload href=/img/css/masthead.4c100a13.jpg as=image media="(max-width: 44.9375em)" fetchpriority=high>
-<link rel=preload href=/img/css/masthead-medium.e55920c9.jpg as=image media="(min-width: 45em) and (max-width: 63.9375em)" fetchpriority=high>
-<link rel=preload href=/img/css/masthead-large.3cbc4956.jpg as=image media="(min-width: 64em)" fetchpriority=high>
+
+<link rel=preload href=/img/css/masthead-small-lqip.jpg  as=image media="(max-width: 44.9375em)" fetchpriority=high>
+<!-- <link rel=preload href=/img/css/masthead-small.jpg       as=image media="(max-width: 44.9375em)" fetchpriority=high> -->
+<link rel=preload href=/img/css/masthead-medium-lqip.jpg as=image media="(min-width: 45em)       and (max-width: 63.9375em)" fetchpriority=high>
+<!-- <link rel=preload href=/img/css/masthead-medium.jpg      as=image media="(min-width: 45em)       and (max-width: 63.9375em)" fetchpriority=high> -->
+<link rel=preload href=/img/css/masthead-large-lqip.jpg  as=image media="(min-width: 64em)"      fetchpriority=high>
+<!-- <link rel=preload href=/img/css/masthead-large.jpg       as=image media="(min-width: 64em)"      fetchpriority=high> -->
 
 {% include ribbon.html %}
 

diff --git a/css/isolated/components.page-head--masthead.scss b/css/isolated/components.page-head--masthead.scss
@@ -37,7 +37,7 @@
     margin-bottom: 0;
     position: static;
     background-color: #2e2620;
-    background-image: url(/img/css/masthead.4c100a13.jpg), var(--base64);
+    background-image: url(/img/css/masthead-small.jpg), url(/img/css/masthead-small-lqip.jpg), var(--base64);
     background-position: center 25%;
     @include vendor(background-size, cover);
     color: $color-masthead; /* [1] */
@@ -46,11 +46,11 @@
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
 
     @include media-query(lap-and-up) {
-        background-image: url(/img/css/masthead-medium.e55920c9.jpg), var(--base64);
+        background-image: url(/img/css/masthead-medium.jpg), url(/img/css/masthead-medium-lqip.jpg), var(--base64);
     }
 
     @include media-query(desk) {
-        background-image: url(/img/css/masthead-large.3cbc4956.jpg), var(--base64);
+        background-image: url(/img/css/masthead-large.jpg), url(/img/css/masthead-large-lqip.jpg), var(--base64);
     }
 
     > .wrapper { /* [2] */

diff --git a/img/css/masthead-large-lqip.jpg b/img/css/masthead-large-lqip.jpg
diff --git a/img/css/masthead-large.3cbc4956.jpg b/img/css/masthead-large.3cbc4956.jpg
diff --git a/img/css/masthead-large.jpg b/img/css/masthead-large.jpg
diff --git a/img/css/masthead-medium-lqip.jpg b/img/css/masthead-medium-lqip.jpg
diff --git a/img/css/masthead-medium.e55920c9.jpg b/img/css/masthead-medium.e55920c9.jpg
diff --git a/img/css/masthead-medium.jpg b/img/css/masthead-medium.jpg
diff --git a/img/css/masthead-small-lqip.jpg b/img/css/masthead-small-lqip.jpg
diff --git a/img/css/masthead-small.jpg b/img/css/masthead-small.jpg
diff --git a/img/css/masthead.4c100a13.jpg b/img/css/masthead.4c100a13.jpg