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

src/components/CartItem.js

@@ -23,7 +23,7 @@ class CartItem extends Component {
 
           window.socketManager.emit('getPic', { bildId:picid, size:'tiny' }, (res) => {
             if(res.success){
-              window.tinyPicCache[picid] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+              window.tinyPicCache[picid] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
               this.setState({image: window.tinyPicCache[picid], loading: false});
             }
           })

src/components/CategoryBox.js

@@ -47,7 +47,7 @@ const CategoryBox = ({
         // Create fresh blob URL from cached binary data
         try {
           const uint8Array = new Uint8Array(cachedImageData);
-          const blob = new Blob([uint8Array], { type: 'image/jpeg' });
+          const blob = new Blob([uint8Array], { type: 'image/avif' });
           objectUrl = URL.createObjectURL(blob);
           setImageUrl(objectUrl);
           setImageError(false);
@@ -73,7 +73,7 @@ const CategoryBox = ({
             try {
               // Convert binary data to blob URL
               const uint8Array = new Uint8Array(imageData);
-              const blob = new Blob([uint8Array], { type: 'image/jpeg' });
+              const blob = new Blob([uint8Array], { type: 'image/avif' });
               objectUrl = URL.createObjectURL(blob);
               setImageUrl(objectUrl);
               setImageError(false);
@@ -158,7 +158,7 @@ const CategoryBox = ({
         position: 'relative',
         backgroundImage: ((typeof window !== 'undefined' && window.__PRERENDER_FALLBACK__) ||
                           (typeof global !== 'undefined' && global.window && global.window.__PRERENDER_FALLBACK__))
-          ? `url("/assets/images/cat${id}.jpg")` 
+          ? `url("/assets/images/cat${id}.avif")` 
           : (imageUrl && !imageError ? `url("${imageUrl}")` : 'none'),
         backgroundSize: 'cover',
         backgroundPosition: 'center',

src/components/Images.js

@@ -56,7 +56,7 @@ class Images extends Component {
             pics.push(window.tinyPicCache[bildId]);
             this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
           }else{
-            pics.push(`/assets/images/prod${bildId}.jpg`);
+            pics.push(`/assets/images/prod${bildId}.avif`);
             this.loadPic(this.props.fullscreenOpen ? 'large' : 'medium',bildId,newMainPic);
           }  
         }else{
@@ -84,7 +84,7 @@ class Images extends Component {
     
     window.socketManager.emit('getPic', { bildId, size }, (res) => {
       if(res.success){
-        const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+        const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
 
         if(size === 'medium') window.mediumPicCache[bildId] = url;
         if(size === 'small') window.smallPicCache[bildId] = url;
@@ -118,7 +118,7 @@ class Images extends Component {
       if (!this.props.pictureList || !this.props.pictureList.trim()) {
         return '/assets/images/nopicture.jpg';
       }
-      return `/assets/images/prod${this.props.pictureList.split(',')[0].trim()}.jpg`;
+      return `/assets/images/prod${this.props.pictureList.split(',')[0].trim()}.avif`;
     };
 
     return (

src/components/Product.js

@@ -101,7 +101,7 @@ class Product extends Component {
       console.log('loadImagevisSocket', bildId);
       window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
         if(res.success){
-          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
           if (this._isMounted) {
             this.setState({image: window.smallPicCache[bildId], loading: false});
           } else {

src/components/ProductDetailPage.js

@@ -305,7 +305,7 @@ class ProductDetailPage extends Component {
     window.socketManager.emit('getPic', { bildId, size: 'small' }, (res) => {
       if (res.success) {
         // Cache the image
-        window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+        window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
         
         // Update state
         this.setState(prevState => ({
@@ -546,7 +546,7 @@ class ProductDetailPage extends Component {
               console.log("getAttributePicture", res);
               if (res.success && !res.noPicture) {
                 const blob = new Blob([res.imageBuffer], {
-                  type: "image/jpeg",
+                  type: "image/avif",
                 });
                 const url = URL.createObjectURL(blob);
 
@@ -1047,7 +1047,7 @@ class ProductDetailPage extends Component {
       console.log('loadEmbeddedProductImage response:', articleNr, res.success);
       
       if (res.success) {
-        const imageUrl = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+        const imageUrl = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
         this.setState(prevState => {
           console.log('Setting embedded product image for', articleNr);
           return {

src/components/configurator/ExtrasSelector.js

@@ -63,7 +63,7 @@ class ExtrasSelector extends Component {
       this.loadingImages.add(bildId);
       window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
         if (res.success) {
-          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
           this.forceUpdate();
         }
         this.loadingImages.delete(bildId);

src/pages/GrowTentKonfigurator.js

@@ -513,7 +513,7 @@ class GrowTentKonfigurator extends Component {
       this.loadingImages.add(bildId);
       window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
         if (res.success) {
-          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
+          window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/avif' }));
           this.forceUpdate();
         }
         this.loadingImages.delete(bildId);