Updated background component

src/builtin-components/Background/Background.tsx

@@ -1,21 +1,40 @@
 import './Background.sass'
-import { Show } from 'solid-js'
+import { Show, createSignal } from 'solid-js'
-import backgroundAvif from '../../assets/images/background.avif'
+// import backgroundAvif from '../../assets/images/background.avif'
-import backgroundWebp from '../../assets/images/background.webp'
+// import backgroundWebp from '../../assets/images/background.webp'
+import sharp from 'sharp'
+import fs from 'fs'
 
 interface Props {
   image?: boolean
   color?: string
 }
 
+const convertBackground = async (props: Props) => {
+  const webpOutputPath = 'src/assets/compressed-images/background.webp'
+  const avifOutputPath = 'src/assets/compressed-images/background.avif'
+  const inputPath = 'src/assets/images/background.png'
+
+  if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
+    const webpBuffer = await sharp(inputPath).webp({ quality: 75 }).resize(1920).toBuffer()
+    await sharp(webpBuffer).toFile(webpOutputPath)
+
+    const avifBuffer = await sharp(inputPath).avif({ quality: 60 }).resize(1920).toBuffer()
+    await sharp(avifBuffer).toFile(avifOutputPath)
+  }
+}
+
 export default (props: Props) => {
+  let [imageSrc] = createSignal('src/assets/compressed-images/background.webp')
+  convertBackground(props)
+
   return (
     <>
       <Show when={props.image}>
         <picture class="fullscreen">
-          <source srcset={backgroundAvif.src} type="image/avif" />
+          <source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
-          <source srcset={backgroundWebp.src} type="image/webp" />
+          <source srcset={imageSrc()} type="image/webp" />
-          <img src={backgroundWebp.src} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          <img src={imageSrc()} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
         </picture>
       </Show>