Image Sizes Explained

When you upload a picture to your WordPress website, its copies – images with additional sizes will be created. Why do we need them? Because we don’t use the same size image everywhere on the site:

So, for example WordPress allows you to use full size image on posts pages and 150×150 (for example) images on archive pages.

But wait – keep in mind that the more registered image sizes you have, the more files will be on your website and more time will be needed to process images during upload.

Default WordPress Image Sizes

WordPress supports several image sizes by default. You can find and change them in administration area in “Settings > Media”.

Default image sizes in WordPress

So, for example you can change WordPress thumbnail size on this page.

What if you don’t use them and do not want WordPress to generate a copy for each of these sizes. You can insert the following hook into your theme functions.php.

But always keep in mind that if your WordPress theme receives updates, then better use a child theme or a custom plugin.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes');
 
function misha_turn_off_default_sizes( $default_image_sizes) {
 
	unset( $default_image_sizes['thumbnail']); // turn off thumbnail size
	unset( $default_image_sizes['medium']); // turn off medium size
	unset( $default_image_sizes['large']); // turn off large size
 
	return $default_image_sizes;
 
}

medium_large

The medium_large image size appeared in WordPress 4.4 together with responsive images feature. It has fixed width 768 and proportional height.

You can deactivate medium_large size as simple as with this code:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large');
 
function misha_deactivate_medium_large( $default_image_sizes ){
 
	$default_image_sizes['medium_large'];
	return $default_image_sizes;
 
}

How to Get All Image Sizes?

Sometimes you have to find out what is the list of available image sizes on the website. Unfortunately there is no common way to do it for both default and custom images sizes, so:

print_r( get_intermediate_image_sizes() );
/*
 Array ( [0] => thumbnail [1] => medium [2] => medium_large [3] => large )
 */

If you have to list registered image sizes, you get them from $_wp_additional_image_sizes global variable, and I can teel you more, you can also get image dimensions from there, example:

global $_wp_additional_image_sizes;
print_r( $_wp_additional_image_sizes );
/*
Array
(
    [my-image-size-name] => Array
        (
            [width] => 400
            [height] => 400
            [crop] => 1
        )
 
    [twentyseventeen-featured-image] => Array
        (
            [width] => 2000
            [height] => 1200
            [crop] => 1
        )
)
*/

Functions

It is easy enough to use WP image sizes in administration area – all you have to do is to select an image size you need from the dropdown. Let’s better make a look at functions then.

the_post_thumbnail()

Top 1 in my list, because I use it more often than anything else.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

Please note, that this function prints an <img> tag, not a URL.

$size
Here is what you can use as a parameter value:

  • image size identifier (name) – medium, custom etc, by default thumbnail,
  • custom size array( width, height ). If you use it, the most appropriate image size will be displayed.
  • you can pass full value to this parameter and an original image will be displayed.
$attr
You can pass any HTML attributes here as an array, you can even rewrite src attribute!

get_the_post_thumbnail()

This function is very similar to the_post_thumbnail(), the difference is that:

Example:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src()

The function allows to get an image URL.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

Please note, that an attachment ID is not a post ID. But you can easily get it, for example if you need a featured image ID, you can use get_post_thumbnail_id() function.

Example:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $image_array[0];

About the $size parameter and a size array read a little above.

How to Add your Custom Image Sizes

This process is very simple and consists of two steps. The first step is required.

add_image_size()

To register an image size in WordPress you can use this function in your current theme functions.php or in a child theme functions.php or in a custom plugin.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );
$size_name
You can not use reserved image size names, here they are: thumb, thumbnail, post-thumbnail, medium, medium_large, large, full.
$width
Width in pixels, set 0 – unlimited width.
$height
Height in pixels, set 0 – unlimited height.
$crop
Earlier this parameter could accept could accept only false or true but now it is much more extended, so here are the possible values:

