Images & emoji

External Images

By default, Takumi will fetch external images in src attributes and CSS properties like background-image and mask-image.

If you want to add additional caching layer, you can pass resourcesOptions.cache to render function.

import { render } from "takumi-js";

const element = <img src="https://example.com/image.png" />;

const cache = new Map<string, ArrayBuffer>();

const image = await render(element, {
  resourcesOptions: {
    cache,
  },
});

Pre-fetched Images

Provide images by key so the renderer doesn't have to fetch them itself. Each key can be used in any src field or in the background-image / mask-image CSS properties.

import { ImageResponse } from "takumi-js/response";

export function GET() {
  return new ImageResponse(<OgImage />, {
    images: [
      {
        src: "my-logo",
        data: () => fetch("/logo.png").then((res) => res.arrayBuffer()),
      },
      {
        src: "background",
        data: () => fetch("/background.png").then((res) => res.arrayBuffer()),
      },
    ],
  });
}

function OgImage() {
  return (
    <div
      style={{
        backgroundImage: "url(background)",
      }}
    >
      <img src="my-logo" />
    </div>
  );
}

Decode caching

Takumi caches each decoded image so a repeated src is decoded once. The cache mode on an image controls that cache and is independent of the byte cache above: resourcesOptions.cache stores fetched bytes, while cache stores the decoded pixels.

• auto (default): cache the decoded image; the entry is evictable.
• none: skip the cache. Use it for a one-off image you won't render again, to avoid holding its pixels in memory.

import { ImageResponse } from "takumi-js/response";

export function GET() {
  return new ImageResponse(<div />, {
    images: [
      {
        src: "banner",
        data: () => fetch("/banner.png").then((res) => res.arrayBuffer()),
        cache: "none", 
      },
    ],
  });
}

Emoji

Dynamic fetching

ImageResponse accepts a satori-compatible emoji option.

import { ImageResponse } from "takumi-js/response";

export function GET() {
  return new ImageResponse(<div tw="flex justify-center items-center text-3xl">Hello 👋😁</div>, {
    emoji: "twemoji", 
  });
}

It calls the extractEmojis helper. The helper splits emoji from text and turns them into <img> nodes on a CDN. Run the steps yourself when you need the resources separately.

import { extractEmojis } from "takumi-js/helpers/emoji";
import { fromJsx } from "takumi-js/helpers/jsx";
import { extractResourceUrls, fetchResources } from "takumi-js/helpers";
import { Renderer } from "takumi-js/node";

let { node } = await fromJsx(<div tw="flex justify-center items-center text-3xl">Hello 👋😁</div>);
node = extractEmojis(node, "twemoji");

const resourceUrls = extractResourceUrls(node);
const images = await fetchResources(resourceUrls);

const renderer = new Renderer();

const image = await renderer.render(node, {
  images,
});

extractEmojis also takes blobmoji, noto, openmoji, fluent, and fluentFlat.

COLR / bitmap fonts

Takumi renders COLR fonts, the format behind packs like Twemoji-COLR. A COLR file is much smaller than a bitmap emoji font like Noto Color Emoji. Register one through fonts and set emoji: "from-font". The renderer then draws emoji from the loaded glyphs instead of fetching images, with no network request.