I thought webp would be better for this and checked again just to be sure, and yes, it would be better for this. WebP is quite well supported, albeit not as well supported as png, and it can have significantly smaller file sizes for the same lossless image as png.
chromium --headless --disable-gpu --screenshot=output.png --window-size=1920,1080 --hide-scrollbars index.html
Also works great for HTML to PDF: chromium --headless --disable-gpu --no-pdf-header-footer --run-all-compositor-stages-before-draw --print-to-pdf=output.pdf index.htmlGenerally I find production-ready images have more synergy and tend to be web-scale. Often they're built from the ground up for AI & are blazing fast, at scale, and empower your team whilst unlocking new possibilities. As my sibling comment suggests, being cloud-native is a crucial factor too.
No cruft. No legacy formats.
Just buttery smooth production readiness.
But buttery bloated if the images don't run OptiPNG before exporting.
<!doctype html>
<html lang="en">
<body>
<pre class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>
</body>
</html>
Then html2png.dev will serve you: https://html2png.dev/api/blob/oTVGhhCc6rDZYQFDIE3EGkcKs-KO6J9-_DHs-jO2OJc-d23fb4f2.png
[^1]: https://mermaid.js.org/config/usage.html#simple-full-exampleit's literally waht i've been saying all along when I came across mcp "why can't i just give agent a prompt and it will run the rest api calls for me"
there's still some MCPs which makes sense but we have it for literally everything when just a prompt will do the job!
now on the topic of html2png i do wonder is this like the self-hostable version on github https://github.com/maranemil/HTML2Png where they use canvas? or is this something else ?
Not that it matters, but curious what percentage of this service was “vibe-coded”?
I'm not sure of what "production ready" is supposed to mean here, but the demo image is not optimized, `optipng` command decreases its size by 53.21%.
Think of the GitHub thumbnails where the PR number changes constantly and has to be reflected on the image preview
I am sure @simonw has some ideas :) -- he recently blogged about HTML tools which is also one or my favorite use cases for LLMs.
Maybe similar to SVG generation, this could be a more powerful / flexible way to generate complex images / screen mockups and the like on-the-fly.
PS: How do the economics work -- how is this free to use?
PS2: The live HTML editor seems buggy. Cursor is off by one position and messes up editing. (chrome on windows)
eastoeast•9h ago