feat: optimize paroles images

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
+          <Box sx={{position: 'relative', height: 240}}>
-            className={classes.media}
+            {couverture?.url ? (
-            component='img'
+              <Image
+                src={`${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}`}
                 alt={titre}
-            image={couverture?.url ? `${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}` : noImageUrl}
+                fill
-            title={titre}
+                placeholder='blur'
-            loading='lazy'
+                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'>