Updated

.gitignore

@@ -28,3 +28,6 @@ pnpm-debug.log*
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Custom
+src/assets/

src/pages/next.astro

@@ -3,18 +3,22 @@ import Layout from '../layouts/Layout.astro'
 import Button from '../templates/components/Button/Button.tsx'
 import Image from '../templates/components/Image/Image'
 import Page from '../templates/components/Page/Page'
+import sampleA from '../templates/images/sample.avif'
+import sampleW from '../templates/images/sample.avif'
+import OptimizeImage from '../templates/components/Optimizer/OptimizeImage'
 ---
 
 <Layout title="Home">
-  <Page alignment='column'>
+  <Page alignment="column">
     <h1>Built-in Components</h1>
-    <Button edges='rounded' label="Back to Home" to="/" />
+    <Button edges="rounded" label="Back to Home" to="/" />
 
     <section class="image">
-      <Image src="sample.png" alt="Example Image" size={400} />
-      <Image src="sample.png" alt="Example Image" size={400} />
-      <Image src="sample.png" alt="Example Image" size={400} />
-      <Image src="sample.png" alt="Example Image" size={400} />
+      <!-- <OptimizeImage src="sample.png" size={400} /> -->
+      <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
+      <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
+      <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
+      <Image avif={sampleA.src} webp={sampleW.src} alt="Example Image" size={400} />
     </section>
   </Page>
 </Layout>

src/templates/components/Image/Image.tsx

@@ -1,35 +1,17 @@
-import sharp from 'sharp'
-import fs from 'fs'
-
 interface Props {
-  src: string
+  avif: string
+  webp: string
   size?: number
   alt?: string
 }
 
-const convertImage = async (props: Props) => {
-  const avifOutputPath = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.avif`
-  const webpOutputPath = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
-
-  if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
-    const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
-    await sharp(avifBuffer).toFile(avifOutputPath)
-
-    const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
-    await sharp(webpBuffer).toFile(webpOutputPath)
-  }
-}
-
 export default (props: Props) => {
-  const imageSrc = `src/assets/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
-  convertImage(props)
-
   return (
     <>
       <picture>
-        <source srcset={imageSrc.replace(/\.webp$/, '.avif')} type="image/avif" />
-        <source srcset={imageSrc} type="image/webp" />
-        <img src={imageSrc} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+        <source srcset={props.avif} type="image/avif" />
+        <source srcset={props.webp} type="image/webp" />
+        <img width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
       </picture>
     </>
   )

src/templates/components/Optimizer/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `src/templates/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `src/templates/images/${props.src.split('.').slice(0, -1).join('.')}.webp`
+
+  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutputPath)
+
+  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutputPath)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+}

src/templates/components/Optimizer/OptimizeLogo.tsx

@@ -2,7 +2,6 @@ import sharp from 'sharp'
 
 interface Props {
   size?: number
-  alt?: string
 }
 
 const convertLogo = async (props: Props) => {