How to Resize WordPress Thumbnails

If you change your Wordpress theme or even just tweak the layout of your existing theme, you might need to change the size of your…

If you’ve switched WordPress themes, the chances are that the new theme will use thumbnails of different dimensions. Sure, you can just plow ahead and use the old ill-fitting thumbnails, but that’s going to look ugly as you get a hodgepodge of differently sized thumbnails on a page.

But changing the thumbnails sizes–or, for that matter, the size of any image copy generated by WordPress–is easy. Here’s how to do it.

Changing the Size of your Standard Thumbnails

By default, WordPress gives you three image sizes you can customize. You access them in your WordPress admin dashboard under Settings > Media. There you can set the dimensions of the basic image sizes that the WordPress Media Library makes available. These are all generated when you upload a new image through the Media Library.

In the example here, you’ll notice I use 0 in the height field. That’s because I only want to control the width. It’s the way I prefer to handle a mix of portrait and landscape-oriented images so that they’ll always fit the full display widths of my theme. But in many cases, you might use a specific number where I’m using the 0.

Changing the numbers here and hitting Save Changes gets you halfway to where you want. If you want to resize existing thumbnails that have already been uploaded to your WordPress site, you’ll want to skip further down this page to the Regenerate Thumbnails part.

Creating Multiple Thumbnail Sizes

WordPress gives you three images sizes. But what if you need more than that?

On this site, for example, I have several different thumbnail sizes. If you take a look at the front page, I’ve got large thumbnails in the middle section and then smaller square thumbnails below that. I have another size for search results and archive pages. And then I have one that’s specifically for my RSS feeds so that it’s sized perfectly for use in my Mailchimp layout. And those are all separate from the Medium and Large sizes I use for images within a post. Sure, I could probably get by without these extra sizes, but each has a functional reason for being used. So why not?

There’s no setting in the WordPress admin dashboard to do this. Instead, you add some code to one of the files of your theme. The file you’re looking for is functions.php. Under a normal WordPress installation you’ll find it under /wp-content/themes/[theme name]/. Before editing this file, it’s a good idea to create a backup. If you make a mistake in this file, you’ll probably get a blank white screen when you try to open your site. It’s not permanent damage–just roll back the change to the backup version and it should pop right back. So a backup makes things much easier.

You want to open functions.php in a text editor. [Here’s some guidance if you need help with that.] The function that we’re going to add is the add_image_size.

You add a line like this to your functions.php file:

add_image_size( 'homepage-thumb', 270, 175, false );

Using this example, “homepage-thumb” is the name of the thumbnail. That can show up in several parts of the dashboard admin functions to help you identify one image size from another. It’s just a friendly name. In naming your sizes, there are some names you can’t use: thumb, thumbnail, medium, large, and post-thumbnail. Those are reserved by WordPress for its own use in setting up the default image sizes.

The two numbers refer to width and height, in that order. In this case, it’s 270px wide and 175px high.

The “false” but sets the type of crop. WordPress uses the terms “hard crop” and “soft crop” for these. Setting it to false will create a soft crop, which is also commonly known as a “fit” crop. It’s also known as a proportional resize, and it’s the purest form of resizing. The entire image is preserved but just in a different size. In the example here, it will put the entire image within a box that is 270px wide and 175px high. So you’ll see the entire image, but if your images are not the exact same aspect ratio as your soft crop box, you’ll end up with thumbnails displaying with different aspect ratios.

Setting it to “true” creates a hard crop. That’s also commonly known as a “fit” crop. That will use the entire space of the box, but if the aspect ratios (shapes) don’t match, it will cut off the section of the image that falls outside of the box. It’s like trying to print a rectangular photo on a square piece of paper.

There is also a third option–“array”–in which you can specify which region of the image gets cropped, such as top left or bottom right. By default, WordPress focuses on the middle of the image. The array function is a bit more specialized; you can find the syntax for it here.

You can also just specify one dimension. For example:

add_image_size( 'homepage-thumb', 270 );

makes a thumbnail that is 270px wide and with no constraints on its height. So a vertical image that is very tall and thin might end up being 270px wide by 1000px tall.

