Thumbnails vs. Featured image size

The aspect ratio of an image describes the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, as in 16:9 – Wikipedia

Featured Image Size and Thumbnails

The featured image can be set on any post. To do this just go to the wp-admin area and edit the post for which you want to add the Featured Image. Look for the Featured Image panel on the right.

2015-10-26_10-45-19

On our pre-built website we use multiple sizes, most have around 1068 × 713 px.

2015-10-26_10-56-25

There is no ideal featured image size, it depends on the blocks/modules used on the page. On some the aspect ratio is 4:3 and on others is around 16:9. We use thumbnails on pages to reduce the page size and improve the page loading speed.

2015-10-26_11-02-29

Cropping

To generate the thumbnails the theme uses the add_image_size() function, you can find all details about it on the codex and here.

On cropping a part of the image will be lost due to aspect ratio differences, some modules have a 16:9 aspect ratio some have one closer to 4:3.

  • Example 1: if you upload an image that has an aspect ratio close to 4:3 the cropping function will cut the bottom on thumbs which have a 16:9 aspect ratio.
  • Example 2: if you upload a 16:9 image the function will cut a portion from the sides for the thumbs that have an a 4:3 aspect ratio.

Depending on the module used, the best solution is to experiment with different sizes and see which one offers the best results.

Enable/Disable thumbs

The theme uses multiple thumb sizes which can be enabled from Theme Panel -> Block Settings. You can disable the unused ones to save some space on hard drive.

2015-10-26_11-31-44

The thumbs size is also described here.

Upscale

WordPress doesn’t have an upscale function, if you upload small images on modules which use thumbs that are larger than the uploaded image the original size will be used (the image will not be up-scaled), this is not ideal because blank space may appear around the thumb.