Complete Guide To WordPress Image Sizes: How To Add Custom Sizes Properly And More
Dealing with WordPress image sizes can sometimes be a challenge. If you do not pay enough attention, it comes at the expense of both the aesthetics and load time – two factors that have a big impact on the user experience.
In this post, we will explain what WordPress image sizes are, how you can add and edit custom sizes properly, and why it’s important to optimize them.
What are WordPress image sizes?
WordPress image sizes are additional images that are generated whenever you upload a new image to your media library. By default, WordPress creates 3 additional image sizes that are stored in your /wp-content/uploads/ folder next to the original uploaded image. This means that after you upload an image, you actually will have 4 image versions. The first three default sizes are the thumbnail, medium, and large image size, while the original image you uploaded is the full-size option.
WordPress automatically generates these sizes once you upload a new image to your Media Library so that your website can serve the appropriate version of the image according to the screen size of the device used by the visitor. Ideally, your website should always serve properly sized images, not bigger nor smaller than the dimensions rendered on the screen.
How can I edit the default image sizes?
The image sizes created by WordPress are not unchangeable. If the default settings do not work for you, you can easily adjust the dimensions. To do this, you need to do the following:
- Navigate to your WordPress admin dashboard
- Go to Settings > Media
- Adjust the width and height dimensions to the desired values
- Click Save Changes to confirm the changes you have made
Manually adding custom image sizes
The easiest and fastest method to add custom image sizes is by using a plugin. Although the manual procedure is not exactly complicated to follow, you should create a backup of your website that you can easily restore in case something goes wrong.
Once the backup is complete, you will need to:
- Navigate to your WordPress admin dashboard;
- Go to the Appearance menu and then select Editor (also called Theme File Editor in some cases);
- Locate the functions.php file and paste the code below if it does not already exist. If the code below is already there, you don’t need to do anything else here.
add_theme_support( 'post-thumbnails' );
- Click on the Update File button at the bottom to enable the function that allows you to create custom image sizes.
- Next, paste the code below for the custom image size you want.
add_image_size( 'my-custom-image-size', 800, 640 );- Adjust the text between the quotes with the name of your new custom image size. We recommend keeping the name simple and descriptive (e.g. “featured-post-image”).
- After you set the name, you need to specify the image sizes. The first numerical value is the image width, while the second is the image height. In our example below, the image size created would have 800px width and 640px height.
- Finally, click Update File and you should be done!
Here is a screenshot showing our example code added in the functions.php file:
That’s all you really need to do to create your own additional image sizes in your WordPress theme.
Adding custom image sizes with a plugin
You can add custom image sizes for free with reGenerate Thumbnails Advanced, which also gives you the option to regenerate the thumbnails. We will explain later how regeneration works and why it is important.
After installation, navigate to Tools > Regenerate Thumbnails, click Add New Size and easily add your own additional image sizes by entering in the name, maximum height/width, and selecting the option to crop the image size or not. After that, the settings will be saved automatically.
Manually adding custom image sizes
Although the procedure is easy to follow, you should create a backup of your website that you can easily restore in case something goes wrong. Once the backup is complete, you will need to:
- Navigate to your WordPress admin dashboard;
- Go to the Appearance menu and then select Editor (also called Theme File Editor in some cases);
- Locate the functions.php file and paste the code below if it does not already exist. If the code below is already there, you don’t need to do anything else here.
add_theme_support( 'post-thumbnails' );- Click on the Update File button at the bottom to enable the function that allows you to create custom image sizes.
- Next, paste the code below for the custom image size you want.
add_image_size( 'my-custom-image-size', 800, 640 );- Adjust the text between the quotes with the name of your new custom image size. We recommend keeping the name simple and descriptive (e.g. “featured-post-image”).
- After you set the name, you need to specify the image sizes. The first numerical value is the image width, while the second is the image height. In our example below, the image size created would have 800px width and 640px height.
- Finally, click Update File and you should be done!
Here is a screenshot showing our example code added in the functions.php file:
That’s all you really need to do to create your own additional image sizes in your WordPress theme.
Why is it important to compress all image sizes?
The image sizes created by WordPress will be used in most cases on your website instead of your original images. It’s really important to compress and optimize them to improve the performance of your website.
You can do that by using ShortPixel Image Optimizer, a lightweight plugin that can compress and optimize all your original images as well as the adjacent image sizes.
The new images you upload will be automatically compressed and optimized, so you can install the plugin and forget about it while the magic happens in the background. If there are certain image sizes that are not used on your website, a feature is available to exclude them from optimization.
Can you see the difference between the above images? Neither do we, but the image has been compressed by up to 87%. Reducing file size to improve page load speed is a simple reason why you should compress and optimize all your images.
Easiest method to properly size images on WordPress
Your website should never serve images that are larger than what is displayed on the screen. This is a waste of bandwidth that slows down your page load speed.
Manually creating different image sizes is time-consuming and tedious, especially if you want to fit a plethora of devices, all with different screen sizes. Imagine a case scenario where it takes 5 minutes to manually add a new image size, and you have to add 10 different sizes. That means you can save 50 minutes by using a plugin. Moreover, you have to repeat the process over and over again if you change your theme, or make adjustments that would affect the way your images are displayed.
Finally, due to a variety of devices with different screen sizes, it is virtually impossible to serve the exact proper image sizes. If you have been wondering if there’s an easy way to achieve this, we have good news! In this article, we will explain how you can easily do it.
Summary
Dealing with WordPress image sizes should not be a big deal now that you know how to handle them inside and out.
You can create your own custom image sizes and manage them either with a plugin or through your theme’s code. Also, do not forget to optimize all image sizes and properly size your images for optimal performance.
