Skip to content

Commonsense Image Sizing in WordPress

Here we’ll be discussing basic best practices for working with image sizes in WordPress. This has such a huge impact on site speed that it’s important to know the fundamentals. Playing around with caching and CDNs and everything is really great, but if an image on the page is 400KB bigger than it should be, to a large extent you’re back where you started.

Let’s get started!

What determines image file size

A digital image’s file size is another way of saying “how much information is in the image file.” This basically boils down to two elements: the number of pixels in the image, and how the image stores information about those pixels. As such, you can change an image’s file size in two main ways:

  1. Compression: either lossless (cut out image metadata like “author” and “camera used” and optimize the way pixel data is stored) or lossy (use algorithms to destroy pixel data with as little quality loss as possible).
  2. Resizing: change the number of pixels in the image.

The first and most important step in creating manageable image file sizes is to use appropriate image dimensions.

We’ll discuss image compression in a later post, but here we’re going to talk about the most important and easiest method of controlling image file sizes: resizing. The first and most important step in creating manageable image file sizes is to use appropriate image dimensions.

The costs of doing it wrong

Full-sized image in WordPress Suddenly, nothing was okay

The single most important lesson for working with image file sizes is this: Don’t use images that are much larger than the space they occupy. Loading large images into small spaces slows down your site and forces your users to expend more bandwidth on every page load.

This can reach disastrous proportions. I recently noticed slow load times on a website I visited, and realized it was because the author’s headshot (about 150px by 100px on the page) was being loaded as a 2MB image more than 1000px on a side.

Using the wrong image size can throw all the other speed optimizations you might have done out the window.

This was an innocent mistake by the site admin, but it could not have been worse for the site’s page speed. In extreme cases like this one, using the wrong image size effectively throws all the other speed optimizations you might have done out the window.

The benefits of doing it right

Paying attention to appropriate image dimensions makes a surprisingly large difference, because of the math inherent in working with two-dimensional images.

An image shrunk to one-fourth of its original dimensions will have one-sixteenth its original file size.

Image file sizes don’t scale linearly with image size, but quadratically: all else equal, an image that you shrink by half (e.g., take from 1000px square to 500px square) will not have half the file size of its original, but one-fourth the file size. (sidenote) An image shrunk by three-fourths (to one-fourth of its original dimensions) will have one-sixteenth its original file size.

It’s very difficult to use other means (lossy and lossless image compression) to remove fifteen-sixteenths of the information in an image and have it still look decent. This is why appropriate image sizes are the first, best tool for managing image file sizes.

When do you need to worry about this stuff in WordPress?

The first question is, When do we need to worry about manually resizing images at all, and what is done for us automatically in WordPress?

Automatically generated WordPress featured image size An auto-sized featured image

Most WordPress themes automatically generate custom image sizes for some things, notably featured images. WordPress autocrops and autoresizes these images to be the perfect size for the space they fit, so you just need to choose which featured image you’d like to use (which could be a 10MB camera image) and let WordPress do the rest.

In terms of editing posts, you also don’t need to worry about image sizing if you’re happy sticking to WordPress’s default image size options (more on those later) in your posts.

You do need to do manual image sizing in the following cases:

  1. When you’re modifying an image inside a post to be some other size than the WordPress defaults.
  2. When you’re using a plugin or a theme settings page to upload an image into an area that has no WordPress auto-resize set for it. The “logo” space of the ever-popular Avada theme is an example: it’ll use a 5MB file for your logo if you ask it to.
  3. When you’re working with images outside the “add media” dialog—for example, adding a previously uploaded image to your footer using raw PHP.

Responsive images add intelligence to WordPress image sizing, but you still need to understand it

As we detail in our related article on WordPress custom image sizes, WordPress 4.4 and above use responsive images: images that have a range of sizes, and which intelligently serve smaller images to smaller devices.

In principle, WordPress responsive images allow you to simply dump a bunch of full-sized 5MB images onto the page, and let your theme’s responsive image rules determine which of the much smaller sizes of those images to actually serve to each device. However, we definitely don’t recommend this, for a few reasons:

  1. Not every method of adding images to a WordPress site is set up to use responsive images, and so it’s good to be in the habit of adding sanely sized images that match the space they occupy.
  2. Not every browser properly uses responsive images, and for the ones who don’t (mostly IE, including IE11) your site will quickly become unusably slow if every src fallback is a colossal 5MB image.
  3. It is possible for any theme or plugin author to write badly thought-through rules for which image sizes should show at which time, which could lead to huge images being served at unfortunate times if you rely exclusively on this system to serve intelligently sized images.

So responsive images are a wonderful addition to WordPress, but not a substitute for the good image sizing practices we discuss in this article.

Image size best practices in WordPress

With these principles in mind, let’s take a look at how to handle image sizes in WordPress.

Uploading images

largest image availableUnrelated: Uploading the largest image available

In most cases, you should upload the largest version of an image you have available.

The reason for this is simple: It allows you to preserve information about the image if you want to work with it later. Storing the full-sized image on your computer and uploading an optimized version to WordPress may seem smart—but what if your computer crashes, or you suddenly want to double the image size in a site redesign, forcing you to reupload? What if you want to do this for eighty images? The principle seems clear: the raw materials to modify your WordPress site should, as much as possible, be stored with the site itself.