If you want to add more than one thumbnail size to be generated, just add another line with the new settings. Something like this:

add_image_size( 'homepage-thumb', 270, 175, false );
add_image_size( 'search-thumb', 150, 150, true );
add_image_size( 'rss-thumb', 120, 80, false );

You can have multiple sizes here, although bear in mind that all of these are generated when you upload an image to WordPress—so having a lot of them can slow down the upload process a bit. It also creates a separate image file for each size.

When you add these new sizes, they’re not going to magically appear in the drop-down menu list of options in the Media Library when you go to embed an image. To make that happen you have to add some more code to your functions.php file that looks like this (again, it’s a good idea to back up your working functions.php file before making the changes):

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'homepage-thumb' => __( 'Homepage Thumb' ),
'search-thumb' => __( 'Search Thumb' ),
) );
}

The lines you change are the last lines of text. That’s where you specify the names of the new sizes you’ve used. On the left side of the line is the name you specified in the add_image_size code above. To the right is the name as it will appear in the drop-down menu. You can add more than one size by just adding an extra line, as I’ve done here to add both homepage-thumb and search-thumb sizes. Once you’ve done that and saved your functions.php file, these new sizes should appear as options in your Media Library when you go to embed an image. Here’s an example where I added a bunch of sizes when writing the Guide to WordPress Image Crop Types page.

If you’re looking to set the size of the Featured Image (which used to be called the Post Thumbnail), there’s a dedicated function for that. It works in a similar way, and you can find more about it here.

Resizing Existing Thumbnails

So you’ve made all the changes, but your thumbnails are still showing up in their old sizes. That’s because resizing happens as part of the image upload process. So the new sizes will apply to all new images you upload. But chances are you’ve got hundreds, perhaps thousands, of thumbnails you want to resize to your new dimensions. That’s where the Regenerate Thumbnails plugin comes in.

This plugin forces WordPress to recreate the thumbnails based on the current settings. It’s simple to use, and there are a few different options for getting it to do its thing. First, you just install it like any other plugin. Then you’ll get a new menu item in your WordPress admin dashboard under Tools > Regen Thumbnails.

Read the warnings that come up at the top of the page, and once you’re happy with it, proceed by hitting the Regenerate All Thumbnails button. That’ll regenerate all the images on your WordPress site. Depending on how many images you’re working with, it might take a while, but the plugin indicates its progress. It’s important to note that this is only applying to your resized images. It’s not touching your original images. There are ways to resize your original images (such as the Resize Image After Upload plugin), but the Regenerate Thumbnails plugin isn’t it (see below in the Related section).

While there’s no way to specify which thumbnail sizes to regenerate, you can specify which images to regenerate thumbnails for. You do that through the Media Library. If you’re not in the list mode, switch to that (the two icons at top right, one for thumbnail grid and the other for list view), and then you can select multiple images using their checkboxes. You can then use the Actions drop-down to regenerate thumbnails for the selected images. You can also do it on an image-by-image basis.

If you later decide to tweak the sizes again, you’ll need to go back and regenerate the thumbnails again. And once you’ve regenerated the thumbnails, there’s no need to keep the plugin active. If you want to deactivate or uninstall it, you can. Your newly regenerated thumbnails will continue displaying just fine.

Occasionally I’ll come across instances where the new sizes are not being regenerated properly for whatever reason. If you find that happening, you can try a less gentle plugin that does basically the same thing: Force Regenerate Thumbnails. Read the plugin’s warnings, though, because using it can cause some old images to be deleted.

There’s a Plugin for That

Most of these plugins are going to make changes to the thumbnails your site is already using. Please be sure to use them cautiously, read the developers’ warnings, and make a full site backup first.

The Regenerate Thumbnails plugin has been around for a long time and is generally very reliable. The Force Regenerate Thumbnails plugin does basically the same thing and is worth a look if the standard Regenerate Thumbnails isn’t working for you. And if neither of those work for you, take a look at AJAX Thumbnail Rebuild for another approach to rebuilding the thumbnails. It’s slow, but if the other plugins are stalling on your server, it might be worth a try.

