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:
- 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).
- 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
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?
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:
- When you’re modifying an image inside a post to be some other size than the WordPress defaults.
- 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.
- 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:
- 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.
- 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
srcfallback is a colossal 5MB image.
- 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.
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.)
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!
Image credit: Dennis Jarvis, Nasa Goddard Space Flight Center