Hi all, I have been trying to reduce my edge function for generating OG images.

Here is what I have tried:

Compressing my .ttf fonts to .woff to try to reduce the size.

This is my code:

import type { NextRequest } from "next/server";
import { ImageResponse } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const interBold = fetch(new URL("../../../../public/fonts/inter-bold.woff", import.meta.url)).then((res) => res.arrayBuffer());
  const interRegular = fetch(new URL("../../../../public/fonts/inter-regular.woff", import.meta.url)).then((res) => res.arrayBuffer());

  const searchParameters = request.nextUrl.searchParams;

  const title = searchParameters.has("title") ? searchParameters.get("title") : "JustBrandonLim";
  const subTitle = searchParameters.has("subTitle") ? searchParameters.get("subTitle") : "";

  return new ImageResponse(
    (
      <div
        style={{
          background: "black",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          fontFamily: "Inter",
          color: "white",
          padding: "20px",
        }}
      >
        <h1 style={{ fontSize: "60px", fontWeight: "700", wordBreak: "break-word", textAlign: "center" }}>{title}</h1>
        <h2 style={{ fontSize: "20px", fontWeight: "400", wordBreak: "break-word", textAlign: "center" }}>{subTitle}</h2>
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "Inter",
          data: await interBold,
          style: "normal",
          weight: 700,
        },
        {
          name: "Inter",
          data: await interRegular,
          style: "normal",
          weight: 400,
        },
      ],
    }
  );
}