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