Refactor image optimization to use Astro's built-in image service and update configuration for improved performance

astro.config.ts

@@ -118,17 +118,9 @@ export default defineConfig({
   ],
 
   image: {
-    domains: ['cdn.pixabay.com', 'raw.githubusercontent.com'],
+    service: {
-    remotePatterns: [
+      entrypoint: 'astro/assets/services/sharp',
-      {
-        protocol: 'https',
-        hostname: 'cdn.pixabay.com',
     },
-      {
-        protocol: 'https',
-        hostname: 'raw.githubusercontent.com',
-      },
-    ],
   },
 
   markdown: {

src/utils/image.ts

@@ -1,4 +1,4 @@
-import sharp from 'sharp';
+import { getImage } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 
 interface OptimizeImageOptions {
@@ -7,7 +7,6 @@ interface OptimizeImageOptions {
   height?: number;
   format?: 'webp' | 'avif' | 'jpeg' | 'png';
   quality?: number;
-  fit?: keyof sharp.FitEnum;
 }
 
 export async function optimizeImage({
@@ -16,49 +15,20 @@ export async function optimizeImage({
   height,
   format = 'webp',
   quality = 80,
-  fit = 'cover',
 }: OptimizeImageOptions): Promise<ImageMetadata> {
   try {
-    // Load the image
+    const optimized = await getImage({
-    const image = sharp(src);
+      src,
-
+      width,
-    // Get original metadata
+      height,
-    const metadata = await image.metadata();
+      format,
-
+      quality,
-    // Resize if dimensions are provided
-    if (width || height) {
-      image.resize({
-        width: width || undefined,
-        height: height || undefined,
-        fit,
-        withoutEnlargement: true,
     });
-    }
 
-    // Convert to specified format
-    switch (format) {
-      case 'webp':
-        image.webp({ quality });
-        break;
-      case 'avif':
-        image.avif({ quality });
-        break;
-      case 'jpeg':
-        image.jpeg({ quality });
-        break;
-      case 'png':
-        image.png({ quality });
-        break;
-    }
-
-    // Generate optimized buffer
-    const optimizedBuffer = await image.toBuffer();
-
-    // Return metadata
     return {
-      src: `data:image/${format};base64,${optimizedBuffer.toString('base64')}`,
+      src: optimized.src,
-      width: width || metadata.width || 0,
+      width: optimized.attributes.width,
-      height: height || metadata.height || 0,
+      height: optimized.attributes.height,
       format,
     };
   } catch (error) {