Congratulations! You’ve completed your magnum opus du jour, a Glibs article explaining your not-at-all obsessive interest in sharks and championing similar appreciation in others. You know the title and subtitle you’ve chosen (“I like sharks!” “You should too!”) will attract hoards of eager readers. All you need now is the perfect featured image.

WordPress makes it easy to botch the featured image because there’s no preview method. The only way to insure that what-you-want is what-you-get is to format your featured image into exactly the form that WordPress displays them. This is currently 400 pixels wide and 250 pixels tall. The steps to do this are:

  1. Choose
  2. Crop
  3. Resize

The unbearable burden of choice

Because image editing will be involved you have greater latitude in choosing an original image. It doesn’t matter if there’s something in the image irrelevant to your article because it’ll be removed in the next step. So after typing “sharks” into DuckDuckGo and clicking on “Images” you find one that matches your definitive mental image:

When choosing an original image it’s best to get the biggest one possible to maximize the final image quality. The example above is 1945 pixels wide and 1388 pixels tall. Of course it has some superfluous content but that will be dealt with shortly.

I was told there would be no math

“Cropping” is specifying an area on an image and then removing everything outside it. Most cropping involves a simple rectangular area but in this application there’s a complication because the rectangular area must have the same width-to-height ratio as the way WordPress renders featured images: 400 pixels wide and 250 pixels tall. The width-to-height ratio is called the aspect ratio and in this case is 1.6 (400/250).

So what you want to do is draw a rectangle with an aspect ratio of 1.6 centered over the important part of the image. Some image editors make this trivially easy, others make it frustratingly difficult. For this example I’m going to use the most primitive image editor I have which is the ancient version of Microsoft Paint on my ancient Windows 7 computer.

The original image is too large to render full-scale on my ancient monitor so I’ve scrolled down to the important bit:

The “Select” tool works by moving the mouse arrow to one corner of an imaginary rectangle, click-and-hold, drag to the opposite corner, and release. The select area is shown with a black and white dashed outline:

But now the frustrating part: What’s the aspect ratio of the select area? Paint displays the select area’s width and height at the bottom of the screen, in this case 681 and 434. Dividing width by height produces an aspect ratio of 1.57 which is close but not perfect. When dealing with an application as dumb as Paint I would draw and re-draw select areas until I got one that was close to the size and aspect ratio (1.6) I want. Then I would calculate the height and width of an ideal rectangle with the correct aspect ratio.

Assume the select area in the last screenshot is good enough:

If the select area’s height seems better than the width then calculate a new width as:

original height of 434 * 1.6 = 694 new width (rounded down)

If the select area’s width seems better than the height then calculate a new height as:

original width of 681 / 1.6 = 426 new height (rounded up)

In this case I judge the height is better so the perfect select area is (new) 694 pixels wide by (original) 434 pixels tall. Move the mouse arrow to your best-guess corner and select an area of that size. If it’s not centered then repeat the process until it is.

Once you have an acceptable select area, click the “Crop” button. Only the select area will remain.

Really, I was told there would be no math

In addition to the the width and height most image editors show a select area’s aspect ratio as it’s being drawn so it’s not necessary to do any calculations. Just drag the opposite corner until the select area is a good size and the aspect ratio is 1.6. Some image editors even let you reposition a select area after it’s drawn. This makes the whole process trivial.

That’s easy!

All image editors have a Resize function. Invoke it and resize the cropped area to 400 pixels wide by 250 pixels tall.

This is your perfect featured image. Save it to a file and upload it to WordPress. This article’s featured image is the one from this example so you can see what it looks like.

Postscript

I have magnanimously[1] granted Tonio’s request to mention his favored quick-and-dirty technique for framing featured images. I warn you however, the resulting image will be flawed and imperfect and (IMHO) should be corrected by sterilization.[2]

Recent versions of Microsoft Windows come with an app called Photos the crop function of which has a choice of fixed aspect ratios including one called “Widescreen”. In the video editing business aspect ratios are commonly specified by two numbers of the ratio. The current WordPress featured image ratio is 16:10. “Widescreen” is a common movie aspect ratio 16:9 which is a little wider than 16:10.

If you open your chosen original image in Photos, invoke the crop/rotate function, and select “Widescreen” a select area of 16:9 will be drawn over the image. This can be resized by dragging a corner. You can then drag the original image “under” the select area to frame the content you want. Click on “Save a copy” to save a copy. This is your featured image. No resizing step is necessary.

How will WordPress render it? Currently I think it’ll automatically crop the image back to 16:10 by cutting off slices of the left and right sides. You might to try to include a little extra of the original image to compensate.

Footnotes

[1] The fact that Tonio is one of TPTB and could sic STEVE SMITH on me has nothing to do with it.

[2] Bonus nerd points if you get this reference.