Media Library And Large Images

Media Library and Large Images – Beware the Defaults

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 9 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.

Do NOT follow this link or you will be banned from the site!
>

Pin It on Pinterest

Share This
Scroll to Top