Fixes image optimization

Author: d13

assets/bundle/main.js

@@ -108,8 +108,8 @@ import{a as o,b as p,c as $,d as N,e as n,f as k,g as O,h as S}from"./chunks/chu
       <time datetime="${this.endingDate.toISOString()}">${D(this.endingDate)}</time>
     </div>`}renderMedia(){return this.asset===void 0?k:n`<div class="media-zone">
       <div class="media-container">
-        <img class="media-cover" src="${this.asset}" alt="" />
-        <img class="media" src="${this.asset}" alt="" />
+        <img class="media-cover" loading="lazy" src="${this.asset}" alt="" />
+        <img class="media" loading="lazy" src="${this.asset}" alt="" />
       </div>
     </div>`}render(){return n`
       <div class="timeline-zone">

assets/favicon-opt/android-chrome-192x192.png

@@ -16,9 +16,9 @@
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#041c38" />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon-opt/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-opt/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-opt/favicon-16x16.png" />
     <link rel="manifest" href="./site.webmanifest" />
 
     <link rel="preload" href="./assets/media-opt/features/phone-mergein-rough.webp" as="image" />

assets/favicon-opt/android-chrome-512x512.png

@@ -3,6 +3,7 @@ import { globby } from 'globby';
 import { existsSync } from 'fs';
 import { writeFile, mkdir } from 'fs/promises';
 import { dirname } from 'path';
+import { dir } from 'console';
 
 const createFileAndDirectories = async (file, buffer) => {
   const dir = dirname(file);
@@ -12,15 +13,20 @@ const createFileAndDirectories = async (file, buffer) => {
   return writeFile(file, buffer);
 };
 
-const imageOptimize = async () => {
-  const files = await globby(['assets/media/**/*.{png,jpg,jpeg}']);
+const imageOptimize = async (dir, ext) => {
+  const files = await globby([`assets/${dir}/**/*.{png,jpg,jpeg}`]);
   const promises = files.map(async file => {
-    const optimized = file.replace('media', 'media-opt').replace(/\.(png|jpg|jpeg)$/, '.webp');
-    const optimizedBuffer = await sharp(file).toFormat('webp', { lossless: true }).toBuffer();
+    const optimized = file.replace(dir, `${dir}-opt`).replace(/\.(png|jpg|jpeg)$/, `.${ext}`);
+    const optimizedBuffer = await sharp(file).toFormat(ext, { lossless: true }).toBuffer();
     await createFileAndDirectories(optimized, optimizedBuffer);
   });
   await Promise.all(promises);
 };
 
-await imageOptimize();
+await Promise.all(
+  [
+    ['media', 'webp'],
+    ['favicon', 'png'],
+  ].map(([dir, ext]) => imageOptimize(dir, ext)),
+);
 console.log('Images optimized');

assets/favicon-opt/apple-touch-icon.png

@@ -2,8 +2,8 @@
   "name": "Keith Daulton | Design Technologist, User Experience Engineer, Technical Leader",
   "short_name": "Keith Daulton",
   "icons": [
-    { "src": "./assets/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
-    { "src": "./assets/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+    { "src": "./assets/favicon-opt/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "./assets/favicon-opt/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",

assets/favicon-opt/favicon-16x16.png

@@ -240,8 +240,8 @@ export class KdLifeEvent extends KdBaseElement {
     if (this.asset === undefined) return nothing;
     return html`<div class="media-zone">
       <div class="media-container">
-        <img class="media-cover" src="${this.asset}" alt="" />
-        <img class="media" src="${this.asset}" alt="" />
+        <img class="media-cover" loading="lazy" src="${this.asset}" alt="" />
+        <img class="media" loading="lazy" src="${this.asset}" alt="" />
       </div>
     </div>`;
   }