How to Create, Optimize and Add a Featured Image or Post Thumbnail in WordPress

  • Post last modified:Last updated on August 7, 2022
  • Post author:By

A featured image represents your post or page and it is an important piece of content. It usually appears at the top of your blog post on the front end of your website.

In this guide, we are going to show you how to create, optimize and add a featured image or post thumbnail in WordPress.

How to Create, Optimize and Add a Featured Image in WordPress

Creating a Featured Image

We’ll be using Photopea, a free web-based graphics editor that allows you to edit photos, apply effects, create filters, add text, and crop or resize pictures without leaving your browser.

Let’s navigate to and click on the New Project button:

Photopea New Project

A new window will pop up. Here we can either choose a predefined template (if you are creating images for different media such as social, print, or mobile) or set custom project properties.

A good starting point for our featured image size is 1280x720px. Type 1280 under width and 720 under height, then click on create.

New Project in Photopea

You’ll see the Photopea workplace with a new empty canvas, the top menu bar, and the toolbox bar with a set of tools on the left side of the screen. This toolbox bar contains various tools for making selections, cropping and retouching images, adding shapes and adding text, and many more!

We are going to use a background image that we previously downloaded from Pixabay, which is a community platform that offers free stock photography and royalty-free stock media for your projects.

Click on File → Open & Place from the top menu bar and find and place your image. Use the transform controls to scale and move the images to fit the canvas.

Adding New Background image in Photopea

With a beautiful background image, it’s time to add some text. From the toolbox menu on the left, select the text icon, click on top of the image, and start typing your headline.

The new text looks small and difficult to read, but don’t worry, at the top of the canvas you’ll see the text settings. Here you can change the text size, font family, color, and alignment.

Photopea Text Settings

If the new headline is difficult to read, you can add a semi-transparent background to make it more readable. Let’s see how we can do that using Photopea:

First, select the shape tool from the toolbox, set the fill color to black, and remove any stroke color if applicable. Click and drag from one side towards the end of the canvas, find the opacity slider on the right of the screen, and adjust as needed.

The new shape layer is at the top of the layer stack and we need to move it below the text layer. Click and drag the shape layer below the text layer.

The new design looks much better!

Adding Semi Transparent Background on the Featured Image

Once you are happy with your design, it’s time to download it from Photopea. To do that, click on File → Export As. You’ll see the different formats available such as png, jpeg, SVG, gif, etc. Select your preferred format and a new pop-up window will appear.

Here you can set different options, such as quality, width, and height. We recommend setting the quality value between 75% and 80%. This keeps the image size low and retains image quality at the same time.

Click on the Save option, which will save your design from Photopea to your local hard drive.

Save Photopea Settings

Optimizing Your Featured Image

You have been doing a great job designing the new featured image, but now we need to optimize it and make it web-ready. Search engines love performance and as such, we need to make sure our images and media assets are perfectly compressed.

In this guide, we are going to use TinyPNG which is a popular website to compress images by reducing the file size. TinyPNG is also available in WordPress plugin’s repository and once you’ve installed it, it will automatically optimize new images upon upload.

Go ahead and open in a new tab and drop your newly created design into the box found in the middle of the page and wait until TinyPNG has finished optimizing your image.

That’s it! Now click on the download link and you’ll have a perfectly optimized image ready for your WordPress post.

Optimizing Images with TinyPNG

Adding a Featured Image in WordPress

Congratulations! This is the last step needed to make our new image live.

Let’s edit our existing WordPress post and find the featured image option on the right sidebar of the WordPress workspace. If this is your first time working with a post in WordPress, we recommend that you read our step-by-step article about adding a new blog post in WordPress.

Setting a festured image in WordPress

Select your optimized image from your local hard drive and after WordPress uploads the file it will be available on the WordPress media page.

Set the alt text and click on the Set Featured Image button. Don’t forget to save your changes by clicking on the Update option at the top of the WordPress workspace.

Upload Featured Image to WordPress

That’s all! We hope this article helped you understand how to create, optimize and add a new featured image in WordPress.

If you liked this article, then please follow us on Twitter and Facebook.

Editorial Team

The GetStartedWP editorial team is a team of WordPress experts and developers. We are passionate about creating and sharing content like tutorials and guides about the entire WordPress ecosystem.

Disclousure: Our content is reader-supported. This means if you click on some of our links, then we may earn a small commission.

Leave a Reply