Show HN: Thumbnail.ai – Just paste a blog post link and get a thumbnail

Love the demo links under the search bar: &quot;Try these: TechRadar, AVC, Paul Graham, BBC, Medium, Pulse&quot;.<p>I think one mistake a lot of people make on their landing page is to just give the user an empty search box and force them to come up with what to type as a test, rather than showing them a test yourself, which I imagine would significantly increase conversion.

I hacked and open-sourced a similar Python project last year to programmatically generate images based on templates by using a headless Google Chrome, allowing for the full gamut of CSS tricks: <a href="https:&#x2F;&#x2F;github.com&#x2F;minimaxir&#x2F;imgmaker" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;minimaxir&#x2F;imgmaker</a><p>It&#x27;s currently being used in production where I work to generate some social media thumbnails which would otherwise be difficult to do using conventional Python image libraries.

I&#x27;m using Statically (<a href="https:&#x2F;&#x2F;statically.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;statically.io&#x2F;</a>) which offers screenshot API so thumbnail can be generated automatically. In my blog template, I use the following snippet:<p><pre><code> &lt;meta property=&quot;og:image&quot; content=&quot;https:&#x2F;&#x2F;cdn.statically.io&#x2F;screenshot&#x2F;&lt;%- post.link %&gt;&quot;&gt;</code></pre>

Hi HN, I built this MVP because using an image editor to create thumbnails for my blog posts was time consuming.<p>Good thumbnails can bring a lot of traffic to a post specially when shared on social networks. There are just 4 templates now and will add more. Please try your blog posts and I would love to hear your feedback.

Is there really any &quot;AI&quot;? It seems to just take the title and apply it to 4 templates.

Hey justhw, I launched something similar [1] a few months back. I’d love to talk with you about your stack. Here are the three biggest problems I ran into.<p>1. Request timeouts<p>Even &quot;fast&quot; blogs sometimes have hiccups or rate-limit scrapers&#x2F;crawlers. The more I scale the more often I see requests timing out. I&#x27;ve tried to mitigate this with retry buttons and trying the request again, but it doesn&#x27;t always work.<p>2. Scaling Puppeteer<p>I saw from another of your comments that this is built on top of Puppeteer. From my experience, trying to scale to even 3 concurrent renders starts to fall apart when you have to spin up a new Chrome instance for each request.<p>I&#x27;ve looked into Browserless [2] but they charge per second of usage, and I&#x27;m not at the point where I want to have that big of an expense.<p>3. Getting a relevant image<p>I love that your tool adds an image to the thumbnail as well! I struggled with searching Unsplash using the text in the title of the article but they never came out that well.<p>I love it when people make these massively useful services stitching together a few simple tools. Congrats on the launch!<p>[1] <a href="https:&#x2F;&#x2F;mugshotbot.com" rel="nofollow">https:&#x2F;&#x2F;mugshotbot.com</a> [2] <a href="https:&#x2F;&#x2F;www.browserless.io" rel="nofollow">https:&#x2F;&#x2F;www.browserless.io</a>

I use Bannerbear[1] for this purpose. Works well and the founder is doing the whole &quot;Open Startup&quot;[2] thing, so that&#x27;s cool too.<p>[1] <a href="https:&#x2F;&#x2F;www.bannerbear.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.bannerbear.com&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;www.bannerbear.com&#x2F;open&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.bannerbear.com&#x2F;open&#x2F;</a>

