From 972e41d52896b511faadf5793fe011f2cf191046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 22 Jun 2026 18:48:26 +0400
Subject: [PATCH] feat: optimize paroles images

---
 components/teks/teks-kat.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js
index 5510df5..80e5e52 100644
--- a/components/teks/teks-kat.js
+++ b/components/teks/teks-kat.js
@@ -9,7 +9,6 @@ import Card from '@mui/material/Card'
 
 import CardActionArea from '@mui/material/CardActionArea'
 import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
@@ -23,20 +22,15 @@ const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337
 
 const classes = {
   root: `${PREFIX}-root`,
-  media: `${PREFIX}-media`
 }
 
 const StyledGrid = styled(Grid)({
   [`& .${classes.root}`]: {
     maxWidth: 345
   },
-  [`& .${classes.media}`]: {
-    height: 240,
-    objectFit: 'contain'
-  }
 })
 
-const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
+const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
 
 export default function TeksKat({parole}) {
   const router = useRouter()
@@ -53,14 +47,21 @@ export default function TeksKat({parole}) {
     <StyledGrid size={{xs: 12, sm: 6, md: 4}}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
-          <CardMedia
-            className={classes.media}
-            component='img'
-            alt={titre}
-            image={couverture?.url ? `${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}` : noImageUrl}
-            title={titre}
-            loading='lazy'
-          />
+          <Box sx={{position: 'relative', height: 240}}>
+            {couverture?.url ? (
+              <Image
+                src={`${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}`}
+                alt={titre}
+                fill
+                placeholder='blur'
+                blurDataURL={BLUR_DATA_URL}
+                sizes='(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw'
+                style={{objectFit: 'contain'}}
+              />
+            ) : (
+              <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
+            )}
+          </Box>
           <CardContent>
             <Box sx={{display: 'flex', alignItems: 'center'}}>
               <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>