We talked about thumbnails and their importance before. One thing you should be aware of when selecting featured image, is that images are cropped and resized by WordPress to produce thumbnails. So it is not a good practice to use images which you insist to show special part of them in all thumbnails. Of course it is possible but you should select proper image size at first place.

Aspect Ratio

The ratio of the width to the height of an image is called “aspect ratio”. This is basis for WordPress thumbnail creating functionality.

How WordPress Crop and Resize Images

First of all it measures original image and needed thumbnail aspect ratios. Let’s say original image size is 1500×2200 pixels and theme has a thumbnail 90×60 pixels.

Original image aspect ratio: (1500 / 2200) = 0.68

Thumbnail aspect ratio: (90 / 60) = 1.5

So it is obvious now the original image is too taller than that the thumbnail could be created just by resizing. It needs cropping first. Original image aspect ratio should change to 1.5 which means height should be decreased.

New height of original image: (1500 / 1.5 ) = 1000

Original image new aspect ration: (1500 / 1000) = 1.5

After making both aspect ratios the same, it’s time for resizing.

 Width: 1500 * (90 / 1500) = 90

 Height: 1000 * (90 / 1500) = 60

This was an example for “tall” image. If the original image is wide (its aspect ratio bigger than thumbnail aspect ratio), the original image should be cropped horizontally before resizing.

But how WordPress crops images? From top or bottom? right or left? In Publisher, cropping is equal in both sides. For example, an image need 200px crop in height; 100px in top of the image and 100px in the bottom of the image is cropped.

Thumbnails in “Publisher”

Publisher defines 9 thumbnails:

NameSizeAspect ratio
1publisher-tb186 x 64 pixel1.34
2publisher-sm210 x 136 pixel1.54
3publisher-mg2279 x 220 pixel1.27
4publisher-md357 x 210 pixel1.7
5publisher-lg750 x 430 pixel1.74
6publisher-full1130 x 580 pixel1.95
7publisher-tall-sm180 x 217 pixel0.83
8publisher-tall-lg267 x 322 pixel0.83
9publisher-tall-big368 x 445 pixel0.83
Because 1.74 aspect ratio is used more and 750x430px thumbnail is dominant, we recommend to use at least 750×430 pixel featured image or bigger image with 1.74 aspect ratio. Also if the featured image be small, WorPress enlarges it to produce thumbnails and this leads to quality loss.

Let’s take a look at two bad sized featured images. First one is a tall image.

Original image (image size reduced 3 times to look better in this page – image size is 750 x 1124 pixel):

tall image in Publisher featured image
And the thumbanils 750x430px is (image size reduced 3 times to look better in this page):

bad thumbnail in Publisher (tall)
You see original tall image is not good at all in dominant size (750x430px) thumbnail.

Another example is too wide image.

Original image (image size reduced 2 times to look better in this page – image size is 1076 x 430 pixel):

wide image in Publisher featured image
The thumbnails 180x217px is (image size reduced 2 times to look better in this page):

 

bad thumbnail in Publisher (too wide)
Again it is not a good size. Too wide images have this problem.

FAQ: How to show featured content in thumbnails all the times?

Some users want to show specific part of their featured image all the time. For example one wants to show “The New York Times” in above image in all thumbnails. Do not try this. No just in Publisher, do not try it in all WordPress themes which use thumbnails. Rather than image cropping, it might resize dynamically somewhere in the theme and waste all your efforts to show specific content in featured image anyway. As we said it is possible but not pleasant. Narrow down the content you want to show in a small area in the center of image. For example you use different thumbnails in your theme and their smallest aspect ratio is 1.27 (publisher-mg2) and biggest one is 1.74 (publisher-lg). Now your specific content should be inside an area with below width and height:

Width: 1.27 * (image height)

Height: (image width) / 1.74

Look at below example:

an example for always visible featureed image

Image size is 850x430px. By using above formulas, width is 546px and height is 489px. Image height is smaller than 489px so we say 430px is completely covered.

Still there is no guarantee the content be visible all the times because of design of some elements in theme and dynamic changes. The suggestion still is: “Do not rely on it”