Show HN: Turn raw HTML into production-ready images for free

▲ Show HN: Turn raw HTML into production-ready images for free(html2png.dev)

81 points by alvinunreal 9 hours ago | 36 comments

▲ me_bx 2 hours ago | parent | next [-]

Congrats on launching, beautiful design.

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%.

▲ Retr0id 6 hours ago | parent | prev | next [-]

What differentiates production-ready images from regular images?

▲

RadiozRadioz 5 hours ago | parent | next [-]

They're bedazzled by a little bit of marketing flair.

Generally 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.

	▲	ludicrousdispla 2 hours ago \| parent \| next [-]
		If I need more flair can I embed the image in a new html page and then create another image from that?
	▲	4ndrewl 3 hours ago \| parent \| prev [-]
		Downvoted for not starting with "Great question!" /s

▲

apeters 5 hours ago | parent | prev | next [-]

They are cloud-native, of course.

	▲	yeasku an hour ago \| parent [-]
		Is this post a joke?

▲

back2reddit 3 hours ago | parent | prev [-]

It's not an image—it's an image on the edge.

No cruft. No legacy formats.

Just buttery smooth production readiness.

	▲	b0ner_t0ner 40 minutes ago \| parent \| next [-]
		> buttery smooth But buttery bloated if the images don't run OptiPNG before exporting.
	▲	andrecarini an hour ago \| parent \| prev [-]
		Thanks ChatGPT

▲ oefrha 5 hours ago | parent | prev | next [-]

I’m afraid out of all the waiting strategies available in Puppeteer/Playwright, waiting a fixed period is the worst possible. Maybe consider exposing the proper waiting strategies, load/domcontentloaded/networkidle, maybe even the more fine-grained ones https://playwright.dev/docs/actionability

▲

Retr0id 5 hours ago | parent [-]

I did some tests and it didn't seem like a fixed wait, when I kept making network requests the render timed out entirely.

	▲	oefrha 4 hours ago \| parent [-]
		I made the comment based on the delay parameter (“Wait time in ms.”) in the API. I didn’t test so don’t know what the default behavior is.

▲ randoments 2 hours ago | parent | prev | next [-]

What is the use case for requiring this?

▲ rognjen 2 hours ago | parent | prev | next [-]

It's nice looking for sure but much more complex than using `wkhtmltox` with `pngquant`, `optipng` and/or ImageMagick `convert` locally - esp. since the learning curve seems to be about equivalent.

	▲	krick an hour ago \| parent [-]
		Yeah, I thought that as well. So I was wondering if that's some kind of a joke, or maybe modern html is so fucked up that all usual solutions became obsolete since the last time I did that.

▲ reassess_blind 4 hours ago | parent | prev | next [-]

I thought this was satire. Usually you want to go from image to HTML, not the other way around. I suppose it does have its uses, though.

	▲	devmor 4 hours ago \| parent [-]
		It certainly does, that's why it's been a common dev tool for a bit over 20 years. I'm not really sure what the point of OP making it a web app is, though.

▲ jihchi 5 hours ago | parent | prev | next [-]

This is cool! One use case is generating a Mermaid diagram as an image. For example, you can use the following HTML[^1]:

  <!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-example

▲

JimDabell 4 hours ago | parent [-]

Why wouldn’t you just use Mermaid to generate the PNG directly?

▲

Garlef 4 hours ago | parent [-]

One reason I could think of: Fewer dependencies that need integration

	▲	JimDabell 2 hours ago \| parent [-]
		By introducing a dependency on a third-party service with no SLA? This seems to make the dependency situation worse.

▲ geooff_ 7 hours ago | parent | prev | next [-]

Very cool. Is there an option to self-host? This seems like it could be a cool agent skill.

▲ threeducks 3 hours ago | parent [-]

HTML to 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.html

▲ tbrownaw 6 hours ago | parent | prev | next [-]

Playwright behind a web server?

▲ WilcoKruijer 3 hours ago | parent | prev | next [-]

I’ve been doing this manually by having a static development-only route on my website and taking a “node screenshot” using the Chrome developer tools. This is definitely a better way, well done!

▲ agentifysh 4 hours ago | parent | prev | next [-]

that "Not MCP" is so refreshing it makes me laugh out loud

it'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 ?

▲ jumploops 4 hours ago | parent | prev | next [-]

Love the simplicity and “Not MCP” callout (:

Not that it matters, but curious what percentage of this service was “vibe-coded”?

▲ eastoeast 9 hours ago | parent | prev | next [-]

This is a great idea. I can’t believe I didn’t think of this, given I generate and screenshot so many “poster images” in html just like this. Haven’t played around a ton but seems intuitive. Nice work!

▲ RyanShook 7 hours ago | parent | prev | next [-]

Nice! It definitely makes you wonder when is MCP actually needed vs just giving the LLM API calls to work with.

▲ chevman 7 hours ago | parent | prev | next [-]

Any similar AI based services/agents that can take images/creative assets (eg Figma, Sketch, Adobe PS, etc files) and create production-ready emails and landing pages in HTML?

▲ xiaohanyu 8 hours ago | parent | prev [-]

Maybe webp is a better target than png?

▲

benatkin 7 hours ago | parent | next [-]

No, because their domain is png /s

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.

▲

dtagames 7 hours ago | parent | prev [-]

It's not. JPG, I could live with but please not webp.

▲

Mogzol 6 hours ago | parent [-]

Why? I assume the intention is to show these images on a webpage somewhere. WebP is well-supported by browsers and can store lossless images at better compression ratios than PNG, so why not use it? I don't think using a lossy format like JPEG makes much sense. JPEG is a fine format for photos, but for HTML content rendered as an image I assume most people would want a lossless format so you don't get artifacts.

	▲	kaizenb 5 hours ago \| parent [-]
		Definitely should be WebP.