There are also a couple of plugins that aim to be one-stop solutions to this process. The Simple Image Sizes plugin takes some of the legwork out the process by generating the functions.php code for you to copy and paste as well as built-in in thumbnail regeneration. Another one-stop solution is the Image Regenerate & Select Crop plugin. It’s new and hasn’t got much of a user base yet (and I haven’t tried it), but its feature set looks promising.

RELATED: If you’re looking to resize original images–not the resized versions that WordPress automatically generates–here’s information on plugins that will do that. And if you’re using a lot of thumbnails and images in WordPress, optimizing them with something like the EWWW Image Optimizer Cloud or one of the other image optimizer plugins for WordPress can help speed up page load times for your site.

View Comments

  • Hi

    Tried to use these entries to. my child theme functions.php but neither seem to work. I am using storefront on Woocommerce which seems to override everything. Is there a way to get control back?!

    Geoff

    • Sorry, but I don't use WooCommerce and am not aware of how to override it. It's been a while since I used Woo products, but I used to find their support system to be quite good. Hopefully someone there might be able to give you a good answer.

  • I used Force Regenerate and it seems to have worked fine but the resized images are not showing in my media library and when I run any speed tests such as GTmetrix, it says that my images need to be optimized. Since they don't show in the library, no media optimization will work.

  • Thank you SO MUCH for posting this. This was so well explained it made it easy for me to customize a new site I'm working on. I had never delved into any of this before and so it was definitely intimidating. I was able to add a custom resize for headline images that worked perfectly.

    I wish I had known this for so long. I created a whole system for uploading my own thumbs - what a waste. This new site will be so much easier to use.

    Thanks again!
    Fred

  • Hi David and thanks for this article.

    I'm not sure whether I need to use a thumbnail image size changer or not, and wonder if you could give me some advice.

    I have recently switched my WP blog to the Twenty Fourteen theme (ie: using child theme), and keep getting priority notifications in analysis programs like GTMetrix to serve scaled images, specifically the thumbnails that appear in the featured grid display. Prior to upload, I do resize my featured images to Twenty Fourteen's recommended 1038px wide X 576px, but the corresponding thumbnail image that is automatically created is 672x372, whereas the size used in the grid display is 281x155.

    If I changed the thumbnail dimensions within Media Settings to 281x155 rather than its current default of 150x150, would that mean I'd be serving scaled images in the grid display, thus optimising the grid images?

    If not, could I upload two resized feature images, one of 1038X 576, and the same one resized to 281x155, and have the grid display "choose" the 281x155 thumbnail to display? If so, how would I do this, please?

    Finally, do you think it advisable as a general rule to change image dimensions within Media Settings whenever switching themes, to match the default image dimensions of the new theme?

    • I'm afraid I'm not all that familiar with the Twenty Fourteen theme and am not sure if there's a way to specify which derivative version it pulls into the grid, but it might be worth trying an added size so you don't mess up the existing resized images. The code for that is in the "Multiple" section above. It'll also mean you won't have to do the resizing before you upload--the server will take care of that as part of the upload process. The possible catch is that child theme might be hard coded to pull in a specific thumbnail version, which might require some tinkering in the code to change.

      As for your last question, I don't know if there's a "right" answer, but I tend to leave the default 3 sizes as they are and add my extra theme-specific ones in the add_image_size bit. The downside is that you end up with a lot more versions that do take up space on your server. But I also don't switch themes midway that often, so it doesn't come up all that often for me.

  • I have a client who would like square thumbnails from rectangular images. She does not want the image cropped, but wants the whole image to appear in the thumbnail. She realizes the image will be distorted - one dimension will be stretched to fit into the square. Is there a way to get this type of thumbnail in WordPress?

    • I don't know of any way to stretch them like that within Wordpress's thumbnail resizing, since that's usually something people want to avoid. But you can stretch them using CSS by specifying both a width and a height setting for whatever class is used in your theme for your thumbnails. If you just specify one or the other, it displays proportionally. But you can force it by specifying both. Doing it through CSS would be far easier and less messy than trying to hack the resizing function.

Share