diff --git a/src/templates/components/Optimizer/OptimizeImage.tsx b/src/templates/components/Optimizer/OptimizeImage.tsx
new file mode 100644
index 0000000..4edf349
--- /dev/null
+++ b/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)
+}