DEV Community

Cover image for Is anyone else too lazy to create blog post header images for each blogging platform?
Trisha Lim
Trisha Lim

Posted on

Is anyone else too lazy to create blog post header images for each blogging platform?

I am currently posting my blog posts to 3 websites:

  1. my own website
  2. dev.to
  3. hashnode

I'd like to post in even more platforms like Hackernoon and Medium.

I find it troublesome to create header images though. For each platform, I have to figure out the appropriate dimensions, then create an image on photoshop that works best for each.

Is anyone else having this problem, or is it just me?

I'm asking because I'm thinking about building a solution for it, so that we only spend 5-10 minutes making these images.

Thoughts? How do you create your images? Would you use a blog post header image generator or prefer to do it yourself using existing tools?

Top comments (5)

Collapse
 
nagi profile image
Ahmed Nagi

I use a read-made template made using photopea.com it takes me 2 mins to wirte the article title and put logo or image related to the title.

on a side-note I wrote a blog post explaining how I make my social media haeders πŸ‘‡
ahmednagi.com/create-social-media-...

Collapse
 
nkemdev profile image
Nkem

I use Canva to create my own header. Your dimensions should be about (1600px x 1050px) so you will not have to struggle much. For hashnode and Dev.to, this works for me. I hope this helps. Thanks.

Collapse
 
diballesteros profile image
Diego (Relatable Code)

I just use some predefined templates I made in Figma

Collapse
 
maddy profile image
Maddy

I use Canva to create my images.

For Hashnode, I create an image as a banner (landscape).

Cover images for DEV.to are a bit smaller, so I use an image resizer to reduce it to 1200 x 420.

Collapse
 
jnv profile image
Jan Vlnas

Yes, this is a major pain for me! Currently I just pick some random photo from Unsplash and crop it, but I plan to automate this.

There are a few npm packages, many of them tied to Next.js, like next-api-og-image so that's a good start. Most of these approaches rely on headless browser to rasterize the image, but I was thinking about lighter approach: create a parametrized template as SVG and run it through any SVG rasterizer like Inkscape or resvg.

Also, I don't need nor want this generator as an API or ran on every build, I am okay with running a script manually whenever I make a blog post.

Do you have experience with any other automatic generator for this stuff?