Media Library And Large Images

Introduction

WordPress creates several copies of each image you add to the Media Library, each of a different size. It is very likely that the defaults settings that control the size and number of images created do not align with the image sizes your site uses, thereby wasting space and server resources. Further, if you are using an image compression plugin to optimize your images, like ShortPixel, and are paying by the number of rendering images and not by the number of source images, then you are paying for images that you are not using,

While there are a number of articles available online about the Media library defaults, the information is scattered or not very complete. Also, there are almost no suggestions for users on how to change the media settings for optimal use so I suspect that many site builders just ignore them. In this post I look at the images WordPress creates by default so that you can understand what is going on. I then draw some conclusions and make some actionable suggestions, which I hope will be useful.

Video Version

What Images Are Created – A Typical Case

From my unscientific survey it appears that the most common size for a Featured Image is 1200x600px, so we will use that as our example. If you use a different size don’t worry, the conclusions still apply. I’m also assuming that you use other images of various sizes in your post content and we will also consider how those are handled.

Typical Featured Image Size
Typical Featured Image Size – 1200x600px

Sizes Created According the the Media Settings

By default WordPress has these settings under Admin / Settings / Media:

Default Media Settings

Note that under “Thumbnail size” there is an option to crop the thumbnail to the exact dimensions 150x150px, but under the “Medium size” and “Large size” there is not. The forced cropping is called a “hard crop” and by default WordPress makes the hard crop for the thumbnail like this: the image is first scaled down to 150px based on the smallest dimension and then the other dimension is cropped equally to the center. Here is our Featured Image rendered according to the defaults:

Typical Featured Image Size 150x150 1
Thumbnail that is hard cropped by default to 150x150px

As you can see, that is a worthless image. The other settings, for the Medium size and Large size, are called “soft crops” and they work like this: The longest dimension is scaled down to the max setting and the shorter dimension is scaled proportionally to maintain the aspect ratio. Here is the Medium size image:

Typical Featured Image Size
Medium sized image soft cropped by default to 300x150px

The medium image is a usable image, but we also have a large image being created that is 1024x512px. When we insert the Featured Image we want to use a 1200x600px as the Featured Image in our posts, so the Large image may also something to tweak.

WordPress gives us options when we insert an image from the media library of which size we want to use and we can usually select “Full Size” to get the one we want.

Image Size Options In The Post Editor
Option to select the original Full Size image

Extra Size Created for Responsive Images Feature

From this we might assume that even though we only see one copy of each image when we look into the Media Library, WordPress is actually storing 4 copies: Thumbail size, Medium size, Large size, and Full Size original. However, in WordPress 4.4 “Responsive Image Source Sets” were introduced. This uses a feature of most web browsers that adds a list of available image sizes to the image tag so that the browser can pick the best image copy, given the user’s screen size. Here is an example of the HTML markup from the Featured Image above:

Source Set Example

Note that the Thumbnail size isn’t included because it is square and so not the right aspect ratio to match the image in the post. Also note that there is a new size showing, the “Medium Large” image. This is a new size that is created behind the scenes by WordPress to include in the “srcset” tag. There is no way to use this image directly in your posts, but it is usable by web browsers when the post is being read. I’m not against this new image size being added if it provides a better viewing experience for readers. There is a nice explanation of this feature in Smashing Magazine.

Your Theme May Create Additional Images

Your theme can set additional image sizes to accommodate its features. For example, I switched to a popular magazine theme from the WordPress theme directory.

Magazine Theme

Magazine themes are notorious for creating multiple sized copies to align with the various views of the content they offer. I removed and re-uploaded the image and we can see that 9 copies of the original were created.

Magazine Theme Copies Created

WordPress 5.3 Handling Big Images

