From d8678e261d4646b410acbbe44c0b959154472f04 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Fri, 21 Nov 2025 11:10:50 +0100 Subject: [PATCH] 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 | 8 ++++---- src/components/CartItem.js | 2 +- src/components/CategoryBox.js | 6 +++--- src/components/Images.js | 6 +++--- src/components/Product.js | 2 +- src/components/ProductDetailPage.js | 6 +++--- src/components/configurator/ExtrasSelector.js | 2 +- src/pages/GrowTentKonfigurator.js | 2 +- 8 files changed, 17 insertions(+), 17 deletions(-) diff --git a/prerender/data-fetching.cjs b/prerender/data-fetching.cjs index 3ec5344..5c5aadb 100644 --- a/prerender/data-fetching.cjs +++ b/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 diff --git a/src/components/CartItem.js b/src/components/CartItem.js index 84c0066..41a83e6 100644 --- a/src/components/CartItem.js +++ b/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}); } }) diff --git a/src/components/CategoryBox.js b/src/components/CategoryBox.js index 1fe8c39..e43d2b4 100644 --- a/src/components/CategoryBox.js +++ b/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', diff --git a/src/components/Images.js b/src/components/Images.js index a87b34d..afa3052 100644 --- a/src/components/Images.js +++ b/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 ( diff --git a/src/components/Product.js b/src/components/Product.js index a72c99c..3f1375c 100644 --- a/src/components/Product.js +++ b/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 { diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js index 474b9a2..a6f6745 100644 --- a/src/components/ProductDetailPage.js +++ b/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 { diff --git a/src/components/configurator/ExtrasSelector.js b/src/components/configurator/ExtrasSelector.js index f8986b1..9f3dcee 100644 --- a/src/components/configurator/ExtrasSelector.js +++ b/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); diff --git a/src/pages/GrowTentKonfigurator.js b/src/pages/GrowTentKonfigurator.js index 65b05cb..8bf65d5 100644 --- a/src/pages/GrowTentKonfigurator.js +++ b/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);