How to Change Thumbnail Size in WordPress and Why You Want To

Last Updated on September 12, 2022 by 18 Comments

How to Change Thumbnail Size in WordPress and Why You Want To
Blog / Tips & Tricks / How to Change Thumbnail Size in WordPress and Why You Want To
Play Button

When you set up a new WordPress website, the platform gives you three image sizes to play with: thumbnail, medium, and large (plus the fileโ€™s original resolution). This gives you a solid number of options to work with. However, thumbnails in particular can be tricky to use, since you need to make sure they look good across all themes and devices.

Fortunately, changing your imagesโ€™ thumbnail size in WordPress only takes a minute or two. While youโ€™re at it, you can also add new default image sizes to your website, for even more choices. In this article, weโ€™ll teach you how to do both, so letโ€™s get to work!

Subscribe To Our Youtube Channel

How to Change Your Thumbnail Size in WordPress

Changing thumbnail sizes in WordPress is remarkably easy. Here are the steps youโ€™ll need to follow, which weโ€™ll dig more into shortly:

  1. Go to your WordPress dashboard.
  2. Navigate to the Settings > Media tab.
  3. Look for the Image sizes > Thumbnail size section.
  4. Change the default width and height of your thumbnails in pixels.

Thatโ€™s pretty much it. Letโ€™s take a closer look at the Image Sizes > Thumbnail section, however:

The Image Sizes > Thumbnail section.

As you can see, the default thumbnail sizes make for a proportional, square image. At 150ร—150 pixels, hereโ€™s what you should be looking at:

An example of the default thumbnail size.

This image employs whatโ€™s called a โ€˜hard cropโ€™, since we enabled the setting Crop thumbnail to exact dimensions. What this means is that WordPress will take the thumbnail size you set, โ€˜fillโ€™ the area with the image you use, and leave the rest of the image off. A โ€˜soft cropโ€™, on the other hand, is a resize that shrinks your images while retaining their proportions.

For now, go ahead and choose your new default thumbnail size. Then, remember to save the changes to your settings.

Once you set a new default thumbnail size, WordPress will use it for all images you upload from that moment on. However, what if you already have a sizable media library that uses other thumbnail sizes?

Instead of re-uploading those images, you can simply โ€˜resizeโ€™ them. The best tool for that job is the AJAX Thumbnail Rebuild plugin:

The AJAX Thumbnail Rebuild plugin.

What this plugin does is take all your existing thumbnails and resize them, one by one. It also works on the other image sizes WordPress uses, such as Medium, Large, and so on. That means you can use it even if you change any of those default dimensions (which weโ€™ll show you how to do later).

To get started, install and activate the plugin. Once you do, jump to the Settings > Rebuild Thumbnail tab and choose the images you want to resize, and then click on the Rebuild All Thumbnails button:

WordPress thumbnail settings.

The process might take a while, depending on how many images your media library contains. So be patient, and donโ€™t close the tab until you see the Done message appear.

Why You Might Need to Change Your WordPress Thumbnail Size

At this point weโ€™ve already covered the how when it comes to changing your thumbnail size, but we havenโ€™t discussed the why yet. WordPressโ€™ default thumbnail size of 150ร—150 pixels can work well for some users, but no single image resolution is appropriate for all types of designs.

You might want larger thumbnails that show off more detail, for example. This is particularly relevant if youโ€™re running an e-commerce store. Or you may want to use a more rectangular shape, especially when it comes to featured images for a blog or news site.

If youโ€™re redesigning your website or trying out a new theme, itโ€™s also a good idea to spend some time experimenting with image sizes, so you can see what works best with the new style. Plus, the process is so simple that it should barely take you a few minutes, and it doesnโ€™t affect your existing media library unless you install the extra plugin we introduced above.

What If You Want to Add Custom Image Sizes to WordPress?

Whenever you upload an image to WordPress, the platform works some magic in the background to resize that image into multiple dimensions you can use. As we mentioned earlier, this includes thumbnails, medium, and large images. Having multiple sizes of the same image can make your life easier, by enabling you to pick the option that best fits your needs.

You can change these default image sizes by using the same process we described above. However, you can also add new default sizes to your site. This can be a very useful option to have. You can set up specific sizes for all different types of images across your site, and avoid having to resize each new image manually.

To add new default image sizes to WordPress, youโ€™ll need to edit your themeโ€™s functions.php file. That means youโ€™ll want to connect to your site using a File Transfer Protocol (FTP) client such as FileZilla, and then navigate to your siteโ€™s root folder.

Once youโ€™re there, open up the wp-content/themes directory and look for the folder that shares your themeโ€™s name:

The wp-content/themes directory.

You should find the functions.php file inside this folder. Once you do, right-click on it and hit the View/Edit option. This will open the file using your local text editor, so you can make changes to it:

The functions.php file.

Be very careful when making any changes to your themeโ€™s functions.php file, and donโ€™t change any of its existing content. Instead, youโ€™ll want to add a new snippet of code at the bottom:

// This enables the function that lets you set new image sizes
add_theme_support( 'post-thumbnails' );
// These are the new image sizes we cooked up
add_image_size( 'post-image', 660 );
// Now we register the size so it appears as an option within the editor
add_filter( 'image_size_names_choose', 'my_custom_image_sizes' );
function my_custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'post-image' => __( 'Post Images' ),
    ) );
}

The comments within this code explain how it works quite well. First, it tells WordPress that you want to add new image sizes to your theme. Then it creates a new default option, and registers it so that it shows up within the editor the next time you open it.

