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:
- in posts,
- in portfolio,
- in popups,
- as post thumbnails on archive pages,
- in widgets,
- in administration area etc;
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”.

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:
- If you need the list of default image sizes, you can use
get_intermediate_image_sizes()
, which returns an array with default image sizes, example:
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 defaultthumbnail
, - 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.
- image size identifier (name) –
- $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:
- The first
get_the_post_thumbnail()
is a post ID, everything else is the same, - It returns an image, not prints it.
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
ortrue
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:
- the more image sizes you create — the more files will be in your uploads folder,
- and the more time will need to upload an image to your site.
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:

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:
- Ajax Thumbnail Rebuild
- Force Regenerate Thumbnail
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;
}

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
Hello,
please, tell me the image size names for each post type and each taxonomy. I can help you with the code then.
Hi,
after a little bit thinking, I have found how does it work and really solved most of the problem.
I have standart posts with galleries, which are posted from admin backend and for them I can limit the image sizes. This is the biger part of the problem, because standart posts are with galleries with 15 – 20 images /15 * 20 custom image size are 300images for only one post/.
Smaller part of the problem is that custom post types are published from frontend and for them I can’t apply the code above.
At the moment image sizes are generated on upload, Is it possible to generate only sertain size of the image, only on request for that size?
Hi,
Try to apply
save_post
filter or another.I’m not sure how this can be implemented.
This looks like pretty much exactly what I need, but I was wondering about the hook. Why does this go on
intermediate_image_sizes()
and not onintermediate_image_sizes_advanced()
? I’ve seen a couple of different suggested solutions for this problem and don’t know why some use one hook and some the other.Hi Sallie,
good question. And let me give you a good answer :)
intermediate_image_sizes
applies beforeintermediate_image_sizes_advanced
and passes only one parameter — the array of image sizes names, for example:array('thumbnail', 'medium', 'large', 'custom_size')
.So we can unset any of image sizes on the early step:
If you unset image sizes in
intermediate_image_sizes
(but not inintermediate_image_sizes_advanced
), it could improve website performance for a little because it prevents some actions in the code, I suppose.intermediate_image_sizes_advanced
runs after the image sizes names are converted into an associative array. You can use this filter the same way to unset image sizes by name, but you can use additional values that are passed to the filter.Thanks so much for the detailed explanation. I noticed when I added your code to my `functions.php` file, I got a “headers already sent” error in my Debug Bar.
What code do you mean? And what headers? I need more info :)
Misha, this is brilliant! Thank you so much.
In my case, I was uploading small graphics that are already the right size — ads and logos which have been prepped elsewhere. For that case, I wrote:
Hi, great article! I’m trying to catch animated gifs right before the images get created. Writing a plugin to catch that and generate the smaller animated gifs in order to keep the animation. I got most of the code sorted (I think) but can’t find the right hook…
image_make_intermediate_size is right after the images get resized…
Any guidance?
Hi Misha, i think there are some exceptions in the code you provide. Perhaps it depends on my theme, or WordPress changed, but i am not sure (Working on WordPress 5.2). I verified what files are produced in wp_content/uploads and these are my conclusions:
1. the filter
intermediate_image_sizes_advanced
is working, but theintermediate_image_sizes
is not working.2. the filter is working only for the default WordPress sizes (thumbnail, medium, medium_large, large). Custom theme sizes, and plugin sizes ignore the “unset”.
3. The array
get_intermediate_image_sizes()
outputs all the 4 WordPress default sizes, even if they are really unset. And proved there are no image produced in filesystem. I wonder why.4. To unset plugin sizes i used another action, and the function remove_image_size(). More details in Codex (https://codex.wordpress.org/Function_Reference/remove_image_size + https://developer.wordpress.org/reference/functions/remove_image_size/).