I have opengraph images but the quality seems to be bad when i test sharing the links, I read on metas docs to use images 1200 * 630 and thats what i am using for the images.

import { ImageResponse } from "next/server";

// Route segment config
export const runtime = "edge";

export const size = {
  width: 1200,
  height: 630,
};

export const contentType = "image/png";

// Image generation
export default async function Image({
  params,
}: {
  params: { eventId: string };
}) {
  const eventId = params.eventId;

  const data: {
    data: {
      thumbnailUrl?: boolean | string;
      banner: string | boolean;
      companyName: string;
    };
  } = await fetch(`${process.env.BASE_URL}/event/fetch/${eventId}`).then(
    (res) => res.json()
  );

  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: size.width,
          height: size.height,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <img
          className="flex flex-1"
          style={{
            objectFit: "cover",
          }}
          src={srcImage()}
          width={1200}
          height={630}
          alt={`${data.data && data.data?.companyName} image`}
        />
      </div>
    ),
    {
      ...size,
    }
  );
}