Moved files

src/templates/components/Image/Image.tsx

@@ -0,0 +1,36 @@
+import sharp from 'sharp'
+import fs from 'fs'
+
+interface Props {
+  src: 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} />
+      </picture>
+    </>
+  )
+}