When you launch your first WordPress website, The platform offers three sizes of images to play around with. Small thumbnail, medium, and significant (plus the size and resolution at the time of creation). This provides you with a good range of options. But thumbnails are challenging to work with because you must ensure they are aesthetically pleasing across all devices and themes.
The good news is that changing your image’s thumbnail sizes within WordPress takes just a few minutes. While there, you can also apply new image sizes for default on your site for more options. This article will show the two methods, so let’s get started!
Table Of Contents
- 1 How to Change Your Thumbnail Size in WordPress
- 2 Why You Might Need to Change Your WordPress Thumbnail Size
- 3 What If You Want to Add Custom Image Sizes to WordPress?
- 4 Conclusion
How to Change Your Thumbnail Size in WordPress
Modifying the thumbnail size and changing the size of thumbnails in WordPress is quite simple. These are the steps to follow, and we’ll discuss them in a moment:
- Visit Your WordPress dashboard.
- Go to settings > media tab.
- Check for image sizes in the Thumbnail Size section.
- Modify the default size and width of your thumbnails. It’s in pixels.
That’s about it. Let’s take a look at the Thumbnail Sizes > Image Sizes section.
src=”https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/media-settings.png”/>
As you can see, the standard thumbnail sizes result in a proportional and square image. With 150×150 pixels, this is what you’re considering:
The image alt=”An illustration of the thumbnail that is default size.” src=”https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/thumbnail-default-size.png”/>
This image uses what’s known as a ‘hard crop’ since we activated the setting to Crop thumbnails to precisely the dimensions. This means that WordPress will use the size of your thumbnail you specify and fill the space with the image that you have chosen and then leave the remainder of the image blank. Soft cropping, however, is a resize which reduces your photos but keeps their proportions.
Now, you can select the new thumbnail size as your default. Make sure to save your changes to your settings.
If you choose a new thumbnail size as the default, WordPress will use it for all the images you upload from this point from that point. But what happens if you already have a substantial media library that utilizes different thumbnail sizes?
Instead of having to re-upload those images, you could alter their size. The most effective tool for this task can be an AJAX Thumbnail Rebuild plugin:
img alt=”The AJAX Thumbnail Rebuild plugin.” src=”https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/ajax-thumbnail-rebuild.png”/>
The plugin will take your thumbnails and alter their sizes one at a time. It also works on other measures that WordPress employs, such as medium, Large, and the like. It’s possible to utilize it even if we modify any default dimensions (which we’ll explain how to do in the future).
To begin, install and then activate the plugin. Once you have done that, go onto the Settings > Rebuild Thumbnail tab and select the images you wish to shrink, then click the Rebuild All Thumbnails button:
Image alt=”WordPress thumbnail setting.” src=”https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/rebuild-thumbnails.png”/>
The process can take some time, based on the number of images in your media library. Therefore, be patient and keep the tab open until your completed notification appears.
Why You Might Need to Change Your WordPress Thumbnail Size
In this article, we’ve discussed the steps regarding changing the size of your thumbnail. However, we still need to go over the reasons. WordPress with average thumbnail dimensions of 150×150 may suit specific users, but not every image resolution is ideal for all designs.
It is possible to have larger thumbnails that display more details, for instance. This is especially relevant when you’re operating an online store. Choose the more rectangular format, particularly for pictures featured for blogs or a news website.
Suppose you’re re-designing your website or trying an entirely new design. In that case, it’s recommended to play around with different sizes of images to determine which ones work best in the new design. Additionally, the process is so easy that it will take only a few minutes, and it will only impact the existing library of media if you install the additional plugin we discussed earlier.
What If You Want to Add Custom Image Sizes to WordPress?
When you upload a photo to WordPress, an algorithm works behind the scenes to transform the image into multiple dimensions you can choose. As we stated previously, this applies to thumbnails, medium and large-sized photos. Multiple-size versions of an image may simplify your life by allowing you to select the one most suitable for your requirements.
You can alter these size defaults by following the method discussed in the previous paragraph. But you are also able to include new sizes on your website. This is a beneficial feature to consider. You can create specific measures for your site’s different kinds of images and avoid adjusting each image manually.
To add new default sizes for images to WordPress, you’ll have to edit the themes functions.php file. You’ll need to connect your site using a File Transfer Protocol (FTP) client like FileZilla or FileZilla, then navigate to the site’s root folder.
After that, you can open the theme folder in the wp-content/themes directory and search for the folder with the name of your theme:
src=”https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/divi-folder.png”/>
You’ll find functions.php in this folder. functions.php file inside the folder. When you have it, right-click it and select the View/Edit option. The file will be opened with your local text editor and allow you to modify it:
src=”https://www.elegantthemes.com/blog/wp-content/uploads/2019/05/functions-file.png”/>
Be cautious when modifying your website’s functions.php file, and don’t alter the existing content. Instead, you’ll need to include a new line of code at the bottom of the page:
// It allows the function to create new image sizes
add_theme_support( ‘post-thumbnails’ );
/These are the brand new sizes of images we came up with
add_image_size( ‘post-image’, 660 );
/We now register the size to appear as an option in 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 in this code provide a detailed explanation of how it functions effectively. The first step is to inform WordPress that you’d like to add a new image size for your themes. It then creates a new default option and registers it to ensure it appears in the editor when you visit it.
Leave a Reply