Investigate replacing puppeteer with smaller alternative

[styfle]

We are bumping up against the 50MB limit when upgrading dependencies since chromium continues to get larger.
This was discovered in a PR that was bumping dependencies: #147
We could try using a different tool to reduce the size.

HTML => PNG

The developer authors HTML and we convert to PNG with a browser, for example:

• puppeteer-core + chrome-aws-lambda is approximately 55MB (and growing)
• playwright-core + playwright-aws-lambda is approximately 52MB (and growing)
• wkhtmltoimage is approximately 45MB, see how do I use AWS Lambda
  • This looks like its no longer maintained
• NetSurf is approximately 8MB
• Other lightweight browsers are worth investigating

SVG => PNG

The developer authors SVG and we convert to PNG with a library, for example:

• sharp is approximately 20MB
  • Testing sharp svg => png #181
• @resvg/resvg-js is approximately 3MB
  • Testing resvg-js #183
• @napi-rs/canvas is approximately 19MB demo
  • Testing @napi-rs/canvas #182

[leerob]

@jongold we're testing a few approaches right now! Check out the latest pulls https://github.com/vercel/og-image/pulls

[AmreshSinha]

You can also give node-canvas a try

[yisibl]

I've put together a table, plus there's a Wiki test suite with more detailed edge cases for further comparison: https://commons.wikimedia.org/wiki/User:JoKalliauer/SVG_test_suites/resvg_Issues_details

Engine & binding	resvg & resvg-js	sharp & librsvg	skia & skr-canvas
language	Rust	Rust/C++	Rust/C++
Features	Lightweight and fast. SVG1.1 best compatibility	Full CSS3 selector support, <text> support is poor	Less support for SVG and CSS selectors

resvg(resvg-js) and librsvg(sharp) each have their own strengths, with librsvg being a bit faster with new features and bug fixes after migrating to Rust, but no crate has been released yet. resvg-js can easily achieve dual-engine rendering in the future, thanks to napi-rs's good architecture, to complement each other.

[weolar]

hi, you can use miniblink: https://github.com/weolar/miniblink49

[styfle]

We decided that embedding a browser is not a sustainable solution.

So we built an alternative solution to convert HTML/CSS to PNG.

Check out https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images