web: optimize delivery of pig pattern in footer

web/src/components/layout/footer.module.scss

@@ -101,7 +101,7 @@
 
 .pigPattern {
   background-color: var(--color-background);
-  background-image: url("/assets/graphics/grisemonster.png");
+  background-image: url("/assets/graphics/grisemonster-800.png");
   background-size: 100% auto;
   background-position: 0 100%;
   background-attachment: fixed;
@@ -111,6 +111,14 @@
   position: relative;
   z-index: 700;
 
+  @media (min-width: 601px) {
+    background-image: url("/assets/graphics/grisemonster-1280.png");
+  }
+
+  @media (min-width: 1281px) {
+    background-image: url("/assets/graphics/grisemonster-2048.png");
+  }
+
   @media (orientation: landscape) {
     background-size: 100% auto;
   }
@@ -142,7 +150,7 @@
   }
   .visit {
     grid-column: span 1;
-    
+
     .visitContent {
       display: flex;
       flex-wrap: wrap;
@@ -154,7 +162,7 @@
         min-width: 12rem;
       }
     }
-    
+
   }
   .social {
     ul {
@@ -172,4 +180,4 @@
       padding-right: 2rem;
     }
   }
-}
+}