Image Sizes in WordPress

In our themes, users can define the image sizes for post thumbnails (i.e. featured images). However, the outcome may not be exactly as expected when the dimension is not a square. This article discusses how WordPress handles images and our approach on image sizes.

Why Image Sizes?

In Settings > Media, WordPress allows the users to define three image sizes: Thumbnail, Media and Large. When an image is uploaded, WordPress will generate up to 3 additional images in addition to original image. Why WordPress has to do this? Why can’t WordPress simply use the original image? The reason is very simple. The uploaded image may simply too large to use directly in web application. For example, a normal photo can be easily 4929 x 3264 in resolution and 3MB in size. Even the website only display the smaller image, the whole image has to be downloaded. Therefore, WordPress automatically generates 3 additional images and selects the appropriate image when it inserted into the page/post.

media-settings

Standard Image Sizes

WordPress provides 3 image size in media settings. If you want to change the image sizes, you should change them before uploading any images:

  • Thumbnail: 150 x 150
  • Medium: 300 x 300
  • Large: 1024 x 1024

For thumbnail size, you can choose if the image will be cropped or not. Below is an example:

Thumbnail Cropped to exactly dimension 150 x 150

Medium Proportional: 300×150

As the original image is smaller than Large size, there is no Large image generated in this case. Please note that WordPress calls the original image as size “Full”.

Custom Image Sizes

WordPress allows users to add custom image sizes by using a simply function:

add_image_size( $name, $width, $height, $crop );

For example, we can add the image size 300 x 100:

add_image_size( 'mysize', 300, 100 );

By default, WordPress set the image size by re-sizing the image proportionally. Therefore, we will not get the exactly image size 300 x 100 for our sample image. In stead, WordPress will generate a image with 200 x 100 in dimension as shown below:

To get the exact dimension, we have to turn on the crop mode:

add_image_size( 'mysize-cropped', 300, 100, true );

In crop mode, WordPress set the image size by cropping the image (either from the sides, or from the top and bottom).

Regenerate Thumbnails

If the standard image sizes are changed (media settings) or new custom image sizes are added, the changes are only apply to any new images uploaded. In order to apply the image sizes to the existing images. We have to use a technique called Regenerate Thumbnails. WordPress has recommended three plugins for this purpose:

Simple Image Sizes is a simple tool that extends the Media settings. It allows users to add new image sizes and change the pre-defined image sizes in the theme.

Leave a Reply

Your email address will not be published. Required fields are marked *