webp for background static header

wri · Nov 21, 2024 · f974945 · f974945
1 parent 2103c1d
commit f974945
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 31 deletions.
diff --git a/components/ui/static-header.js b/components/ui/static-header.js
@@ -42,10 +42,16 @@ class StaticHeader extends React.Component {
     return (
       <div
         className={`c-static-header ${customClasses}`}
-        style={{
-          backgroundImage: `url(${background})`,
-        }}
       >
+        <div className="c-static-background">
+          <picture>
+            {/* make sure webp image is also available */}
+            <source type="image/webp" srcSet={background.replace('.jpg', '.webp')} />
+            <source type="image/jpeg" srcSet={background} />
+            <img src={background} alt="" />
+          </picture>
+        </div>
+
         {tabs ? (
           <div className="wrapper">
             <div className="container">

diff --git a/css/components/page/_static-header.scss b/css/components/page/_static-header.scss
@@ -6,9 +6,7 @@
   width: 100%;
   min-height: 220px;
 
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
+  position: relative;
 
   text-align: center;
 

diff --git a/css/components/page/_static-section.scss b/css/components/page/_static-section.scss
@@ -10,37 +10,37 @@
     height: 80vh;
     max-height: 720px;
   }
+}
 
-  .c-static-background {
-    display: block;
-    overflow: hidden;
+.c-static-background {
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  box-sizing: border-box;
+  margin: 0;
+
+  img {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     box-sizing: border-box;
-    margin: 0;
-
-    img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      box-sizing: border-box;
-      padding: 0;
-      border: none;
-      margin: auto;
-      display: block;
-      width: 0;
-      height: 0;
-      min-width: 100%;
-      max-width: 100%;
-      min-height: 100%;
-      max-height: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
+    padding: 0;
+    border: none;
+    margin: auto;
+    display: block;
+    width: 0;
+    height: 0;
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: center;
   }
 }
diff --git a/public/static/images/static-header/bg-about.webp b/public/static/images/static-header/bg-about.webp
diff --git a/public/static/images/static-header/bg-help.webp b/public/static/images/static-header/bg-help.webp
diff --git a/public/static/images/static-header/bg-observations.webp b/public/static/images/static-header/bg-observations.webp
diff --git a/public/static/images/static-header/bg-operator-detail.webp b/public/static/images/static-header/bg-operator-detail.webp