Build Your Own Business Website header image

Everything You Wanted to Know about the WordPress Media Library – Part 2 – Understanding Images Size in WordPress

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve seen how to insert an image into a WordPress 3.9 page, I want to talk about image sizes.

Automatic Creation of Additional Image Sizes

Many people who have used WordPress do not know that WordPress automatically creates a bunch of images at different sizes for that same image. You’ll want to listen carefully right now so that you can take advantage of this feature. Again, every time you upload an image to the media library it automatically creates images at different sizes for that same image.

Change Default Image Sizes to Match the Theme

Let’s come over here and look at the WordPress Media Settings. Go to Settings and Media and here are the default image sizes that come with WordPress. They are thumbnail, a medium size and a large size and you can set these default sizes to the size that you want them to be.

My opinion is that you should set your large size to be the size of the image as if it were the full width of your content area. In this case, our content area is 564 pixels wide so I’m going to set the large size to be 564 pixels. And your medium should be half of that so I’ll set it to 282 pixels.

I always leave the max height at 1024 because I’m not trying to make it any shorter, I’m just trying to make it fit properly inside of the content area. Then for sizing like this I’d probably take the thumbnail size down to 150×150.

Let’s save the changes and now when we upload a new image WordPress will create these sizes from that image.

The Thumbnail Size

The way it does it is for the thumbnail size is it scales the image down until its least dimension fits inside of one of these widths and then it crops the rest of the image out. You can choose not to crop the thumbnail to the exact dimensions but since you use your thumbnails in places where you want the images always to be uniform I wouldn’t do that.

Go ahead and crop the thumbnails so that the image is scaled down until its least dimension fits inside of either the height or the width. It’ll then crop off the rest. That’s how that crop works.

The Medium Size

For the medium size it will scale the image down so that its width fits inside of the max width or so that its height fits inside of max height. It just scales the image until both of its dimensions fit within the box of 282×1024.

The Large Size

And the same thing is true 564 x 1024. It just scales the image down until it fits inside that box. It doesn’t change the proportions of the image at all, it just scales it down proportionally so it fits inside of the box at 564 x 1024.

Limitations to Default Sizing Change – Not Retroactive

Let’s save that now and come back over to this page and edit it. Let’s delete the image and then insert the image again. We’ll add media and if we click this image, note you can see the size here on the right. You can choose a size here.

Interestingly it shows the Medium size to be what we just set rather than the default and this image size doesn’t actually exist so let’s see what happens. Choose Medium and insert that. Let’s update it and view the page. Isn’t that interesting? What WordPress 3.9 does is if the image size that was originally created is not the right size is it creates a style of width.

WordPress 3.9 Adjusts the Sizing through Scaling

This medium size was 320 x 426 based on the old image sizes that we had and what WordPress did was it added a style of width to this so that it scaled the image down to fit inside of what we said was our medium width.

WordPress never used to do that. Before WordPress 3.9, what it would do is insert the medium size image at the size that it actually was rather than the new size.

Why You Should Use Regenerate Thumbnails Plugin to Solve the Problem

What I was trying to show you essentially is that when you change these Media Setting image sizes WordPress does not go to all the existing images and regenerate new sizes. It never goes backwards. This generation of images based on image size is not retroactive so if you have a whole bunch of images that were created at 200×200, it’s not going to resize those.

What we saw here though was it recognizes that problem and sets an inline style that makes it the right width simply by forcing it to scale down in size. However, rather than doing it that way I would suggest using a plugin called Regenerate Thumbnails. The reason is that you are serving up an image that is larger than it needs to be therefore slowing your site down needlessly. You’re just artificially scaling it down not reducing it’s size.

So, again, what you are better off doing if you are in a situation where you are changing your image sizes and you have existing images in your library is to regenerate the image sizes using the Regenerate Thumbnails plugin.

Regenerate Thumbnails Plugin

I have Regenerate Thumbnails installed here. I’ll just activate it and come back over to Tools and under the Tools menu now you have Regen Thumbnails. When I click on Regenerate All Thumbnails it shows there are 58 images for it to work on and it will go through the process of regenerating them the right size.

The process takes a couple of minutes so while we’re waiting let’s go ahead and edit this page and delete this image. This Regenerate Thumbnails creates images for all of the registered image sizes so if you have other plugins or if your theme has registered image sizes then it will recreate all of those new image sizes for you.

Let’s go to add media again and pick that same image. I’m just going to take the large size, choose no alignment and insert into the page. I’ll update it, view the page and now the image is there. It fills the entire section of the browser window.

I mentioned the other image sizes. There are plugins that create their own image sizes like the Meteor Slideshow plugin which we have installed on this site. So the Meteor Slideshow plugin creates an image size that is 258 x 1032 size and then the Regenerate Thumbnails created its own image size here for this as well.

Sometimes themes create image sizes as well. For example, if you’re using the Agility Skin or the Carta skin with Thesis 2, I have custom image sizes that those skins add. Genesis themes often have some image sizes specific to their sidebar widths so that you can choose a different kind of image size from widgets like the Genesis featured page widget.

There are lots of plugins that create image sizes and so anytime you Regenerate Thumbnails it regenerates all of those image sizes not just the image sizes that you see in media settings.

0 Comments… add one
0 comments… add one

Leave a Comment