I imagine at this point you are suffering from information overload, I know I am, but there is one more source of image copies. In WordPress 5.3 a new behind the scenes feature was added for handling really big images. Sometimes people upload huge images, maybe from their digital camera or cell phone. These images are much larger than most sites want to actually show, so WordPress now handles these automatically and by default sets the max “Full Size” to 2560px. If an image is uploaded with a dimension greater than 2560px then the longest dimension is set to 2560px and the other dimension is scaled down proportionally. This introduces a new size for big images that has the original image name with a “-scaled” size attribute. For example, “DSC_0018-scaled.jpg.”

Further, if you happen to upload a big image WordPress will not only create the scaled image, but also some images for high definition screens that are twice the size of the medium and large images.

When you select a Full Size image in the WordPress editor you now get that scaled image and not your original image. This protects unsuspecting non-tech authors from accidentally adding huge images from their cameras into a post, but it also prevents people, say photographers, from including the original image if that was their intent.

So if we upload a big image, this is what we potentially end up with by default:

  • Thumbnail size – 150x150px
  • Medium size – longest dimension is 300px
  • Medium large size – an image with a dimension that is 768px
  • Large size – longest dimension is 1024px
  • Medium large size x2 – longest dimension is 1536px
  • Large size x2 – longest dimension is 2048px
  • Scaled image size – longest dimension is 2560px
  • Original image

That gives us at least 8 images, assuming your theme doesn’t add any.

Suggestions and Conclusions

I suspect that many (most?) site builders ignore the Media settings. When writing posts we are able to find an image that works and so haven’t bothered much with what’s happening behind the scenes. However, now that WordPress is creating so many additional copies it is worth taking the time to set some reasonable defaults. The sad news, if you search the Internet, there is virtually no guidance on what to use!

Suggested Featured Image Size

It seems that most general purpose themes, such as Astra, Generate Press, OceanWP, or the Page Builder Framework do not define or set a Featured Image size. It is up to you. So I’m going to go out on a limb and make some suggestions.

Of course, if your site is already going strong and you have a Featured Image size that has been used then you should stick with that. Also, if your theme has a recommended size or you have special needs, then use those settings. Otherwise, I’m going to recommend that you go with a Featured Image that is 1200x630px. Why? 1200x630px is very close to the typical Featured Image size, so it is not a big change, but more importantly, it works for Facebook Open Graph and and the large Twitter card sizes. Facebook now recommends 1200x630px and Twitter recommends a 2:1 aspect ratio. The size 1200x630px is not exactly a 2:1 ratio, but Twitter is forgiving enough to use it. So a 1200x630px image can be reused for social sharing without the need to upload additional sizes.

Media Settings

First, make sure the sizes in the Setting / Media page match what you are actually using. For example, going with my suggestion above,

  1. Large size: If your Featured Image is 1200x630px then set the Large size to 1200 width and 630 height. Make sure to upload your Featured Image that is the exact 1200x630px size. If you do, WordPress won’t create a Large size copy, since that size already exists. If your Featured Image is another size then set the dimensions for that size. You can still upload and use images larger than 630px in height to use as you need.
  2. Thumbnail size: Set your Thumbnail size to the size of your Featured Image when shown in the Post Blog archive. This will vary by theme and the archive format you’ve chosen. Say for example you are using a grid or masonry style layout with a sidebar, your Thumbnail might by 450x225px. Then set your Thumbnail size in the Media settings to 450 width and 450 height. Also, unless you are actually using a square image in your theme then I’d un-check the hard crop option.
  3. Medium size: I’d set the Medium size somewhere between the Large size and Thumbnail size. It will get used in the responsive set of images offered behind the scenes to the browser. I’m going to go with 600×600 pixels.

Remember that WordPress is going to create a “Medium large” size behind the scenes. We’ll let WordPress soft crop the Thumbnail and Medium image sizes.

I’m focusing the settings on the Featured Image as I imagine that is the size of image that is uploaded most consistently over time. Note, it is possible to disable any of the default image sizes being created by entering a zero in the boxes, but as I said above, I’m OK with keeping and using the responsive image source set feature as it is meant to provide a better experience for site visitors.

