Serving scaled images is one of the most overlooked ways to deliver a better site performance. Are your images holding your site back?
Images take up a lot of file size space, especially if they’re bloated and oversized. That’s why images should be number one on your list of things to optimize if you’re trying to improve page speed, conversions or sales.
In this post we’re going to focus on how to serve scaled images with WordPress. You’ll learn how to properly size images in WordPress in several different ways and how to improve your image optimization workflow tremendously with Smush Pro.
What are scaled images?
Images on the web have to fall in the Goldilocks zone. Not too big, not too small. They have to be just right. If they’re too small and they are scaled up, they’ll be blurry.
On the flip side, if an image is too big, the browser will shrink it down to the right size. This doesn’t affect how the image looks, but it will add to the file size of the page.
Since you can’t see a change in quality, the extra weight on the image files becomes easy to overlook. And since most people don’t know there is a problem, they don’t fix it. They go on relying on the browser to serve up the right size, because that’s what the browser is for, right?
Wrong.
Delivering an image that is too large hurts you in several ways.
- One, it distracts the browser forcing it to perform additional server requests. Instead of delivering a webpage as fast as possible, it needs to stop and resize the image. That takes time my friends, especially if your webpages are image heavy.
- Second, if you’re uploading a full size selfie straight from your phone, but you’re displaying it as a small Gravatar, then you’re wasting time and data downloading an image that is excessively large.
Enter scaled images. A scaled image is an image that has been sized to fit the exact dimensions you’re using it for. Unlike cropping, which may ultimately alter the proportions of an image, scaling preserves the dimensions.
If you’re reading this post on a full size screen, then the body of this post has a width of 600px. Since we’re all about optimization here at WPMU DEV, when I create images for blog posts I make them exactly 600px wide. That is the exact size I need so the browser doesn’t have to do any additional work and so you don’t have to use more data.
Site speed optimizers such as Hummingbird, GTmetrix, and Google PageSpeed Insights will recommend scaling images to improve performance.
Aren’t the srcset and size attributes supposed to take care of image resizing?
Yes and no. You want peak optimization right? If you do, srcset and size will help you get closer to the ideal image size, but won’t always give you the exact size you need and it won’t cut the excess on the largest size.
The srcset attribute works by providing the URL for the image and then giving the browser a list of images to choose from at various sizes. This set of sources for that cell phone selfie I mentioned earlier would look something like this:
srcset= “selfie-100x100.png 100w, selfie-200x200.png 200w, selfie-400x400.png 400w”
Above, WordPress is telling the browser, you know more about the user than I do, here’s the image you want in 3 different sizes, choose the one that will work best.
When the browser needs to display a 75px x 75px Gravatar next to a comment, it will choose the first option in the set and resize it slightly. If the user has a retina device, it will choose the second option.
This cuts down on some waste, but scaling will allow you to get that extra bit of performance.
How to Serve Scaled Images in WordPress
To get started, you need to know the dimensions of the images that will be used on your site. I’m talking banner images, hero images, blog post images, Gravatar etc.
Watch our quick tutorial on how to detect incorrectly sized images in WordPress.
We want to know what is the largest size that each image will ever be displayed at since we know that everything over this threshold is useless.
For example, let’s say I want to use a photo of the ocean on my site’s home page. The image in its unaltered state is 4534px x 3023px.
For an image in the body of a blog post, you’ll probably need to serve an image between 600px-960px wide and for hero featured images that span the width of a desktop computer screen, you’re looking at something in the 1600px width range.
Also keep in mind that you’ll need to double these sizes to accommodate retina screens. The largest size that 1600px image will need to be is 3200px.
To find the size that the image needs to be in order to fit perfectly, we’ll look for the image on the site and open up the browser developer tools.
If you’re using Chrome, right-click on the image and go to Inspect. In Firefox, select Inspect Element.
In Chrome, when you hover over the URL for the image, you’ll see the size that the image is displayed at with the original “natural” image size in parentheses. That large image file is what your visitors are downloading.
This is similar in Firefox. Once you inspect the element, you’ll notice that next to the image are the dimensions.
Now that we know what size we need the image to be, we can resize images properly in WordPress in several in different ways.
Crop Images in the Media Library
To manually crop an image, go to Media > Library and click on the image you want to crop. Then, click the Edit Image button to open the editing interface.
Scale or crop the image as needed using the corresponding options on the right. Keep in mind that if you scale the image to match the width you need, the height may be shorter or longer than the defined size in your theme depending on the dimensions of the original image.
If you choose to scale your image, it remains in proper proportion relative to the original image. On the other hand, if you decide to crop your image, it may not necessarily end up being edited proportionately depending on the dimensions you choose.
You can either scale your image by typing in your desired width and height, then clicking the Scale button or if you prefer to crop your image, you can do so by clicking and dragging your mouse over the image and selecting the area you want visible. Then, release your mouse click to reveal your selection.
9 Hidden Features in the WordPress Media Library Only Power Users Know
You can click and drag the squares on the edges and sides to make any necessary adjustments to the width and height or you can enter the exact dimensions you want into the Selection field on the right.
You also have the option to enter your desired aspect ratio for the image:
The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.
You can also click and drag your selected area to move it to the exact area you want visible.
If you cropped your image by selecting an area of it with your mouse, click the crop icon above your image.
Next, choose which pre-defined image size where you want your changes to apply under Thumbnail Settings. This option can be helpful if you want to edit the image while preserving the thumbnail.
For example, you may want to have a square thumbnail that displays just a section of the image.
When you’re done making your changes, click the Save button below your image.
You can also manually resize your images while you’re editing a post or page by clicking on the Add Media button above the editor.
Then, click the Media Library tab and choose one of the listed images. Next, click the Edit Image link to the right to access the same editing interface mentioned above.
How does WordPress Resize Images with the Media Settings?
If the images you need to manually resize are the default sizes WordPress creates, then you can try editing them via your admin dashboard’s Media Settings.
The default WordPress image sizes are thumbnail, medium, large and full-size, though, full-size refers to the original dimensions of uploaded images and can’t be changed in the Media Settings. To edit the original image, refer to the details above.
To manually resize the default image sizes, go to Settings > Media and enter the necessary width and height you need for the applicable image size you want to change in the corresponding fields.
If you need to change the thumbnail size, you can also optionally keep the check box selected to crop the thumbnail to the exact dimensions you specify. Normally, thumbnails are proportionally edited automatically.
When you’re done, click Save Changes at the bottom of the page.
Keep in mind that these sizes can be used in multiple places in your theme so you may end up editing images that you don’t want resized.
Once you have saved your changes, install and activate the Regenerate Thumbnails plugin to resize the images you have previously uploaded to adhere to the new dimensions you just set.
Edit File in Paint
Open up your image in Paint, Adobe Photoshop or your image editor of choice. We’ll use the dimensions we came up with in the Developer Tools.
In Paint, go to resize in the home tab. A box will open that will allow you to enter the new dimensions. Select the pixels radio button and then edit the horizontal dimensions. The vertical dimensions will automatically be resized if the maintain aspect ratio check box is selected. That is what we want. If the box isn’t checked, you’ll need to do the math yourself.
When you’re done adjusting the dimensions, click ok. Then you can save the file in Paint, re-upload to WordPress and replace the image with the new file.
Optimizing Images with Smush
Smush and Smush Pro can save you a lot of time when you start optimizing your images.
Wrong Size Detection
Both Smush and Smush Pro have an option for wrong size detection in the plugin settings. If you’re like me and forget to resize your images every once in a while, this feature will help you see which images are slowing down your site.
When you visit your site, images that are either too large or too small will appear with a yellow outline.
When you open the information tab (see the yellow “i” icon?) Smush will let you know what is wrong with the image size. Thanks Smush!
To enable this feature in Smush and Smush Pro, go to plugin settings and in the Image Resizing section, enable Detect and show incorrectly sized images. Then save your settings to see incorrectly sized images on the front end of your site.
Auto Image Resize
Want to keep yourself and others from uploading super humongous images so you won’t eat up so much of your hosting storage space? Smush and Smush Pro can help.
In the Smush plugin settings, head to the Image Resizing section and enable Resize my full size images. Before an image is uploaded to your media library, Smush will resize it to fit the width and height you specify.
Smush also gives you the option to keep a copy of the original image.
This feature essentially cuts the excess off your largest image.
One down, hundreds to go.
But what if you want to get all your uploaded images to be the perfect size without having to go through the steps above and scale every image manually?
Easy, become a WPMU DEV member and get access to Smush Pro’s lightning fast CDN.
While your host may include a CDN with your hosting account to improve the performance of your site, Smush Pro’s CDN was designed specifically with image optimization in mind.
Not only will the Smush Pro CDN deliver your images at lightning fast speeds, our CDN will also serve up the perfect size image for your users. In other words, leave the scaling to us!
