How to Add Custom Image Sizes to WordPress

  • By Darrel Wilson
  • Last Updated: November 2, 2019
How to Add Custom Image Sizes to WordPress

Have you ever wanted to add a custom image size to your WordPress website? Perhaps, you have a photography or a design website and the default image sizes in WordPress or your theme don’t do your work justice. Or maybe you want your products to display in a large size so customers can get a good look. 

The good news is, you can easily add custom image sizes to your WordPress website and in this post, I’ll show you how. I’ll also explain why you’d want to add custom image sizes and how WordPress handles image sizes by default.

How WordPress Handles Image Sizes

As mentioned earlier, WordPress does a lot of background work to create different image sizes.

By default, each time you upload an image, WordPress will create these additional image sizes:

  • Thumbnail image sized at 150x150px
  • Medium image sized at 300x300px
  • Large image sized at 1024x1024px

If your theme already specifies custom image sizes, those will be generated as well. Keep in mind that your original image will also be preserved at its full size. 

The reason why WordPress creates those additional image sizes is simple: it wants to make sure that no matter what type of device or screen size your visitors are using, your images display in the best possible way. 

On top of that, your site will load faster if the visitor’s device has to download a thumbnail that’s 150px wide than a large image that 900px wide. This is due to the fact that smaller image sizes will also result in a smaller file size. 

In an ideal situation, you’d want to use a program like Photoshop to resize the images to the correct dimensions that are specified by your theme. However, this process can be time-consuming so by creating additional image sizes, WordPress does a lot of the heavy lifting for you.

Why You’d Want to Add Custom Image Sizes

The main reason why you would want to add custom image sizes to WordPress is if to save time on editing images outside of WordPress. With a custom image size, you can upload image without worrying about resizing it beforehand and WordPress will handle the rest.

Another reason why adding custom image sizes is beneficial is that it can help improve your website performance. Instead of loading a large image that still has original dimensions, each post or page will use the custom image size you specified. This means your pages and posts will load faster which not only improves your site performance but it can also improve your search engine rank. 

Finally, while a lot of themes specify custom image sizes for posts or pages, there are times where you might need a larger image size for specific situations. 

For example, you might want to display your portfolio projects as an image with its own dimensions. 

Or you need a custom image size for your products. Whatever the case might be, you’re not stuck with the default image sizes that come with WordPress or those specified by your theme. 

How to Add Custom Image Sizes Manually

Now that we’ve covered why you’d want a custom image size and you know how WordPress handles image sizes, let’s take a look at how you can add custom image sizes to WordPress. I’ll explain the manual method first and then we’ll take a look at a couple of plugins that help you do the same thing without the need for manual coding. 

Step 1: Add Support for Post Thumbnails

To start adding a custom image size, the first thing you need to do is open up your functions.php file. Then, make sure to add the support for post thumbnails with this line of code:

add_theme_support( 'post-thumbnails' );

Step 2: Add Custom Image Size

Once post thumbnails have been enabled, you can make use of the add_image_size function to register additional image sizes. Simply add the following to the functions.php:

add_image_size( 'custom-portfolio-vertical', 800, 1200, true );

The code above will add a custom image size for your portfolio called custom-portfolio-vertical that is sized to 800x1200px. The true parameter tells WordPress to crop the uploaded image to the exact dimensions you specified. 

Step 3: Place the Image Size Where You Want It to Display

Next, you need to display your custom image sizes on your WordPress website. You will need to add the following line of code to the theme file where you want the images to appear, usually inside the post loop:

<?php the_post_thumbnail( 'custom-portfolio-vertical' ); ?>

Remember to replace the image size name used in this tutorial to your own image size name. 

Step 4: Regenerate Thumbnails

The last piece of the puzzle is to regenerate the existing images so that they display at the same size. You can use a plugin like Regenerate Thumbnails Advanced to regenerate previously uploaded images to the new sizes. This plugin will also allow you to clean up image sizes that you’re no longer using which helps free up disk space on your hosting server. 

You can skip this step if you’re adding custom image sizes to a brand new website. 

How to Add Custom Images Sizes to WordPress With a Plugin

Adding custom image sizes to your WordPress website manually gives you a lot of control over the final result. However, if you don’t want to get your hands dirty with code, there are a couple of plugins that can help you achieve the same result. 

Image Regenerate & Select Crop

Image Regenerate & Select Crop is a free plugin that will allow you to create custom image sizes for your WordPress website. The plugin has over 7000 active installs and a solid 4-star rating. 

Thanks to this plugin, you can easily remove the default image sizes that WordPress generates each time you upload a new image to your site. You can also delete those image sizes for all the images that you’ve already uploaded to your site. This allows you to save disk space and speed up your site as well. 

On top of that, you can also apply these settings globally as well as for images attached to posts or other custom post types.

This plugin can be downloaded from the official repository.

Image Sizes Manager

Another plugin that can help you create custom image sizes for your WordPress website is Image Sizes Manager. This is a premium plugin that you can get from CodeCanyon. 

The plugin has a 4,5-star rating and you can easily add, edit, delete and regenerate all image sizes. On top of that, the plugin integrates with the native WordPress interface and comes with a shortcode that helps you insert your new custom image sizes into your posts and pages. 

The plugin costs $13 and comes with 6 months of support and future updates. For an extra $3, you can extend the support to 12 months. 

Final Thoughts

Adding custom images sizes to your WordPress website saves you a lot of time and ensures that your images are always displaying in the best possible way. It can also help you improve site performance which in turn leads to better rank in the search engines. 

Whether you want to do it manually or use a plugin, this tutorial will help you add custom image sizes to your WordPress website.

Like This Article?

I have tons of great free content and giveaways! Join 10,000+ others and get access to coupons, freebies, and other great wordpress tips and tricksfor your wordpress website!

One thought on “How to Add Custom Image Sizes to WordPress

  1. Thanks for this tutorial. The manual method is missing a bit more detailed information, though in my view. For example, in step 2, do I need to add to code as many times as I want to register additional image sizes, i.e.
    add_image_size( ‘custom-portfolio-vertical’, 800, 1200, true );
    add_image_size( ‘custom-portfolio-vertical’, 600, 1000, true );
    add_image_size( ‘custom-portfolio-vertical’, 400, 600, true );
    …or can you add the different sizes like this:
    add_image_size( ‘custom-portfolio-vertical’, 800, 1200, true, 600, 1000, true, 400, 600, true );

    Step 3, where exactly would you have to place the code when you are saying: “You will need to add the following line of code to the theme file where you want the images to appear, usually inside the post loop” This is not specific enough to understand. Perhaps a video tutorial would make this much easier.

    The final thought I have is how this goes along with Divi, where they have said they would be implementing SRCSET just like WordPress has had this as a native feature for some years, so if and when this is implemented in Divi, would this method or even any plugin be obsolete?

Leave a Reply

Hi, Sign Up For Freebies And Wordpress News!

Hi, Sign Up For Freebies And Wordpress News!

Join My Mailing List For Tips, News, And Discounts!

You have Successfully Subscribed!