web: optimize favicon.ico and icon.png

web/src/components/layout/Footer.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import styles from "./footer.module.scss";
 import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
-import { ToTop } from "./ToTop";
+import { PigPattern } from "./PigPattern";
 import { Icon } from "../general/Icon";
 import {
   getOpeningHours,
@@ -145,11 +145,7 @@ export const Footer = () => {
           <NeonChillPig />
         </div>
       </footer>
-      <div className={styles.pigPattern}>
+      <PigPattern />
-        <div className={styles.toTop}>
-          <ToTop />
-        </div>
-      </div>
     </>
   );
 };

web/src/components/layout/PigPattern.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { useInView } from "react-intersection-observer";
+import styles from "./footer.module.scss";
+import { ToTop } from "./ToTop";
+
+export const PigPattern = () => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    rootMargin: "1000px",
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={`${styles.pigPattern} ${inView ? styles.loaded : ""}`}
+    >
+      <div className={styles.toTop}>
+        <ToTop />
+      </div>
+    </div>
+  );
+};

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

@@ -101,7 +101,6 @@
 
 .pigPattern {
   background-color: var(--color-background);
-  background-image: url("/assets/graphics/grisemonster-800.png");
   background-size: 100% auto;
   background-position: 0 100%;
   background-attachment: fixed;
@@ -111,6 +110,9 @@
   position: relative;
   z-index: 700;
 
+  &.loaded {
+    background-image: url("/assets/graphics/grisemonster-800.png");
+
     @media (min-width: 601px) {
       background-image: url("/assets/graphics/grisemonster-1280.png");
     }
@@ -118,6 +120,7 @@
     @media (min-width: 1281px) {
       background-image: url("/assets/graphics/grisemonster-2048.png");
     }
+  }
 
   @media (orientation: landscape) {
     background-size: 100% auto;