Merge pull request #601 from PRX/fix/600-metadata-images-as-jpeg

600: Reduce file size of metadata image responses

Author: rpeterman-gp

src/app/(main)/_metadata/createMetaImage.tsx

@@ -33,11 +33,11 @@ async function optimizeImage(
     const buffer = await res.arrayBuffer();
     const optimizedBuffer = await sharp(buffer)
       .resize({ width })
-      .png({ quality: 75 })
+      .jpeg({ quality: 75 })
       .toBuffer();
     const base64String = optimizedBuffer.toString("base64");
 
-    return `data:image/png;base64,${base64String}`;
+    return `data:image/jpeg;base64,${base64String}`;
   } catch (err) {
     console.log("Error converting image to base64 string.", {
       err,
@@ -67,8 +67,7 @@ export async function createMetaImage(options: MetaImageOptions) {
   const imageSrc = image?.sourceUrl || image?.mediaItemUrl;
   const optimizedSrc = await optimizeImage(imageSrc, size);
   const seravekSemiBold = await loadFont(title);
-
-  return new ImageResponse(
+  const png = await new ImageResponse(
     <div
       style={{
         display: "flex",
@@ -93,7 +92,7 @@ export async function createMetaImage(options: MetaImageOptions) {
         xmlns="http://www.w3.org/2000/svg"
         style={{
           position: "absolute",
-          top: 45,
+          bottom: 0,
           right: size.width - (375 + 920),
         }}
       >
@@ -377,7 +376,14 @@ export async function createMetaImage(options: MetaImageOptions) {
         ],
       }),
     },
-  );
+  ).arrayBuffer();
+  const jpeg = await sharp(Buffer.from(png)).jpeg({ quality: 80 }).toBuffer();
+
+  return new Response(jpeg as unknown as BodyInit, {
+    headers: {
+      "Content-Type": "image/jpeg",
+    },
+  });
 }
 
 export default createMetaImage;