cho.sh

researchmini

3,249 notes

260722260722 I prefer TUIBB9A08 MarkRight8B0501 에이전트 런타임 서버 셋업1983DC Bun을 Rust로 재작성하다2BDED3 260721260721 Agent Runtime Server SetupC38C2C 260719260719 AutoBuilder63849A 260718260718 Slack Bots are the new CLIs3E662F 260717260717 WristcomputerD98BDF 260716260716 SalpakanA2940F AGENTS.mdDFE522 260714260714 260713260713 260712260712 260711260711 인간의 보완재와 AX41F1E5 260710260710 tokenmaxxing cli635294 260709260709

Satori · cho.sh

Satori

Satori

Warning

This post is more than a year old. Information may be outdated.

ALT: Add Unicode Private Area Support #161 Merged

Merged! Add Unicode Private Area Support #161

Resources

Create OG images for your blog with Next.js

Introducing OG Image Generation: Fast, dynamic social card images at the Edge - Vercel

This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs.
We released og-image.vercel.app four years ago to enable developers to dynamically generate open graph (OG) images by taking a screenshot of an HTML page inside of a Serverless Function
Indeed, I also used this for a while. anaclumos/cho-sh-og-image: Open Graph Image as a Service. Open Graph Image as a Service

Backlinks5

Embeddable GitHub Repo Card But It Looks Great 221114 Stories Behind Satori 221011 Letter to the Heptabase Team on 2022-10-11

Comments

Problems

Difficult: This solution required launching Chromium in a Serverless Function and taking a screenshot of the given HTML page with Puppeteer. Setting up these tools was hard to implement and often led to errors
Slow: Chromium needs to be compressed to fit inside a Serverless Function and then decompressed on a cold boot; it's very slow (~4 seconds on average). This can result in slow or broken social card images
Expensive: Spinning up an entire browser to take a screenshot was not efficient. This led to large Function sizes, which could be expensive and waste computing

Large: Chromium has continued growing in the past four years. Today, it's too large to fit in a Serverless Function

@vercel/og

Easy: No headless browser is needed. Using Vercel OG, you can define your images using HTML and CSS and automatically generate dynamic images from the generated SVGs
Affordable: Vercel Edge Functions are ~160x cheaper than running Chromium in a Serverless Function. Further, generated images can be cached and stored at the Edge
Fast: Vercel OG (500KB) is 100x more lightweight than Chromium + Puppeteer (50MB). 5x faster in P99 TTFB (4.96s → 0.99s) and 5.3x faster in P90 (4s → 0.75s).

Features

Basic CSS layout, styling, and typography.
Works with any framework or frontend application
Font and Emoji Subsets from Google Fonts and other CDNs
Tailwind CSS with the tw prop
Handles Cache automatically

Engine

The core engine, Satori, can be used in modern browsers, Node.js, and Web Workers. Building on top of the core engine, Vercel OG can be used inside Edge environments through WebAssembly to create social card images easily.

Backstory by Shu

Stories Behind Satori

Comments0

No comments yet. Be the first to share your thoughts.