Value Description
false (default) The image won’t be cropped, just resized for your custom dimension
true The image will be resized and cropped exactly by provided resolution, the central part of the image will be used.
array( position_X, position_Y ) position_X accepts:

  • center
  • left
  • right

position_Y accepts:

  • center
  • top
  • bottom

Let’s make a look at the example:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

To keep the things simple I decided to use a square size in this example. So, it is easy to say, that if the original image is horizontal, the left part of the image will remain, but the right part will be cropped, and the same I can say about vertical images – the bottom part of the image will be cropped.

It is also possible to make manual cropping using “Manual Image Crop” plugin.

But do not create a lot of image sizes as well:

How to Add your Custom Image Size to Media Uploader and Gutenberg

When you insert images to widgets and posts, WordPress (3.5+) allows you to choose what image size to use:

custom image size in wordpress media uploader dropdown

As you can see, it is possible to add you custom size there:

add_filter('image_size_names_choose', 'misha_new_image_sizes');
 
function misha_new_image_sizes($sizes) {
	$addsizes = array(
		"my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)"
	);
	$newsizes = array_merge( $sizes, $addsizes );
	return $newsizes;
}

The cool thing is that this hook also works for Gutenberg image block.

How to Regenerate Images after Changing their Sizes or Changing a Theme

Perhaps you know the situation when after changing add_image_size() parameters or after changing your website theme WordPress does not generate image sizes automatically and images with old resolutions are still displayed on the site.

What should you do in this situation? If there are only 2-3 pictures in your uploads folder, you can simply reupload them. But what to do if there are 2-3 thousands of images?

There is two ways to solve this situation – with plugins and with code:

Regenerate Thumbnails with Plugins

Ok, I can recommend you two simple plugins:

Each of them has its own advantages and disadvantages, so maybe for different situations you can choose what plugin more fits for you.

Regenerate Thumbnails Programmatically

Here I just want to show you the code which allows to regenerate images, how you will use it – it is your choice.

$attachment_id = 5; // pass your attachment ID here
 
$path = get_attached_file( $attachment_id );
$meta = wp_generate_attachment_metadata( $attachment_id, $path );
wp_update_attachment_metadata( $attachment_id, $meta );

How to Create Certain Image Size Thumbnails for Custom Post Types Only

So, let’s imagine that your website has 10 registered custom post types, and each of them use 2-3 image sizes on the website pages. It is easy to understand that when we upload any picture on the website WordPress creates 20-30 copies of it!

There is no way to use add_image_size() for a custom post type but here is a small piece of code that solves this problem. This code tells WordPress when it have to create a certain resolution copy of the picture and when it doesn’t.

Both intermediate_image_sizes and intermediate_image_sizes_advanced hooks are OK for this task. A super simple example below, after you insert the code to your functions.php file thumbnails my-image-size-name won’t be created for images, uploaded from custom post type page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){
 
	if( isset( $_REQUEST['post_id'] ) && 'page' == get_post_type($_REQUEST['post_id'] ) ) {
		unset( $sizes['my-image-size-name'] );
	}
 
	return $sizes;
 
} );

A little bit more complicated example, but it is also correct:

/*
 * this hook will be fired while you uploading a picture
 */
add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' );
 
function misha_reduce_image_sizes( $sizes ){
	/*
	 * $sizes - all image sizes array Array ( [0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail )
	 * get_post_type() to get post type
	 */
	$type = get_post_type($_REQUEST['post_id']); // $_REQUEST['post_id'] post id the image uploads to
 
	foreach( $sizes as $key => $value ){
 
		/*
		 * use switch if there are a lot of post types
		 */
		if( $type == 'page' ) {
			if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages
    				unset( $sizes[$key] );
    			}
		} else if ( $type == 'region' ) {
			if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335'
    				unset( $sizes[$key] );
    			}
		} else {
			if( $value != 'thumbnail' ){ // turn off everything except thumbnail
    				unset( $sizes[$key] );
    			}
		}
	}
	return $sizes;
}

# WordPress

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter