An explanation of those new GitHub social media images:
[…] our custom Open Graph image service is a little Node.js app that uses the GitHub GraphQL API to collect data, generates some HTML from a template, and pipes it to Puppeteer to “take a screenshot” of that HTML.
Jason Etcovich on The GitHub Blog in “A framework for building Open Graph images”
It’s so satisfying to produce templated images from HTML and CSS. It’s the perfect way to do social media images. If you’re doing it at scale like GitHub, there are a couple of nice tricks in here for speeding it up.
Using HTML instead of Qt or similar libraries is old news, now the trend is using HTML to replace image libraries, right?
jk, I wish they added a paragraph showing what other options they considered. One of the first I would think would be generating a SVG then rendering it to PNG. In the other hand I know that’s not a good idea: the best SVG renderers are browsers, so it would not solve the issue of requiring a browser, also it would make it more complex as SVG layouts are a lot harder to make than HTML+CSS, even using SVG libraries. Using a specialized image library could help performance, but would make development a lot harder.
People may joke about CSS, but it come a long way and now it’s great using it for layouts.