feat(Images): update image handling to AVIF format across components

- Changed image file extensions from JPG to AVIF in data-fetching, product, category, and image components for improved performance and reduced file sizes.
- Updated image blob creation to reflect the new AVIF format in various components, ensuring consistency in image handling throughout the application.

prerender/data-fetching.cjs

@@ -185,7 +185,7 @@ const saveProductImages = async (socket, products, categoryName, outputDir) => {
       if (imageIds.length > 0) {
         // Process first image for each product
         const bildId = parseInt(imageIds[0]);
-        const estimatedFilename = `prod${bildId}.jpg`; // We'll generate a filename based on the ID
+        const estimatedFilename = `prod${bildId}.avif`; // We'll generate a filename based on the ID
 
         const imagePath = path.join(assetsPath, estimatedFilename);
 
@@ -231,7 +231,7 @@ const saveProductImages = async (socket, products, categoryName, outputDir) => {
                     opacity: 0.3, 
                   },
                 ])
-                .jpeg() // Ensure output is JPEG
+                .avif() // Ensure output is AVIF
                 .toBuffer();
 
               fs.writeFileSync(imagePath, processedImageBuffer);
@@ -281,7 +281,7 @@ const saveCategoryImages = async (socket, categories, outputDir) => {
   // Debug: Log categories that will be processed
   console.log("   🔍 Categories to process:");
   categories.forEach((cat, index) => {
-    console.log(`     ${index + 1}. "${cat.name}" (ID: ${cat.id}) -> cat${cat.id}.jpg`);
+    console.log(`     ${index + 1}. "${cat.name}" (ID: ${cat.id}) -> cat${cat.id}.avif`);
   });
 
   const assetsPath = path.resolve(
@@ -308,7 +308,7 @@ const saveCategoryImages = async (socket, categories, outputDir) => {
   for (const category of categories) {
     categoriesProcessed++;
     
-    const estimatedFilename = `cat${category.id}.jpg`; // Use 'cat' prefix with category ID
+    const estimatedFilename = `cat${category.id}.avif`; // Use 'cat' prefix with category ID
     const imagePath = path.join(assetsPath, estimatedFilename);
 
     // Skip if image already exists