feat: test placeholder for speaker images (#603)

- add placeholder for 2025 speakers
- replace mongoDB logo

Author: ginifizz

pwa/app/(con)/[locale]/con/[edition]/conferences/[slug]/components/ConferenceSpeaker.tsx

@@ -44,7 +44,11 @@ const ConferenceSpeaker = ({ conference }: SpeakerProps) => {
                   )}
                 >
                   {conference.edition === "2025" ? (
-                    <SpeakerImage2025 speaker={speaker} image={image} />
+                    <SpeakerImage2025
+                      speaker={speaker}
+                      image={image}
+                      placeholder={placeholder}
+                    />
                   ) : (
                     <SpeakerImage image={image} placeholder={placeholder} />
                   )}

pwa/app/(con)/[locale]/con/[edition]/speakers/[slug]/SpeakerPage.tsx

@@ -47,7 +47,12 @@ export default function SpeakerPageTemplate({
         <div className="flex flex-col relative flex-wrap items-center bg-grey px-10 pb-10 pt-28 | lg:flex-row lg:items-start | sm:pb-20">
           <div className="w-72 h-72 | md:w-80 md:h-80 | lg:w-[400px] lg:h-[400px]">
             {edition === "2025" ? (
-              <SpeakerImage2025 speaker={speakerData} big image={image} />
+              <SpeakerImage2025
+                speaker={speakerData}
+                big
+                image={image}
+                placeholder={placeholder}
+              />
             ) : (
               <SpeakerImage big image={image} placeholder={placeholder} />
             )}

pwa/components/con/speakers/SpeakerImage2025.tsx

@@ -57,9 +57,10 @@ export default function SpeakerImage({
   big = false,
   hoverable = true,
   speaker,
+  placeholder,
 }: SpeakerImageProps) {
   if (speaker.edition === "2025") {
-    const { name } = speaker;
+    const { name, } = speaker;
     const angle = nameToAngle(name);
     const size = nameToSize(name);
     const pos = cssPositionOnCircle(angle);
@@ -100,8 +101,12 @@ export default function SpeakerImage({
                 )}
                 alt=""
                 fill
-                sizes={big ? "(max-width: 768px) 400px, 800px" : "400px"}
-                loading="lazy"
+                sizes={big ? "(max-width: 768px) 350px, 600px" : "350px"}
+                placeholder={
+                  placeholder
+                    ? (placeholder as `data:image/${string}`)
+                    : undefined
+                }
               />
             </div>
             <div

pwa/public/images/con/2025/partners/mongo-db.png

@@ -5,13 +5,13 @@ export const getPlaceholder = cache(async (imagePath: string) => {
   try {
     // Redimensionner l'image à une taille très petite
     const resizedImageBuffer = await sharp(imagePath)
-      .resize(50, 50)
-      .jpeg({ mozjpeg: true, quality: 50 })
+      .resize(20, 20)
+      .png({ quality: 70 })
       .toBuffer();
 
     // Convertir l'image redimensionnée en base64
     const base64Placeholder = resizedImageBuffer.toString("base64");
-    return `data:image/jpeg;base64,${base64Placeholder}`;
+    return `data:image/png;base64,${base64Placeholder}`;
   } catch (error) {
     console.error("The placeholder can't be generated: ", error);
     throw error;