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
  • #181
• @resvg/resvg-js is approximately 3MB
  • #183
• @napi-rs/canvas is approximately 19MB demo
  • #182

[JavierMartinz]

I'm having this problem too and I cannot deploy it to Vercel. I saw here that a workaround would be moving the JS from pages/api/ to api/, but in that case the URL wouldn't be reachable anymore.

[styfle]

in that case the URL wouldn't be reachable anymore

What does that mean?

Using api/ is how this repo works as seen here: https://og-image.vercel.app

Have you tried cloning this repo and using the same dependency version from package.json?

[marklawlor]

@styfle Indeed that comment is out of place for this repo, but it would be greatly appreciated if you could take your time to answer some of the questions in the linked issue.

It appears that Vercel imposes a combined 50mb issue on all NextJS /pages/api functions, but allows a 50mb individual limit for functions in /api. This seems counter intuitive to the Vercel limits documentation as @next/bundle-analyzer reports /pages/api as individual functions.

For example if you have three functions that compile to 45mb, 5mb, 2mb. If using NextJS you will not be able to deploy onto Vercel, however this will work for non-NextJS projects.

Also just to clarify this is not a puppeteer issue, you could have a lambda function that reads 45mb JSON file and get the same issue.

I hope that explains @JavierMartinz's intent and again it would be awesome if you could take the time to post a clarifying response in the linked issue. There is also this discussion thread

[styfle]

@marklawlor The linked issues were fixed so perhaps you are hitting a different corner case.

If you could create a new issue with an example repo that fails, then we can take a look, thanks!

[marklawlor]

@styfle Both the linked issue and discussion continue after being marked as resolved and contain the example repo that fails (updated after the patch was released)

For example https://github.com/vercel/vercel/discussions/4013#discussioncomment-3467 and its follow up comment https://github.com/vercel/vercel/discussions/4013#discussioncomment-3604

This is the exact issue I am receiving.

[jemgold]

+1 - I love the approach of this repo but running into these issues getting it running in Next.js on Vercel

[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