Your WordPress site should never be stuck with image versions that are only smaller than you need.

So the general idea is that your WordPress site should never be stuck with image versions that are only smaller than you need. If you’re absolutely confident that you’ll only need a 100px version of your logo, go ahead and upload that—but again, what if your mind changes in three years? On the other hand, if you’ve got a 3000px-by-2000px version of an image and a 6000px-by-4000px version, go ahead and upload the former, and use the extra bandwidth on a cute YouTube video.

Using WordPress default image sizes

Although you should usually upload the full-sized image, this image will often be way too big to use. That’s where WordPress default image sizes come in. When you upload an image, WordPress automatically generates several different sizes of it. By default, these sizes are:

  • “Thumbnail”: 150px square
  • “Medium”: 300px along its largest dimension
  • “Large”: 640px along its largest dimension
  • “Original”: the initial dimensions of the uploaded image

Use the smallest WordPress-generated image size that is larger than the largest your image will be. For example, if you’d like to create something 400px wide in your post, don’t use the “original” image: use the “large” (640px) version and reduce to 400px. If you’re looking for something 250px wide, use “medium” (300px).

Remember that images can sometimes be wider at responsive widths than at full widths.

Make sure you know how wide the image is at its absolute widest; remember that images can sometimes be wider at responsive widths than at full widths. Maybe your sidebar vanishes at 800px, leaving an image that was filling out a 640px column to take up the full 800px of width.

Modifying default image sizes

The WordPress default image sizes are easy to change. You can modify the dimensions of the original defaults (“thumbnail,” “medium,” “large”) in “Settings -> Media” in your admin dashboard. You can also add new image sizes using a very simple function, add_image_size(), in your theme’s functions.php. There are several good tutorials on adding image sizes; here’s one.

Create image sizes that match common image dimensions you use on your site. If you use a lot of 500px-by-500px squares, create that image size. Using this exact size instead of “large” images shrunk to 500px can speed your site up considerably—and even more so if you’ve been using 4MB “original” versions of a series of 800px-wide images.

You should be liberal with creating new default image sizes, if it means that you can use dialed-in file sizes for a lot of images.

In general, you should be liberal with creating new default image sizes, if it means that you can use dialed-in file sizes for a lot of images on your site. If many of your images really are 800px wide, don’t settle: make a “hefty” file size set to 900px and move forward with that. The wonderful Regenerate Thumbnails plugin will let you retroactively create any new default image sizes for images you’ve already uploaded.

Again, remember to create image sizes that match the largest your images will ever be—responsive design considerations included. (You also may want to give yourself 50px to 100px of padding; this won’t slow your site down much, and it’ll save you the hassle of getting things pixel-perfect.)

Conclusion

Hopefully this won’t feel too abstract—the intent is just to reinforce the commonsense way of doing things. Using the right image size doesn’t have to be complicated—but it is extremely important.

How do you work with image sizes in WordPress? We’d love to hear from you in the comments below!

Sidenote: This makes “retina-ready” image handling (which we won’t be discussing here) more costly than it might appear. The common practice of doubling image sizes to accommodate retina devices’ superior resolution quadruples, not doubles, image file sizes.
Yay! 🎉 You made it to the end of the article!
Fred Meyer

11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Nebulas Website Design
August 3, 2015 5:07 am

Great article but this really is day 1 at web design school. It’s amazing how much I see huge images being uploaded to websites after I hand them over to my clients and even after instructing them on what to do. Most of the time it’s just down to laziness I think as well.

Adding and Using Custom Image Sizes in WordPress: A Guide to the Best Thing Ever | WPShout.com
December 9, 2014 6:28 pm

[…] example, featured images are suddenly too small (and/or the wrong shape) for their containers. So upload the biggest thing you’ve got—in an emergency, you can even enlarge an image to meet your requirements in something like […]

Hidayat Mundana
April 30, 2014 10:42 am

frankly, before I really do not care about the size of an image that I uploaded size shown
but after reading your article, so I know what I need to do and that I should not do

dilip yadav
April 27, 2014 11:27 pm

simple and very useful … thanks for this
this will really help me a lot in images in wordpress.

Piet
April 24, 2014 1:52 am
Reply to  Fred Meyer

Thanks for your reply, Fred.
You are correct about Imsanity, it basically “destroys” the original image.
I usually use it on sites of “stubborn” clients, i.e. after having explained to them a few times they shouldn’t upload these outrageously large images of several thousands px and 300dpi 😉

haroon
November 24, 2014 9:44 am
Reply to  Piet

there are also some image optimizers which do whatever imsanity does and also additionally, stores a back-up of the images it resizes.

agep roem
April 23, 2014 12:50 am

My worry is SEO on image because by default WordPress rename every image by adding size following original file name. For example, when I place my thumbnail size, I have to echo my filenamex85x85.jpg, so I think 85×85 addition is bad for SEO. And I still don’t have any solution for this.
Nice post btw…:)

Commonsense Image Sizing in WordPress - WordPress News
April 22, 2014 9:04 pm

[…] Commonsense Image Sizing in WordPress […]

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

11
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...