DEV Community

Cover image for How I create the featured images on my blog ๐Ÿ“ธ
Benjamin Rancourt
Benjamin Rancourt

Posted on • Originally published at benjaminrancourt.ca on

How I create the featured images on my blog ๐Ÿ“ธ

For most of my posts, I do not have any useful images to put at the top of my posts. But since my articles are displayed inside cards with an image in it, I want to have one so all cards look the same.

Many other bloggers use photos from images banks, or just public domain images. Rather than using more or less related images, I personally prefer to create my own images with the post title inside, like the banner at the top of this article. โš’๏ธ

So, for people who are wondering how I created them, I decided to write this little post. If you write articles on your personal blog or on another platform like Medium, you will now have another option to decorate your post. ๐Ÿ˜‰

Decide the colors of the banner

As I want the text to be accessible to everyone, I make sure the colors meet the level AAA of Web Content Accessibility Guidelines (WCAG) with a simple tool: the Accessible Color Generator.

Partial screenshot of the Accessible Color Generator, as of April 25, 2021.

Most of the time, I pick random colors that I like and I just use the output colors from the FOR LARGE/BOLD TEXT result section. ๐Ÿญ

Add some emojis

Even though some posts are more serious than others, I usually find something missing, maybe a few colors, so I add emojis with the help of the great Emojipedia. ๐Ÿ“™

Some people may find them unnecessary, but I think they add a little personal touch, don't you think? ๐Ÿ˜Š

Screenshot of Emojipedia, as of April 25, 2021.

Generating the banner

Once I am sure of the title of my post, I create the banner with an online tool simply named Banner. It is a generator created by Liyas Thomas and it is under an Open Source licence on GitHub. ๐ŸŒŸ

Screenshot of the application, as of April 25, 2021.

Even if the tool has many options, I usually use only four of them:

  • Banner text
  • Background color
  • Foreground color
  • Font size

Since these options are pretty self-explanatory, I am sure you will understand them. ๐Ÿ™ƒ

Convert the PNG image to JPEG format

As the banner generator can only create PNG, I am using an online converter named PNG to JPG to, guess it, convert the image to the JPEG format. ๐Ÿน

Screenshot of the PNG to JPG tool, as of April 25, 2021.

Why convert them to the JPEG format? Personally, I prefer to have the images as small as possible, because most of the time, the images do not convey important information. It is possible that they lose some quality, but I think this is fine for all the bytes that are saved. ๐ŸŒณ

Comparaison of the banner of this post, JPEG at the top and PNG at the bottom.

Conclusion

In this post, you learned four tools that I frequently use to create the featured images of my blog posts:

I hope these tools can help you too! ๐Ÿฅฐ

Top comments (0)