Commonsense Image Sizing in WordPress

Large painting | WordPress image sizes

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.

Image credit: Dennis Jarvis, Nasa Goddard Space Flight Center


13 Responses

Comments

  • agep roem says:

    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…:)

    • Fred Meyer Fred Meyer says:

      Thanks, Agep! I understand what you’re saying, but I’d expect that the SEO consequences are pretty minor. Does anyone who’s a better SEO than me want to weigh in?

  • Piet says:

    I think the default image sizes are hardly ever suitable for most projects and although you could adjust them (or add to them), my main problem is that those sizes are generated for each and every image you upload through the media uploader.

    Since a year orso I have switched to Aqua Resizer (https://github.com/syamilmj/Aqua-Resizer), which dynamically resizes images (using WP native functionality), so you uploads folder doesn’t get clogged up with a whole bunch of images in various sizes that are never used.

    Usually I explain to clients that they should not upload 3264x1840px sized images, but if they don’t fully understand I just install the Imsanity plugin (http://wordpress.org/plugins/imsanity/) which “automatically resizes huge image uploads down to a size that is more reasonable for display in browser, yet still more than large enough for typical website use”.

    • Fred Meyer Fred Meyer says:

      Thanks for the thoughts, Piet! The Aqua Resizer looks really cool–I’m going to try it out when I get the chance.

      Imsanity’s interesting–I guess the problem it addresses is people using “Original” images across their site and they’re 5MB files. It does seem like it could be helpful, but I also think there’s some merit to storing images in full quality. Just to pick a scenario, what if you lose access to the original images you uploaded (lose your camera, computer crashes, etc.), and then you realize that you want to use a zoomed-in subsection of one of the pictures already on the site? (Maybe someone’s eye in good quality?) Granted, that’s very much an edge case, but those are the sorts of things I think about.

      • Piet says:

        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 says:

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

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

  • 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

  • madrozid says:

    vimax is a herbal medicine devoted to the men, who serves as the vimax canada permanent and extend appropriate in want, quickly and accurately without side effects and with permanent results, vimax asli has been the choice of international consumers. Vimax PiIls already well known parts of the world and is often used by men to increase male virility and maximize the size of the penis, in order to give satisfaction to their partners. obat pembesar penis Vimax has been recognized by scientists the world as an herbal remedy for pembesar penis and how this increase is no longer a secret mighty man, this is extraordinary usefulness fast, mutually agree and permanent.

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

Pingbacks