From 2b6471975803e97b62c5daceedb47b2efe825406 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 15:19:16 +0200
Subject: [PATCH] feat: optimize image loading and critical rendering path by
 adding image preloads in webpack config, updating image handling in multiple
 components, and ensuring alt attributes are set for accessibility

---
 src/components/Content.js        | 48 +++++++++++++++++++++++++-------
 src/components/Images.js         |  5 ++++
 src/components/MainPageLayout.js | 22 ++++++++++++---
 src/components/ProductImage.js   |  1 +
 webpack.config.js                | 20 ++++++++++++-
 5 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/src/components/Content.js b/src/components/Content.js
index 5e6f666..3577c97 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -634,12 +634,26 @@ class Content extends Component {
             <Box sx={{
               height: '100%',
               bgcolor: '#e1f0d3',
-              backgroundImage: 'url("/assets/images/seeds.jpg")',
-              backgroundSize: 'contain',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
-              position: 'relative'
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
             }}>
+              <img
+                src="/assets/images/seeds.jpg"
+                alt="Seeds"
+                fetchPriority="high"
+                loading="eager"
+                style={{
+                  maxWidth: '100%',
+                  maxHeight: '100%',
+                  objectFit: 'contain',
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)'
+                }}
+              />
               {/* Overlay text - optional */}
               <Box sx={{
                 position: 'absolute',
@@ -681,12 +695,26 @@ class Content extends Component {
             <Box sx={{
               height: '100%',
               bgcolor: '#e8f5d6',
-              backgroundImage: 'url("/assets/images/cutlings.jpg")',
-              backgroundSize: 'contain',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
-              position: 'relative'
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
             }}>
+              <img
+                src="/assets/images/cutlings.jpg"
+                alt="Stecklinge"
+                fetchPriority="high"
+                loading="eager"
+                style={{
+                  maxWidth: '100%',
+                  maxHeight: '100%',
+                  objectFit: 'contain',
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)'
+                }}
+              />
               {/* Overlay text - optional */}
               <Box sx={{
                 position: 'absolute',
diff --git a/src/components/Images.js b/src/components/Images.js
index 2879e1a..aa0952d 100644
--- a/src/components/Images.js
+++ b/src/components/Images.js
@@ -132,6 +132,7 @@ class Images extends Component {
               component="img"
               height="400"
               image={getImagePath(this.props.pictureList)}
+              alt={this.props.productName || 'Produktbild'}
               fetchPriority="high"
               loading="eager"
               sx={{ 
@@ -174,6 +175,7 @@ class Images extends Component {
             height="400" 
             fetchPriority="high"
             loading="eager"
+            alt={this.props.productName || 'Produktbild'}
             sx={{ 
               objectFit: 'contain',
               cursor: 'pointer',
@@ -236,6 +238,7 @@ class Images extends Component {
                 <CardMedia 
                   component="img" 
                   height="80" 
+                  alt={`${this.props.productName || 'Produktbild'} - Bild ${originalIndex + 1}`}
                   sx={{ 
                     objectFit: 'contain',
                     cursor: 'pointer',
@@ -308,6 +311,7 @@ class Images extends Component {
             {this.state.pics[this.state.mainPic] && (
                               <CardMedia 
                   component="img" 
+                  alt={this.props.productName || 'Produktbild'}
                   sx={{                               
                     objectFit: 'contain',
                     width: '90vw',
@@ -361,6 +365,7 @@ class Images extends Component {
                         <CardMedia 
                           component="img" 
                           height="60" 
+                          alt={`${this.props.productName || 'Produktbild'} - Miniaturansicht ${originalIndex + 1}`}
                           sx={{ 
                             objectFit: 'contain',
                             cursor: 'pointer',
diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index d1a356a..a346a2f 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -606,13 +606,27 @@ const MainPageLayout = () => {
                       sx={{
                         height: "100%",
                         bgcolor: box.bgcolor,
-                        backgroundImage: `url("${box.image}")`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "center",
-                        backgroundRepeat: "no-repeat",
                         position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
                       }}
                     >
+                      <img
+                        src={box.image}
+                        alt={box.title}
+                        fetchPriority="high"
+                        loading="eager"
+                        style={{
+                          maxWidth: "100%",
+                          maxHeight: "100%",
+                          objectFit: "contain",
+                          position: "absolute",
+                          top: "50%",
+                          left: "50%",
+                          transform: "translate(-50%, -50%)",
+                        }}
+                      />
                       <Box
                         sx={{
                           position: "absolute",
diff --git a/src/components/ProductImage.js b/src/components/ProductImage.js
index 5820b21..075ad6a 100644
--- a/src/components/ProductImage.js
+++ b/src/components/ProductImage.js
@@ -41,6 +41,7 @@ const ProductImage = ({
           socket={socket}
           socketB={socketB}
           pictureList={product.pictureList}
+          productName={product.name}
           fullscreenOpen={fullscreenOpen}
           onOpenFullscreen={onOpenFullscreen}
           onCloseFullscreen={onCloseFullscreen}
diff --git a/webpack.config.js b/webpack.config.js
index 0d5e808..8e130d8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -161,14 +161,32 @@ class InlineCssPlugin {
               fontPreloads += `<link rel="preload" href="${fontUrl}" as="font" type="font/truetype" crossorigin>\n`;
             });
             
+            // Add critical image preloads for LCP optimization
+            const criticalImages = [
+              '/assets/images/filiale1.jpg',
+              '/assets/images/filiale2.jpg',
+              '/assets/images/seeds.jpg',
+              '/assets/images/cutlings.jpg',
+              '/assets/images/presse.jpg',
+              '/assets/images/purpl.jpg'
+            ];
+            
+            let imagePreloads = '';
+            criticalImages.forEach(imagePath => {
+              imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`;
+            });
+            
             // Add inlined CSS to head
             const styleTag = `<style type="text/css">${inlinedCss.trim()}</style>`;
-            data.html = data.html.replace('</head>', `${fontPreloads}${styleTag}\n</head>`);
+            data.html = data.html.replace('</head>', `${fontPreloads}${imagePreloads}${styleTag}\n</head>`);
             
             console.log(`✅ Inlined CSS assets: ${cssAssets.join(', ')} (${Math.round(inlinedCss.length / 1024)}KB)`);
             if (fontUrls.length > 0) {
               console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
             }
+            if (criticalImages.length > 0) {
+              console.log(`✅ Added image preloads: ${criticalImages.length} critical images`);
+            }
           }
           
           cb(null, data);