Previously on “The art of the perfect featured image”

https://www.glibertarians.com/2022/08/the-art-of-the-perfect-featured-image/

But I don’t want to crop my original image

Then you don’t have to but it means the result may render smaller than you want. The WordPress featured image size of 400 pixels wide and 250 pixels tall isn’t a lot of space to work with. It also means There Will Be Math.

The original for this article’s featured image is this:

It’s 400 pixels tall and 400 pixels wide. If set as a featured image WordPress will render it like this:

The solution is to add white borders on the left and right sides to pad out the image to the WordPress featured image aspect ratio of 1.6.

You may want to avert your gaze

The original image’s height of 400 pixels will remain the same so you have to calculate a new width:

original height (400) * featured image aspect ratio (1.6) = 640 new width

The total added padding is:

new width (640) – original width (400) = 240 total added padding

But the padding goes on both the left and right sides so each side gets:

total added padding (240) / 2 = 120 padding per side

Invoke the “Add borders” function of your favorite image editor and add 120 pixels of white space on the left and right sides. I put a black border around my result here so you can see the new borders:

Then resize the image to 400 pixels tall and 250 pixels wide. This is this article’s featured image. Again I added a black border for this example:

The original has been shrunk to fit inside the 400 by 250 box.

As above so below

If your original image is wider than the WordPress featured image then the calculation is a little different. Here is an image with the 2.35 “CinemaScope” aspect ratio common in movies:

It’s 255 pixels tall and 600 pixels wide.

If set as a featured image WordPress would render it like this:

This time the solution is to add white borders on the top and bottom.

It’s just a little math. It’ll go away soon.

The original image’s width of 600 pixels will remain the same so you have to calculate a new height:

Original width (600) / featured image aspect ratio (1.6) = 375 new height

The total added padding is:

new height (375) – original height (255) = 120 total added padding

But the padding goes on both top and bottom so each side gets:

total added padding (120) / 2 = 60 padding per side

Invoke the “Add borders” function of your favorite image editor and add 60 pixels of white space on the top and bottom. I put a black border around my result here so you can see the new borders:

Then resize the image to 400 pixels tall and 250 pixels wide. Again I added a black border for this example:

The original has been shrunk to fit inside the 400 by 250 box.

Mea culpa

In the previous article’s postscript I said that it wasn’t necessary to resize an image after it had been cropped to the Widescreen 16:9 aspect ratio. This is flawed and imperfect and I should be corrected by sterilization.[1] The resulting image should be resized to 444 pixels wide and 250 pixels tall. WordPress will then chop off 22 pixels from each side to render the middle 400 pixels.

Footnotes

[1] I can’t believe that no-one picked this up from the previous article. Your nerd cards have all been revoked.