How to Optimise and Set Feature Images for WordPress

Figma feature image

In this tutorial, I show you how to export an image that you created in Figma, compress it and then set it as a featured image in WordPress.

Figma is a design tool and it's pretty awesome. It's like a browser-based tool where design meets Google Docs:

  • You can collaborate on something with someone else at the same time
  • It's really fast
  • It's super easy to use

Check it out by watching the video below or reading the show notes below:

Step 1: Export the Image

  1. Create your image in Figma
  2. Select the image by clicking on it and highlighting the frame
  3. Choose to export it as a JPEG because they generally are a good mix of low file size and high-quality image
  4. Click “Export Resource Tile”
  5. Name your file and save it

How to use Figma to create a feature image

Step 2: Optimise the Image

The aim is to now optimise the image to make it fast to download whilst maintaining the quality of the image.

There are many tools to use for this such as Tiny JPG or Tiny PNG where you simply upload PNGs or JPEGs and it'll reduce the file size for you. You just drag and drop it there and it'll give you the new data load link.

However, I've recently found this tool called TH-makerX that you can download as an app if you have a Mac. I use the following settings:

How to use Figma to create a feature image

  1. Export as a JPEG
  2. Create the file name and add “_rs” (which stands for “resize”) as the suffix. This way it won't replace the original file
  3. Width is set to 2,000
  4. And the image resolution is 72 DPI

Next, you drag and drop your image into TH-MakerX and it will reduce the size of the file and automatically save it to your downloads.

Step 3: Set the Feature Image in WordPress

So the next thing we want to do is go over to WordPress and set this as the featured image.

  1. From the WordPress dashboard, click on “Posts” then “All Posts” in the left-hand column
  2. Click on the post that you are editing
  3. In the column on the right of your blog, click on “Set Feature Image”

How to set a feature image

4. Either drag and drop the image from your desktop or click on “Upload Files”

5. Add in your alt text and title to make it more search engine friendly

How to upload a feature image

6. Click “Set Feature Image”

And you're done!

If you want to learn more about becoming a WordPress consultant or taking your digital business to the next level then check out some of these helpful resources:

Share this post on Social

Simon Kelly

Simon Kelly

Tell us where to send your Prospectus

Now is the time to double down on growing your digital agency.

A Free Training Series For Web Designers and Digital Marketers

Learn how to get clients.
Deliver amazing projects.
Create recurring revenues.

Download our Proposal Template Package

Start winning better projects with bigger budgets now.

Presents

High Ticket Sales Funnels

FREE TRAINING
Three things you need to know before you can start scaling your business with automated high ticket sales funnels

Join the discussion!

The Agency Hour Podcast: Guest Application