Serve appropriately sized images based on device pixel ratio

Author: yang-i-hu

assets/styles/sections/home.scss

@@ -12,9 +12,9 @@
     margin: 0;
     background-attachment: fixed;
     background-position: center;
-    transform: scale(1.1);
+    // Remove transform scale that causes blur
+    // transform: scale(1.1); 
     filter: saturate(1.1);
-    // filter: blur(3px);
     background-size: cover;
   }
 
@@ -32,7 +32,11 @@
   */
   @supports (-webkit-touch-callout: none) {
     .background {
+      // On iOS devices, use scroll instead of fixed
       background-attachment: scroll;
+      // Ensure background covers the full area
+      min-height: 100vh;
+      background-size: cover;
     }
   }
 

layouts/partials/sections/home.html

@@ -75,32 +75,44 @@
 
 <div class="container-fluid home" id="home">
   <style>
-    /* 0 to 299 */
+    /* Base styles for all screens */
     #homePageBackgroundImageDivStyled {
-      background-image: url('{{ $tiny.RelPermalink }}');
+      background-image: image-set(
+          url('{{ $tiny.RelPermalink }}') 1x,
+          url('{{ $small.RelPermalink }}') 2x,
+          url('{{ $medium.RelPermalink }}') 3x);
     }
-    /* 300 to X */
-    @media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously.  */
-      #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ $small.RelPermalink }}');
-        }
+    
+    /* Medium screens */
+    @media (min-width: 500px) and (max-width: 800px) {
+      #homePageBackgroundImageDivStyled {
+        background-image: image-set(
+            url('{{ $small.RelPermalink }}') 1x,
+            url('{{ $medium.RelPermalink }}') 2x,
+            url('{{ $large.RelPermalink }}') 3x);
+      }
     }
-    @media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously.  */
-      #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ $medium.RelPermalink }}');
-        }
+    
+    /* Larger screens */
+    @media (min-width: 801px) and (max-width: 1200px) {
+      #homePageBackgroundImageDivStyled {
+        background-image: image-set(
+            url('{{ $medium.RelPermalink }}') 1x,
+            url('{{ $large.RelPermalink }}') 2x,
+            url('{{ $src.RelPermalink }}') 3x);
+      }
     }
-    @media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously.  */
-      #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ $large.RelPermalink }}');
-        }
+    
+    /* Largest screens */
+    @media (min-width: 1201px) {
+      #homePageBackgroundImageDivStyled {
+        background-image: image-set(
+            url('{{ $large.RelPermalink }}') 1x,
+            url('{{ $src.RelPermalink }}') 2x,
+            url('{{ $src.RelPermalink }}') 3x);
+      }
     }
-    @media (min-width: 1501px) { /* or 301 if you want really the same as previously.  */
-      #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ $src.RelPermalink }}');
-        }
-    }
-    </style>
+  </style>
     <span class="on-the-fly-behavior"></span>
   <div
     id="homePageBackgroundImageDivStyled"

public/404.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<link rel="stylesheet" href="/application.012fbad9bd15eea7a2faa7c286d22af5d7283632c9f6ee1be941f8e89cdf0c9b.css" integrity="sha256-AS&#43;62b0V7qei&#43;qfChtIq9dcoNjLJ9u4b6UH46JzfDJs=" />
+<link rel="stylesheet" href="/application.8ce90bbb69348f3eaaddd2b70d0853a45309ac41d5c6410b5771c44f4da32383.css" integrity="sha256-jOkLu2k0jz6q3dK3DQhTpFMJrEHVxkELV3HET02jI4M=" />
 
 
 

public/application.186287df1dc97e02c3031b9bacaab277ab94f36f88136d401f46d8665a8f1a8f.css

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<link rel="stylesheet" href="/application.012fbad9bd15eea7a2faa7c286d22af5d7283632c9f6ee1be941f8e89cdf0c9b.css" integrity="sha256-AS&#43;62b0V7qei&#43;qfChtIq9dcoNjLJ9u4b6UH46JzfDJs=" />
+<link rel="stylesheet" href="/application.8ce90bbb69348f3eaaddd2b70d0853a45309ac41d5c6410b5771c44f4da32383.css" integrity="sha256-jOkLu2k0jz6q3dK3DQhTpFMJrEHVxkELV3HET02jI4M=" />