Web support for content editors: Featured image importance

Summary

If you wish to have your post appear in feeds in other locations you will need to add a feature image so it has an thumbnail image associated with it.

Longer read

If you look at the home page for our blogs, you will see little, square thumbnail images next to every post teaser. This is how to add/manage those little images.

Example of a blog feed with square image to the left of each post teaser.

Examples of the thumbnails

Taking more control using a “Featured Image”

When you are in the edit page for your post, look in the right sidebar (probably near the bottom) and you will see a “Featured Image” box. Clicking on the “Set featured image” link will display the Media library to chose an existing image or upload an image. If set, a featured image become the image that is used for the blogs feed. It does not show up in the content of your post.

Things to remember about the featured image:

  • It should be square or look good cropped as shown above.
  • It should be at least 150px by 150px (300px by 300px is even better) so that the resolution does not suffer in some contexts.

Square thumbnail and a non-square image

Automation is a wonderful thing if it does what we want. The square thumbnails use the largest possible version of an image that fits by cropping a square out of the center of the image. See the examples below.

Landscape (primarily horizontal) images are cropped to cut away the right and left edges.

Landscape image cropping

Portrait (primarily vertical) images are cropped to cut away the top and bottom edges.

Portrait image cropping

For the above examples the cropping to a square image works out because all the salient image information is still inside the square. Other images will be less than optimal.

Example of a bumper sticker failing to crop well.

A cropping failure

So it behooves you to use an image with better aspect ratio.

Alternative to cropping before you upload your Featured Image

There is now an option to crop the thumbnail with a desired focus (e.g., on a person’s face rather than cropped out of their midsection). See this article on thumbnail cropping in WordPress.