Working with custom image sizes in WordPress

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

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

Default built-in image sizes

By default, WordPress has 3 different built-in image sizes:

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

WordPress default media settings

These are basically three size variations of each originally uploaded image through the Media Library. In other words, each time an image is uploaded, WordPress will keep the original copy and resize/crop the image into these three size variations. WordPress uses basic rules to resize these images to the default sizes mentioned above.

WordPress attachment display settings

By default, the original image, and its three variations will be also be selectable from the from the Post Insertion Attachment Display 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.

By using CSS (e.g. the with and height parameters on the img element), fairly similar visual results can be achieved, but the full image is still loaded after which it is resized by the browser.

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.

Upon deleting the images from the Media Library (Delete Permanently), all the additional size variations of the files are also removed.

The downside

Additional image sizes take up more space on the website server. The CSS method does not. 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.

Show in post insertion

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.
22 November 2017 | 26 640 reader(s) found this helpful so far.
Creating custom social media share buttons for posts
Creating custom social media share buttons for posts
See how to create custom #socialmedia share buttons for #WordPress posts...
27 October 2017 | | 0 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.

Save, share, comment & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a shit. Keep it constructive and polite.
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponShare on Tumblr

Comment via Facebook


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.