Letโ€™s take a closer look at the new default we registered:

add_image_size( 'post-image', 660 );

When you add new custom image sizes, you can set both a width and height. In our example, we just set the width, which is always the first value. This means that WordPress will resize images to the width we want, and a proportional height.

If you want to add a specific height as well, your line would look like this instead:

add_image_size( 'post-image', 660, 480 );

Feel free to add any custom sizes you want, using a new line for each. Then save the changes to your functions.php file, and the new options should show up in your WordPress editor.

Conclusion

One of the best parts about using WordPress is its customizability. Thereโ€™s no aspect of the platform โ€“ big or small โ€“ that you canโ€™t change. That also applies to WordPressโ€™ thumbnail size, and the various other default image options.

If you want to change the default WordPress thumbnail size, you can do so in four quick steps:

  1. Go to your WordPress dashboard.
  2. Navigate to the Settings > Media tab.
  3. Look for the Image sizes > Thumbnail size section.
  4. Change the default width and height of your thumbnails in pixels.

Do you have any questions about WordPress image sizes? Letโ€™s talk about them in the comments section below!

Article thumbnail image by ConceptVectorDesign / shutterstock.com

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Updated on March 10, 2023 in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post
How to Use Font Awesome On Your WordPress Website

How to Use Font Awesome On Your WordPress Website

Updated on September 16, 2022 in Tips & Tricks

When given the choice between using a vector icon or a static image, it’s a good idea to go with the vector. They’re small and fast to load, and they can scale to any size without a loss of resolution. Font Awesome is a superb library of vector icons that you can use on your websites,...

View Full Post
15 Best Fancy Fonts for Your Next Special Occasion

15 Best Fancy Fonts for Your Next Special Occasion

Updated on January 7, 2023 in Tips & Tricks

Whether you’re designing a wedding website or putting together an announcement for an annual business dinner, finding the right font for your special occasion can be difficult. Many fonts sacrifice readability for extra flourishes, while others just don’t stand out. To help you in your...

View Full Post

18 Comments

  1. Thanks, John,

    I’m getting an error on the 7th line as follows:

    unexpected ‘-‘, expecting ‘(‘ in your code on line 7
    function my-custom-image-sizes( $sizes ) {

    • Thanks for bringing this one to our attention, Patti! PHP doesn’t like hyphens for function names, preferring underscores. As such, lines 6 and 7 should read:

      add_filter( ‘image_size_names_choose’, ‘my_custom_image_sizes’ );
      function my_custom_image_sizes( $sizes ) {

      • You are welcome, John.

      • Thanks, Brian

    • Hey Patti,

      Your getting that error because function names in PHP can’t have dashes. change the dashes to underscores and you should be good.

      • Thanks Brian ๐Ÿ™‚

  2. Hi,

    after adding the code snippen to the functions.php of Divi my website gets offline with the error message HTTP ERROR 500….

    Best regards Iยดm using Divi an

  3. Hi John,
    Thank you so much for this post,you are the best

    • You’re welcome

  4. Hi John,

    I’m fairly new to WP, only using Divi thus far. A few questions: What thumbnail size as a standard would you recommend? I know you said it depends on pixel size and the resolution or is 150×150 ok?

    Besides using Php file is it possible to only crop an image in the row CSS vs the entire site? Can I use the same code you provided for the Php file? It takes too much time to go into Photoshop and resize every image the same size vs cropping in Divi. I wish they had this option like in Wix.

    I apologize if these are stupid questions, as I’m a newbie to this!

    Thank You!

    • Melissa Irfanview is a good lightweight image editing tool. It only does the basics but cropping and resizing are included.

    • Hello Melissa,

      There are no stupid questions ever when it comes to WordPress. ๐Ÿ™‚ Welcome aboard!

      As for your questions, 150x is a good start, although it really does differ depending on your theme and other factors. Look at what your theme defaults to, and do that basically.

      As for your other question, to put it simple, you can’t use PHP where CSS would be used. However, you don’t use this for cropping an image โ€“ our example was for something slightly different.

      WordPress includes a cropping tool, although your Photoshop method is good too. Check out the specific WordPress options and see if they make your process any quicker.

  5. Hi John,

    Thank you so much for sharing this detailed & informative article on How to Change Thumbnail Size in WordPress. This is the most common issue faced by every newbie WordPress user but experts like you helps a lot in solving these issues.

    Keep up the good work & keep sharing…

    Cheers,
    Abhay

    • Thank you for your kind words, Abhay!

  6. Hi John Hughes,
    This post is great and I think will help people as they open their mind to what can WP really do? My team has built augmented reality experiences, games, and other applications all while using WordPress as our backend API/DB handler.

    If the application needs a website, the solution is simpleโ€ฆ WordPress! But if we are just needing to manage the data, then running headless is great.

    Additionally, you can build it as a stateless cloud platform as well.

    Thank you for regards.

  7. Howdy John,

    thanks for the insight, useful article. However, it only touches on a subject I’ve been wondering about for some time.

    I use Imagify to reduce image sizes. But, using the option to resize larger images on upload, I see the notification that “The new width should not be less than your largest thumbnail width, which is actually 2880px.” This is a specific for Divi setting, since I can see a thumbnail named ‘et-pb-post-main-image-fullwidth-large’ which is exactly this 2880 wide. But an image with this width, is still pretty big; I’d rather have a max image width of 1920px.

    So my question: is there a way to reduce that specific thumbnail size for Divi? For most of my clients, it’s way more than they need.

    I’m anxious to hear if there is a solution for this.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Get Started With Divi