Next/og generated images are horribly heavy (PNG) and unusable in apps like WhatsApp

[lulumetro]

Goals

1. Allow the developer to choose different image formats (JPEG, PNG, WEBP?)
2. Allow apps with a size limit for opengraph images (i.e. WhatsApp) to use them

Non-Goals

Background

Hi, I've implemented dynamic opengraph images through next/og, and the approach is good but when generating images at the recommended resolution of 1200x630 and using an image as a background (which in my opinion is one of the main reasons to be of open graph images), the output image size is usually over 1MB. That prevents it to be used by apps like WhatsApp (the main messaging app for over 2 billion people) which has a size limit of 300kb for open graph images.

A similar image exported as JPEG could be 10x smaller in size, so it would be great if we were able to choose between different image formats (PNG, JPEG...) the most appropiate for the kind of image we want to generate.

Proposal

Ideally it will be great to specify the desired output image format on ImageResponse constructor options

[vitorluz]

Would there be a solution for this, an option to compress the image or its format.

using this solution, it didn't work

export const contentType = 'image/jpg'

it always generates a png

[carlos-dubon]

@lulumetro @vitorluz In the meantime I came up with this function (uses sharp under the hood):

const compressArrayBuffer = async (arrayBuffer: ArrayBuffer): Promise<ArrayBuffer> => {
    const buffer = Buffer.from(arrayBuffer);
    const compressedBuffer = await sharp(buffer).jpeg({ quality: 65 }).toBuffer();
    return new Uint8Array(compressedBuffer).buffer;
};

Usage:
Instead of returning a new ImageResponse you return a normal Response

        // route.tsx file:

        const imageResponse = new ImageResponse(/** Your JSX **/);
        const arrayBuffer = await imageResponse.arrayBuffer();
        const compressedImage = await compressArrayBuffer(arrayBuffer);

        const headers = new Headers();
        headers.set('Content-Type', 'image/jpeg');
        // the Cache-Control header was set in the ImageResponse so I copied it here
        headers.set('Cache-Control', 'public, immutable, no-transform, max-age=31536000');
        return new Response(compressedImage, { status: 200, statusText: 'OK', headers });