This is pretty cool. I recently built a &quot;StumbleUpon for eCommerce stores&quot; (<a href="https:&#x2F;&#x2F;www.shiny.sale&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.shiny.sale&#x2F;</a>) and did quite a bit of research trying to find a good screenshot API. I eventually settled on ApiFlash.<p>I would definitely use this once I got into editorial content. I have a few suggestions for your homepage though:<p>1. The 3 steps you outline are still too vague, especially step 3 (&quot;upload it to your blog post&quot;). Makes it sound like this will be one of my main images. I&#x27;d suggest some more detailed instructions for different blog platforms.<p>2. Is there no API or other way to auto-generate an image? If not, I&#x27;d suggest that be your next feature.<p>3. One of the examples (BBC) I generated resulted in a 3.3MB PNG file. You maybe want to provide some better compression&#x2F;minification options for people. You definitely shouldn&#x27;t be creating high-res PNGs when images are involved.<p>4. It was also 2400x1260 which doesn&#x27;t qualify as a &quot;Thumbnail&quot; IMO. You may want to generate files closer to the preferred social specs. Twitter, for example, wants files &lt; 5MB and don&#x27;t need to be anywhere near that big[1].<p>Anyway, hope that is helpful feedback. Great idea and MVP. Keep it up!<p>[1] <a href="https:&#x2F;&#x2F;developer.twitter.com&#x2F;en&#x2F;docs&#x2F;twitter-for-websites&#x2F;cards&#x2F;overview&#x2F;summary-card-with-large-image" rel="nofollow">https:&#x2F;&#x2F;developer.twitter.com&#x2F;en&#x2F;docs&#x2F;twitter-for-websites&#x2F;c...</a>

This is great! It’s such a frustrating process to jump out of a text editor to create an image and put it back in a post. I’ll try this out for my next article or post!

Where do the images come from on posts that don&#x27;t have image content (eg <a href="http:&#x2F;&#x2F;paulgraham.com&#x2F;genius.html" rel="nofollow">http:&#x2F;&#x2F;paulgraham.com&#x2F;genius.html</a> has a ticket image)? What&#x27;s the copyright situation there?

This looks awesome, any thoughts on making this automated?<p>Here’s a similar product I ran into here a while ago that uses the info in the other meta tags (title, description) to automate the creation of these images: <a href="https:&#x2F;&#x2F;www.mugshotbot.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.mugshotbot.com&#x2F;</a><p>I also built something similar called Thumblink, which takes a screenshot of the page to create these images: <a href="https:&#x2F;&#x2F;thumblink.com" rel="nofollow">https:&#x2F;&#x2F;thumblink.com</a>

It appears that your logo is 404ing so I get a &quot;broken image&quot; link in the corner of the images.<p><a href="https:&#x2F;&#x2F;ipfs.io&#x2F;ipfs&#x2F;QmWUrYw7zrcnWLEyFafnGgxuZWGuXQ8eDJNHc3Je5KPqbt" rel="nofollow">https:&#x2F;&#x2F;ipfs.io&#x2F;ipfs&#x2F;QmWUrYw7zrcnWLEyFafnGgxuZWGuXQ8eDJNHc3J...</a>

I generate screenshots&#x2F;thumbnails in two sizes during the build process of <a href="https:&#x2F;&#x2F;datacrayon.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;datacrayon.com&#x2F;</a>. They&#x27;re used for twitter cards and to make the homepage a little more interesting!

It&#x27;s an interesting idea. It did not make good thumbnails for my blog posts. I would not have used any of what it generated.<p>If it did generate images I liked, I would be interested in using it, but I&#x27;d prefer to use it as part of a build step rather than adhoc per blog post.

Nice work! I like the quick rendering too.<p>However, I don&#x27;t believe any AI was used for this, so the actual TLD is a bit inappropriate here. A &quot;.io&quot; TLD would would have been more fitting.<p>Not every slice of bread needs to be spread with butter. Similarly, not every project requires AI.

Nice domain- any backstory to it?

I got a 500 error on any pages within <a href="https:&#x2F;&#x2F;murex.rocks" rel="nofollow">https:&#x2F;&#x2F;murex.rocks</a> but every other site I tried worked fine. Really cool project this and polished rather nicely.

The demo look cool. How do you find background image? unsplash? I am currently building my SaaS on top on puppeteer to generate screenshots as well.

This is great! Seems like something that would best be suited for a build process though, any thoughts on that?

Unfortunately it doesn&#x27;t seem to work for my blog. Pasting an article link returns a 500 Server Error.

Loved it. Forwarded to my team to try it out. :D Great stuff.

This is similar to Bannerbear&#x27;s offering but better! Good job!

...fake&#x2F;inaccessible twitter cards?