Handling Big Images

It is always a good idea to avoid uploading big images. If you can keep images at 2560px or smaller then you don’t have to think about the big image handling that was added in WordPress 5.3, which is triggered at 2560px. If you do need to use big images then you can either live with the extra images created or you can use a plugin or a PHP snippet added to your child theme’s functions.php (or use the Code Snipptes plugin) to turn that feature off.

add_filter('big_image_size_threshold', '__return_false');

Other Options

There are PHP filters to turn off all of the default WordPress image size options. There are also PHP filters to create your own custom sizes or even increase the big image threshold to a larger size. You can use a plugin for these or do a Google search for many examples.

If you find that you need to change your image sizes because you left the settings at the default and they don’t apply and / or you want to remove old generated sizes then the Regenerate Thumbnails plugin is a popular choice. The plugin is used on over a million sites. The Regenerate Thumbnails plugin not only lets you generate new image copies if you change the sizes in the Media settings, but there is also the option to remove the old unused image copies. Of course, try it out on a testing site first and take a backup before starting in case there are any issues.

Final Thoughts

Whatever your image size settings, you can still upload images of other sizes if you need to use them in your posts, so you aren’t stuck with the defined sizes. Also, note that if the images you upload are smaller than one of the defined sizes that WordPress will not generate the larger sizes. So, by tweaking the settings you are not giving up any flexibility.

Finally, my suggestions in regards to WordPress image size settings, images created, and options is not the last word. It is my working hypothesis that I plan to implement as I create new sites or update existing sites. As I mentioned, there is not any guidance on this topic, so I hope that we can share our experiences and what we learn in order to use WordPress more effectively. Do you know of something I’ve overlooked or do you know a better way to go about it? Do you have some logic and settings you use? If so, please leave a comment below with your suggestions.

I’d like to thank Nelson Therrien for reading an earlier version of the post and providing some feedback.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

Similar Posts

  • Hello David,
    Thanks for the nice overview about image sizes in wordpress. I haven’t found a such comprehensive text so far. You tell in detail under which circumstances, which sizes of image copies are created within wordpress. Nice!

    From my sites I found that plugins also create additional images e.g. the plugins menu image and advanced wordpress backgrounds. That makes the situation even more complicated.

    I want to add, which image sizes I have chosen so far. From beginning I have chosen a featured image size of 1400px longest side, because my predecessor of a website which I took care after him did chose this default and I kept it. So in backend/settings/media this is the value I enter as large size max width and max height. (Or I enter 0 in both fields, as I upload every large picture converted to either 1400px width or 1400p height using the image magick convert software.) As medium max width and max height I stayed with the default values 300px. And for the thumbnail size I am unsure, I used a value of 0 a long time and did not experience any harm. Probably I did not use thumbnails very often, and if I used them e.g. in my navbar, then a plugin created them independently (menu image).

    I was wondering about your large choice of the 450 width and 450 height thumbnail sizes. Is this necessary? Maybe for a blogging site it’s a good choice. Influence by this also your medium max sizes are quite large, 600px. In my opinion this is not optimum, because the new medium large size, automatically created by worpress has almost the same size of 768px.

    Just some thoughts
    thanks again for your good article
    Felibunda

    • Thank you for the sharing your thoughts and details. I could probably disable the thumbnail size. On another site I’m using square images and could go with a larger square thumbnail. I’ve been looking at the default sizes for social media images and something around 1200 by 670 would work for both Twitter and Facebook. It is a large featured image but for some sites might work … then I wouldn’t need to create those separately.

  • Hi, sorry this will be a long comment (in bad english), because I am so happy I found this article!!! Finally I feel the mystery of handling images in a modern way with responsiveness and media settings contra layout size on different devices is clearer!!!

    I have searched for a guide like this for years, not kidding! And during that time things have changed, with the introduction on responsive images into WP core, srcset. And the new way extra big images is handled. So it´s been super confusing reading older articles (still high up when googling) that talk about how to make sites and images responsive using plugins or code…
    Now I understand I can stop thinking about that completely, WP takes care of the problem! Sigh of relief!!

    To bad some years ago I read a lot of articles about the benefit of setting all media settings but one to zero, to save server space for sites with a lot of images… Now I have to regenerate them again to benefit from the great srcset responsive function!

    I also very much like your thoughts about media size settings, since it is hard to find any tips on whether to change them or not, and if so, into what. Most people seems to leave it as default? Wise or not… I will make a tweak on your suggestions!

    My only concern is why we should pay so much attention into Facebook. Doesn´t they change their media settings now and then, so we have to regenerate our images again? I don´t like the idea Facebook has that big power over the layout of my site. (And maybe FB is fading in popularity…?) But of course, that is up to me to follow or not.

    More important must be to follow the breakpoints of mobile, ipads and so on? But that is very tricky since there are so many different breakpoints… Do you think it is “impossible” to account for that as well? If I set my featured image/large size to 1200 px, do you know what image size will be used on a really high res mobile?? Large, medium, full?
    Or are the size settings you choosed also well adapted to most tablets and mobiles?
    I guess WP default image sizes are there to match different devices, but at the same time they´ve had the same pixel width for a long time now and especially mobiles get higher and higher resolutions… Do you think WP will update their default sizes to match bigger screens/higher res?

    Thanks, you made me happy!

    • Thank you for the nice feedback. I agree with you that the media library settings seem to be badly out of date. These days I think most themes define their own sizes and then ignore the settings in the media library. It is a mess.

      A number of visitors to my site are from Facebook and YouTube, so I was paying attention to images for the Open Graph data.

      I think that the Responsive Image Source Sets (srcset) is meant to provide images for a variety of screen sizes and let the browser pick the best one.

      There are lots of tickets in WordPress Trac about the media library. It does not seem to be a priority to the core developers at this time, so I don’t expect to see the issue addressed anytime soon.

      Best regards,

      David

  • Hi David, agree with the other posters. This is the best rundown I’ve seen so far. So many blogs neglect to explain all the different image sizes, where they come from and how they are used. It’s crazy given how “expensive” poor image optimization is to your overall site speed.

    I had some comments and questions.

    – You say “That gives us at least 9 images, assuming your theme doesn’t add any.”
    As I was reading I was writing down sizes, and I got 8. Also your bulleted list above this statement also has 8 (including the original image) so did you mean 8?

    – Do you have a rough idea of how you would go about cleaning up all the image sizes when you switch to a new theme? I had a theme that had 800 as a “large size”. If I change that and regen thumbnails, it doesn’t seem to change the content in the post that is pointing at filename_571x800.jpg so the posts are broken.

    I know I could just leave the old images but I’m switching to better image compression, so I’d really like the posts to point to freshly compressed images. Have you found a way to fix content in the post to match the new sizes that regen thumbnails (or the wp cli version) creates?

    Thanks!

    • Hi Shimona,

      Yes, that should be 8. Thanks, I fixed it.

      I used Regenerate Thumbnails. I saw in the support thread for the Regenerate Thumbnails plugin that the option to update posts to use the new sizes was missing from the latest version. No idea if that was intentional or not. You might try this one on a test site:

      https://wordpress.org/plugins/regenerate-thumbnails-advanced/

      I think that ShortPixel (and maybe others) will optimize existing images so that old posts will serve the newly optimized ones.

      Best,

      David

      • Yeah the problem is I used smush before and I don’t like the quality of the resulting images. Now that I’m ready to pay for an optimizing CDN I want to start with better quality and avoid double compression. But my existing images are all compressed with smush already.

        • The free version of Smush does not optimize the original image and the Pro version of Smush makes a backup of the original image before optimizing it. So, you may be able to still use the original ones. I’d definitely try the process on a testing site first!