Media Sizes on Your WordPress Site

What size image should I use? Do I need to upload all those sizes? No!

Different image sizes are being used on this page from a single 3500×6000 uploaded image.

This has been coming up quite a lot, so I thought I’d put together a post on it.

WordPress automatically resizes images for use within your site. WP, themes, or plugins set these sizes.

If you know you need an image size, make sure WP is creating it. You should be able to upload an image once, and have that image be used across your website. This is especially true if you are using the featured image. Anywhere the featured image is being use the most appropriate size will be served of it. This also helps with mobile access to your site.

Featured Image is uploaded and then the actual image size shown is picked by your theme. You don’t get to pick and choose yourself. It will also show up other places as well, including in social media, so always upload the image at the biggest size you’ve decided to use for your site.

You know you have a 650 wide image at the top of all your blog posts, but have a 300px square image on your blog (roll) page, you would have those as two of your image sizes. If you want the full size image that is 1200 wide somewhere in the post, you would still just upload the largest size and let WP do the resizing for you.

I’m using the Featured Image on this post. If you’re on my blog page you should see the 250 wide unlimited tall. If you’re on the actual post you should see the 650 wide x 350 tall image.

Of course if you don’t like how WP cropped something you can always resize and crop it yourself, and then replace the image sized file via ftp or your file manager. Don’t upload another file because WP will again make all the sizes under it, and unless that’s your intention, you should just replace the one file.

How WordPress resizes & crops your images.

If you setup a thumbnail to be 200 x 200 the image will resize the image to 200 width and crop or 200 height and crop to get a size of 200×200.

It will not resize either side below 200 before applying a crop to whatever side is larger. If the image is 1800×600 it will resize the 600 height to 200 and crop the width left & right equally to 200. If the image is 600×1800 it will resize the the 600 width to 200 and crop the height top & bottom equally.

-200×200 will be added to the image files name original.image.name-200×200.jpg

If you set your media size to 400 x 600 (as set in media settings) it will do the same as the above using the minimum resizing of either the width or height and cropping the the other dimension down to size taking from opposite ends equally.

-400×600 will be added to the image files name original.image.name-400×600.jpg

If you set your media size to 600 x 0 it will resize down to the width and the height will be whatever that resize is left. If you start with an image that is 1200 x 800 it will be resized to 600 x 400.

-600×400 will be added to the image files name original.image.name-600×400.jpg

If you start with an image that is 800 x 1200 it will resize to 600 x 900.

-600×900 will be added to the image files name original.image.name-600×900.jpg

Images can be set to use different areas for a crop, this will take edits via php, which can be done via a site plugin. The default is center, center. You can set x_crop_position accepts ‘left’ ‘center’, or ‘right’ & y_crop_position accepts ‘top’, ‘center’, or ‘bottom’.

You can also set a largest image to be saved. I use a plugin call Imsanity so the original image will be resized down when it’s uploaded to whatever that plugin is set to. I typically use 1920 width, you can also set a max to the height if you want. This allows you to use any size image knowing WP is not going to upload it at 5000 x 5000, which makes it nice if you want to use your phone to upload.

Best Practices

Decide what sizes you know you have/want to use regularly throughout your site and make those sizes the ones that WP makes automatically. Your theme will set the sizes used for the featured image typically. You then have three sizes that should be set in your media settings. WP base also adds and additional size that you can pick from unless you’ve added it to the drop down via php. Let me or your web designer know what you need.

Use code where you can to add additional sizes. If you have a 200×200 thumbnail and a plugin only wants a 150×150 image you can use the 200×200 and most likely the plugins html/css resizes it down. You normally use a 400×400 square but want a 300×300, you can resize through classes if it’s something you do often, or using WP to edit the image. Simple size changes don’t need additional size saved. If you want landscape vs portrait, then you need an additional size. You can always resize down via code, however if it’s almost always, then add a size.

When you need a very specific crop or size for something special, then resize and upload, that however should be the exception, following these steps will help to keep the number of images down to what is needed.

If your sizes have changed you can use plugins to help create the new sizes, and delete the old ones. Any time you’re deleting however make sure to pull a backup just in case.

Full size 3500×6000 image uploaded automatically resizied to 1920×3291 on upload.

Thumbnail 200 x 200

Medium 400 x 686

350 x 350

350 x 350 resized down to 250×250

 

Next post:

Previous post: