WordPress themes usually have defined various custom image dimensions for thumbnails and featured images. That means when you upload an image, WordPress will automatically generate several thumbnails from the original image that are required by your WordPress theme. These generated thumbnails can be used in WordPress as featured images and thumbnails across various locations on your website (e.g. archives, widgets, sliders, etc…).
In this WordPress tutorial we'll cover what you can do to ensure that you have consistent thumbnails on your site. We'll also have a look at how you can change predefined image dimensions in WordPress and add custom image sizes. In short, you'll learn what you need to display images nicely on your WordPress website.
- Why is having consistent images important?
- Advantages of automatically generated thumbnails in WordPress
- Plugins to regenerate thumbnails after a theme change
- What if regenerating thumbnails does not help?
- Predefined image dimensions of WordPress themes
- How to change predefined image dimensions of your WordPress theme
- How to make changes to image dimensions take effect
Why is having consistent images important?
Having inconsistent images on your website may not only look ugly and unprofessional, but can also lead to various issues. For example if you are using a slider with inconsistent images, the slider may move up and down when sliding through the content. This is because the slider may need to resize for each slide based on the different image sizes. You can avoid these kind of issues by uploading images that meet the minimum requirements of your WordPress theme. By doing that you usually won't have any problems with inconsistent images, shifting sliders or else.
Advantages of automatically generated thumbnails in WordPress
The advantages of automatically generated thumbnails in WordPress are obvious. Instead of uploading multiple different images for the particular elements on your website, you just need to upload one original image. All thumbnails will be generated automatically by WordPress. However, it's crucial that the original image which you upload has at least the size of the largest thumbnail that is used by your WordPress theme. Otherwise WordPress may not be able to generate all necessary thumbnails. This may lead to inconsistent image sizes on your website.
It's also important to understand that changing your WordPress theme will usually affect the images on your website as well. If your new WordPress theme has defined different image ratios and/or image dimensions for the thumbnails than your previous WordPress theme, it might happen that your images are not being displayed consistent in size on your website. To fix this issue you need to regenerate the thumbnails on your site.
Plugins to regenerate thumbnails after a theme change
As mentioned in the previous section, when you upload an image to your website, WordPress will generate thumbnails that are defined by your WordPress theme. After you've changed your WordPress theme, these previously generated thumbnails won't be regenerated automatically. To fix this, you can make use of plugins to start a thumbnail regeneration process in WordPress. You can find popular WordPress plugins to regenerate thumbnails in the next section.
Regenerate Thumbnails is a very handy WordPress plugin to regenerate the thumbnails for your image attachments. You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads. Use this plugin after you've changed your WordPress theme or changed any of your thumbnail dimensions. This will ensure that thumbnails on your site are displaying consistent in size.
Force Regenerate Thumbnails
Force Regenerate Thumbnails is a similar WordPress plugin to Regenerate Thumbnails. One of the main differences in comparison to the other plugin is that Force Regenerate Thumbnails allows you to delete all old images sizes and regenerate the thumbnails for your image attachments.
What if regenerating thumbnails does not help?
If you still have trouble with inconsistent images on your website after regenerating your thumbnails, please check if the uploaded images meet the minimum requirements of your WordPress theme. In case the uploaded images are too small, regenerating thumbnails usually won't help because that process won't enlarge your images.
For example, if you are using our popular MH Magazine WordPress theme and the large slider widget on the front page, the recommended minimum image size to upload is at least 1030 x 438px. If you upload images with at least that size, WordPress will be able to generate all thumbnails as expected (including the large thumbnail for the slider).
Predefined image dimensions of WordPress themes
In case you're familiar with coding and if you don't like the image dimensions that are defined by your WordPress theme, it is possible to modify these. You can set custom image sizes in WordPress based on your personal needs and requirements. The code that defines image dimensions in WordPress usually can be found in the file functions.php as:
add_image_size($name, $width, $height, $crop);
For example, in case of our popular MH Magazine WordPress theme you will notice that the image size of the large featured image for the MH Slider widget on the front page is defined as:
add_image_size('mh-magazine-slider', 1030, 438, true);
This means that images in the slider have a width of 1030px and height of 438px. The parameter “true” means that images will be cropped if necessary. Cropping in WordPress usually will occur if the image ratio of the originally uploaded image does not meet the necessary image ratio for the particular thumbnail, in this case for the slider.
How to change predefined image dimensions of your WordPress theme
You can modify these parameters as you like to specify your custom image sizes. In case you need further information about changing image sizes in WordPress, you can have a look at the WordPress Developer Resources. Fortunately, it's also possible to customize image sizes in WordPress if you're not familiar with coding. There are various WordPress plugins for this purpose available, for example: Simple Image Sizes.
The Simple Image Sizes plugin can be used to easily create custom image sizes for your site. Instead of messing around with code, you can override the image sizes that are defined by your WordPress theme directly on the media options page in your WordPress dashboard. This makes it easy for beginners to customize image sizes in WordPress.
How to make changes to image dimensions take effect
After you have modified the image dimensions in the file functions.php or by using a plugin, you'll notice that this usually won't change anything on your website. Don't worry, this doesn't mean that you've made a mistake. It's just because all generated thumbnails in the media folder on your server still are based on the previous settings. Your changes will only affect new images that you upload to your WordPress site.
To make your changes also affect older images that are already uploaded to your site, you'll now just need to regenerate your thumbnails again. After you've regenerated the thumbnails, the images on your website should match the new custom image sizes as specified earlier in the file functions.php or by using a plugin.
Conclusion: Having consistent image sizes on your website isn't hard
You've now learned how you can resize featured images in WordPress, why images on your website may be cropped or cut off and how to ensure uniform sized images. You've also learned how to regenerate thumbnails after you've changed your WordPress theme or after you've changed predefined image sizes. By following a few simple best practices and rules when uploading images, your images will always display nicely across your site. Please let us know if you have any questions. Feel free to share your thoughts in the comments below.