How I create the featured images on my blog 📸
Tags: writing, showdev, frontend, tooling
Published: 2021-05-27 11:38:47

---
title: How I create the featured images on my blog 📸
published: true
date: 2021-05-13 23:15:00 UTC
tags: writing, showdev, frontend, tooling
canonical_url: https://www.benjaminrancourt.ca/how-i-create-the-featured-images-on-my-blog
cover_image: https://www.benjaminrancourt.ca/images/how-i-create-the-featured-images-on-my-blog.jpg
---
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)](https://www.w3.org/WAI/WCAG2AAA-Conformance.html) with a simple tool: the **[Accessible Color Generator](https://learnui.design/tools/accessible-color-generator.html)**.

![](https://www.benjaminrancourt.ca/images/learnui.design_tools_accessible-color-generator.html.jpg)<figcaption>Partial screenshot of the Accessible Color Generator, as of April 25, 2021.</figcaption>

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**](https://emojipedia.org/). 📙

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

![](https://www.benjaminrancourt.ca/images/emojipedia.org_.jpg)<figcaption>Screenshot of Emojipedia, as of April 25, 2021.</figcaption>

## Generating the banner

Once I am sure of the title of my post, I create the banner with an online tool simply named **[Banner](https://liyasthomas.github.io/banner/)**. It is a generator created by [Liyas Thomas](https://liyasthomas.com/) and it is under an _Open Source_ licence on [GitHub](https://github.com/liyasthomas/banner). 🌟

![](https://www.benjaminrancourt.ca/images/liyasthomas.github.io-banner.jpg)<figcaption>Screenshot of the application, as of April 25, 2021.</figcaption>

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](https://png2jpg.com/)** to, guess it, convert the image to the JPEG format. 🏹

![](https://www.benjaminrancourt.ca/images/png2jpg-com.jpg)<figcaption>Screenshot of the PNG to JPG tool, as of April 25, 2021.</figcaption>

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

![](https://www.benjaminrancourt.ca/images/comparison-png-jpg-banner.jpg)<figcaption>Comparaison of the banner of this post, JPEG at the top and PNG at the bottom.</figcaption>

## Conclusion

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

- [Accessible Color Generator](https://learnui.design/tools/accessible-color-generator.html)
- [Emojipedia](https://emojipedia.org/)
- [Banner](https://liyasthomas.github.io/banner/)
- [PNG to JPG](https://png2jpg.com/)

I hope these tools can help you too! 🥰