hackernews client

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

117 pointsposted 14 hours ago

57 Comments

me_bx

7 hours ago

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

kristopolous

5 hours ago

also don't ignore webp and avif ... those can really do wonders.

spiderfarmer

an hour ago

The bots using these images apply their own compression anyway.

alvinunreal

4 hours ago

Thank you. Can add png compression too right.

xnx

35 minutes ago

Sharing in case anyone isn't familiar with this built-in capability:

google-chrome --headless --screenshot=my_screenshot.png https://www.example.com

Retr0id

11 hours ago

What differentiates production-ready images from regular images?

RadiozRadioz

9 hours ago

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

7 hours ago

If I need more flair can I embed the image in a new html page and then create another image from that?

4ndrewl

8 hours ago

Downvoted for not starting with "Great question!" /s

jsight

26 minutes ago

It probably means that the text was generated by an AI.

Claude Code loves to say that everything is production ready, even if it doesn't quite compile or pass automated tests yet.

apeters

10 hours ago

They are cloud-native, of course.

KellyCriterion

5 hours ago

Do they support also DeFi or Blockchain then?

aembleton

2 hours ago

Yes, and AI

KellyCriterion

44 minutes ago

++1 :-))

good one!!!

yeasku

6 hours ago

Is this post a joke?

back2reddit

8 hours ago

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

No cruft. No legacy formats.

Just buttery smooth production readiness.

xgulfie

an hour ago

But are they Blazing Fast (rocket ship emoji)? Are they vibe ready?

andrecarini

6 hours ago

Thanks ChatGPT

b0ner_t0ner

5 hours ago

> buttery smooth

But buttery bloated if the images don't run OptiPNG before exporting.

donohoe

27 minutes ago

“Free”?

What’s the catch, or how I can I be sure it will still be around in 3 months?

No snark, genuinely curious as I would use this if I could count on it.

thatgerhard

an hour ago

This must be the hardest way to create an image online ever invented.

oefrha

10 hours ago

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

10 hours ago

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

9 hours ago

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.

rognjen

7 hours ago

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

6 hours ago

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.

mewpmewp2

3 hours ago

Won't you need to install extra libraries for these?

randoments

7 hours ago

What is the use case for requiring this?

mattrighetti

5 hours ago

Dynamic og:image generator could be a use case.

Think of the GitHub thumbnails where the PR number changes constantly and has to be reflected on the image preview

albert_e

4 hours ago

This looks interesting though niche -- am yet to think of a compelling use case.

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)

onion2k

2 hours ago

Alternatively, open devtools, press ctrl+shift+p (or cmd+shift+p on a mac) to open the command palette, search for 'screenshot' and choose 'Capture full size screenshot' to do the same thing on your browser. There's 'area screenshot' for selecting an area, 'screenshot' for the viewport', and even 'node screenshot' for capturing the selected DOM node.

spiderfarmer

an hour ago

Yeah and you can also take a picture with your phone. Or draw with pencil and paper.

alvinunreal

an hour ago

I just take pictures with my instant polaroid

reassess_blind

9 hours ago

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.

spiderfarmer

an hour ago

So why comment?

devmor

9 hours ago

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

10 hours ago

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

9 hours ago

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

Garlef

8 hours ago

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

JimDabell

7 hours ago

By introducing a dependency on a third-party service with no SLA? This seems to make the dependency situation worse.

mcny

4 hours ago

Ah haha. I love this conversation of trying to find a product market fit in public.

What if the input to the JavaScript (mermaid in this case) is not trusted to run on the end client machines but by running untrusted input on a sandbox (this service, or self hosted idk) is somehow acceptable and the output a blob of an image is acceptable to display on the actual client machines.

Takes the planets to align just right and need us to squint just enough but I think we can find something if we look hard enough.

But then mermaid can simply output PNG so you could run it as a worker... Thinking...

geooff_

11 hours ago

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

threeducks

8 hours ago

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

11 hours ago

Playwright behind a web server?

franze

4 hours ago

well, you can create an image that reports the internal, this is what i got:

  - IP: 104.28.157.29
  - Org: Cloudflare (AS13335)
  - Location: Narita, Chiba, Japan
  - Browser: Chrome 126.0.0.0 headless
  - Automation: Puppeteer/Playwright
  - navigator.webdriver: true
  - Platform: Linux x86_64
  - CPU cores: 4
  - WebGL: ANGLE + Vulkan 1.3.0 + SwiftShader
  - GPU: SwiftShader (software rendering)
  - Screen: 1024x768 virtual
  - DevicePixelRatio: 2
  - Color depth: 16 bit
  - Window: 500x88 outer (headless)
  - Languages: en-US
  - Plugins: 5
  - Frontend: Nuxt.js
  - Storage: ephemeral blob

WilcoKruijer

7 hours ago

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

9 hours ago

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 ?

eastoeast

13 hours ago

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

12 hours ago

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

xiaohanyu

13 hours ago

Maybe webp is a better target than png?

benatkin

12 hours ago

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

12 hours ago

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

Mogzol

10 hours ago

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.

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

chevman

11 hours ago

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?