Working with custom image sizes in WordPress

Working with custom image sizes in WordPress
Published: by Renier Delport
Last updated: 19 September 2017
Collection(s): Website Development

Often website theme styling and development requires different sized images in various locations. This post is about creating and working with custom image sizes in WordPress.

Default image sizes

By default, WordPress has 3 different image sizes:

  • Thumbnail size (150 x 150 pixels)
  • Medium size (300 x 300 pixels)
  • Large size (1024 x 1024 pixels)

WordPress default media settings

In order to speed-up the loading time of a webpage, it makes more sense to have (especially large) (re)sized images pre-loaded instead of full images being resized while the page is loading. Each time an image is uploaded via the Media section, WordPress uses basic rules to resize these images to the default sizes mentioned above.

By default, WordPress uses, among other ways, the functions.php file to do the resizing behind the scenes without the user even knowing it. This happens each time an image is uploaded.

By using a FTP client (e.g. Eclipse), these resized images will be visible in the /wp-content/uploads directory of the website.

The downside

Additional image sizes take up more space on the website server. Each time a new image is uploaded to the site, WordPress will convert it to these default sizes. When additional sizes are added, more space will be required to accommodate an additional copy of these resized images too.

Wordpress image size duplicates

This makes it even more important to apply good optimisation practices (e.g. quality:size and image type) when it comes to uploading images.

Additional image sizes

Although the default settings can be changed manually through the Media Settings section (not recommended for now), additional image sizes can be added to WordPress in various ways:

  • Some plugins (e.g. WooCommerce) can add additional image sizes by default
  • Certain themes (e.g. Twenty Eleven) can add functions to use different/additional image sizes
  • Changing the functions.php file manually

As with the default image sizes, various plugins (e.g. WooCommerce, Toolset and Shortcoder) will be able to use these resized images. The resized images can also be added using PHP (see later).

For the purpose of this post, a modification of the (child) theme’s functions.php file will be used. The modification will be made by adding code to this file.

Adding known image sizes

Additional known image sizes can be added by modifying the (child) theme’s functions.php file.

Firstly, support for post thumbnails / featured images will have to be activated:

// Enable feature image support
add_theme_support( 'post-thumbnails' );

Look at the following code example:

// Add featured image sizes
add_image_size( 'featured-large', 640, 294, true ); // width, height, crop
add_image_size( 'featured-small', 320, 147, false );

add_image_size() has four arguments:

  1. name, string (required)
  2. width, integer (in pixels, optional)
  3. height, integer (in pixels, optional)
  4. crop, boolean (true/false, optional)

In other words, with the code snippet above, two additional image sizes are set:

  • A large featured image (640 x 294 pixels), featured-large. The crop argument is set to true.
  • A small featured image (320 x 147 pixels), featured-small. The crop argument is set to false.

The crop options will work as follows:

1) True: The image will be cut to the predefined shape/size. Also referred to has “hard cropping”. This will no longer maintain the same shape as, or contain the full contents of, the original image.

Example image with dimensions of 1024 x 512 pixels.
Working with custom image sizes in WordPress - hard crop
Example image after “hard cropping” now with dimensions of 512 x 256 pixels.

2) False (default, or no value): The image will be resized. Also referred to as “soft cropping”. This will maintain the proportions of the image. In other words, the entire image will be resized according to the specified dimensions without changing the shape of the image, or cut any bit out of it.

Working with custom image sizes in WordPress - soft crop
Example image after “soft cropping” now with dimensions of 512 x 256 pixels.

Known image sizes can be added in PHP as follows:

// Display post's featured image, in 'featured-image-large' size

// Inside the loop
the_post_thumbnail( 'featured-image-large' );
// Outside the loop
echo get_the_post_thumbnail($page->ID, 'featured-image-large');

Enabling additional image sizes for post content

To be able to use the additional image in the WordPress back-end (e.g. in posts and pages), additional code needs to be added. For this, it is simpler to use a plugin named Simple Image Sizes. After Simple Image Sizes has been installed and activated, ‘Show in post insertion’ needs to be activated in the Settings > Media section.

Removing image sizes

When an image size is not required, WordPress can be instructed to ignore them. By adding the following code to the (child) theme’s functions.php file, the medium image size will be removed:

add_filter('intermediate_image_sizes_advanced', 'bts_filter_image_sizes');

function bts_filter_image_sizes ($sizes) {
    unset( $sizes['medium'] );

    return $sizes;
}

with sizes['thumbnail'], thumbnails will be removed, and with sizes['large'], large image size will be removed.

How images are resized

Images are only resized when one or both of the dimensions are larger than the defined image size dimensions. Smaller images will be left untouched.

Recommended image sizes

Although bigger is better, the file size of the image needs to be considered too.

Firstly, I recommend using a properly configured quality:size ratio when saving website images. On Adobe Photoshop I for example use 8 for the JPEG quality.

Secondly, try to do some manual cropping yourself. Use the largest set WordPress image size for the original image.

The WordPress cropping functions will only crop images with dimensions larger than the image sizes. If either the height or the width is larger, the image will be cropped proportionally using the guidelines mentioned earlier.

Regenerating the old image sizes

By adding additional image sizes, existing images (those uploaded prior to updating the functions.php file) will not be resized. The same problem will exist when the dimensions of default image sizes are changed.

The Regenerate Thumbnails plugin does a great job at doing this for us. After installing and activating the plugin, navigate to Tools -> Regen. Thumbnails and follow the instructions. The plugin needs to be run after each time an image size is added or switched.

Regenerate Thumbnails plugin for WordPress

This step will unfortunately not remove the old custom image sizes from the /wp-content/uploads directory of the website.

What about mobile responsiveness?

In the later versions of WordPress, they have made it very easy to still maintain responsiveness. It should work out-of-the-box as with the default image sizes.

More website development related posts

Premium templates for websites that perfectly fit your business
Choose from thousands on templates for a profession looking WordPress website.
[date format="j F Y"] | 26 640 reader(s) found this helpful so far.
A better way to add fonts to a WordPress site
A better way to add fonts to a WordPress site
See a better way to add fonts to a #WordPress site...
16 September 2017 | | 1 reader(s) found this helpful so far.
WordPress code snippets
WordPress: Display categories without the link
See #howto display categories without the link in #WordPress... #WPcode
11 September 2017 | | 0 reader(s) found this helpful so far.
WPtouch mobile theme
Make your website mobile friendly with WPtouch – easily, simply & elegantly
See #howto make your website mobile friendly with #WPtouch...
19 March 2016 | Updated 2 September 2017 | | 3 reader(s) found this helpful so far.
Using MailChimp to Send Automatic Post Notifications
Using MailChimp to send automatic post notifications
See #howto use #MailChimp to send automatic post notifications...
5 March 2016 | | 4 reader(s) found this helpful so far.
Introducing MailChimp - Sending Better Email
Introducing MailChimp – Sending better email
See #howto send better emails with #MailChimp...
5 March 2016 | | 3 reader(s) found this helpful so far.

Did you like this post?

(1 reader(s) found this helpful)
You have not rated this post yet. You can do so clicking on the thumbs up icon.
Loading...

Please share, comment & Disqus

Please use the buttons on the left or the bottom of the screen to share this post.

Your comment is important to us, but please keep the comments constructive and polite.

Comment via Facebook

Disqus

About the author
Renier finds himself busy with creative web design and his websites, motorcycling, photoshopping, micro electronics, non-commercialised music, superhero movies, badass series and many other things that are not interesting to most people.