Have you run your website through a performance testing tool only to be told you need to “serve scaled images”? Basically, the tool is telling you that you need to resize your images’ dimensions to match how they’re being displayed on your site.
Fortunately, WordPress has some great tools to help you out. You can use an image optimization plugin to automatically serve scaled images – or scale images yourself using a number of different techniques. Doing this will go a long way towards optimizing your page loading times and improving your bounce rates.
In this piece, 🧩 we’ll first explain why it’s so important to serve scaled images properly.
Then, we’ll share three plugins you can use to get the job done. But, like a late-night infomercial – that’s not all! We’ll also give you three additional non-plugin methods that will let you serve scaled images like a pro.
Let’s get to it!
Here’s why you need to serve scaled images
A scaled image is essentially one that has been sized to fit the exact dimensions you’re using it for. On one hand, an image that’s too small and scaled up will be blurry. On the other hand, while a browser will shrink an image that is too large, it adds to the page’s file size unnecessarily.
Furthermore, large images cause the browser to spend time and resources to load them instead of loading the page itself as fast as possible. This can significantly slow your page loading times and negatively affect the performance of your website.
For example, if your theme displays an image at 100 x 100 px, then you’d want to load an image that is exactly 100 x 100 px. If you load an image that’s 50 x 50 px, it will look blurry when it’s scaled up to 100 px. On the other hand, if you load an image that’s 200 x 200 px, it will look great, but you’re unnecessary increasing the size of your page because it’s still only displaying at 100 px.
Of course, slower pages can drive visitors away. Not only can they promote a less-than-favorable user experience (UX), but they can also increase your bounce rate as users become frustrated and click away from your site.
👉 That’s why almost every performance testing tool highlights the need to serve scaled images:
Three plugins to help you serve scaled images in WordPress
The great news is that one of the easiest ways to properly serve scaled images is to use a plugin to help you. The following options make it simple to optimize your heavy images and clean up your bloated pages. Let’s take a look!
1. Optimole
Our first offering is Optimole. This handy plugin optimizes your images and delivers them at the perfect size for different devices. So it’s not only helping you serve scaled images, but it’s also able to automatically scale them to the optimal size based on a user’s device.
It has a minimal setup process, which is great if you need maximum quality with minimal fuss.
In addition to scaling and compressing your images, Optimole also serves them up from a global content delivery network (CDN) powered by Amazon CloudFront, which speeds up your load times around the world.
With the free plan, you can optimize and scale unlimited images for up to ~5,000 monthly visits. After that, paid plans start at just $19.08 per month (if paying annually). Month-to-month plans start at $22.99 per month.
2. Smush
Another plugin you can use to serve properly scaled images is Smush. This is a highly-rated and popular choice that optimizes your images by scanning each one, stripping away unnecessary data, then setting an ideal size. Once it’s finished, each image is saved in your Media Library.
To scale your images, you can have it automatically resize images above certain dimensions to match your site’s requirements.
Additionally, the plugin has the ability to ‘smush’ up to 50 images at once, and you can set it to automatically optimize each one as it is loaded. Moreover, you can set it to compress images in any directory, including those stored on cloud services.
For this reason, the free version is a great place to start and will optimize unlimited images, though individual images cannot exceed 5 MB in size.
3. ShortPixel
Our final recommendation is ShortPixel. This plugin is the perfect choice for those looking for a quality image compression and scaling solution on a budget. It can optimize up to 100 images per month for free. Plus, it is simple and easy to use.
Specifically, ShortPixel can help you automatically scale WordPress images as you upload them to dimensions that you specify.
ShortPixel also comes with lossless and lossy image compression for JPEG, PNG, and GIF images– you can also optimize PDFs. It provides you with the option to automatically convert images (including WebP) as you upload them or to handle them manually.
As mentioned above, the free version enables you to optimize up to 100 images per month. Beyond that, paid plans start at $3.99 per month to optimize up to 7,000 images per month.
How to serve scaled images in WordPress without using a plugin (3 methods)
If you’d rather serve scaled images without a plugin, there are other ways to go about it. For example, you can crop images in your media library, adjust them in your admin media settings, or use an image editor such as the open-source GIMP or Photoshop.
However, before we discuss how to serve scaled images without using a plugin, we should mention a native feature that comes with WordPress called srcset [1]. This core feature makes your images responsive to different screen sizes. It works by offering the browser three different options, which will then use the one most optimized for that user. Of course, this does help somewhat with page loading times, but scaling images will improve your performance even further.
📢 So, without further ado, here are your three ways to serve scaled images without a plugin:
- Crop images in your media library
- Adjust image sizes in the Settings > Media screen
- Use an image editor (such as GIMP or Photoshop)
1. Crop images in your media library
Your first port of call to achieve this method is to head to your WordPress dashboard. In one of your posts or pages, begin by clicking on the image you want to scale and selecting Edit image:
From there, you’ll need to go to the Media Library screen, choose your image, and click the Edit Image link. On the next screen is the option to scale your image:
You’ll be presented with the original dimensions for the image, and a box to enter your new scaled dimensions. However, note that filenames are often saved with a string of additional characters, which may affect you if you’re using a specific image SEO strategy.
2. Adjust image sizes in the Settings > Media screen
You could also scale your images by adjusting the settings in WordPress directly. To do this, navigate to WordPress, then go to Settings > Media:
This will bring you to the Media Settings page. Here, you can set the maximum dimensions to use when uploading an image to WordPress, for each of the three options it will present to the browser (as we discussed above concerning srcset):
Here you can change width and height for the thumbnail, medium, and large image sizes.
WordPress will then automatically create scaled versions of each image using these sizes. You can choose which size you want to insert from the WordPress editor.
However, it should be noted that although you may be able to improve page loading times in some instances using these settings, they will not perfectly optimize your images in every circumstance. For this, you might consider the last manual method.
3. Use an image editor (such as GIMP or Photoshop)
Of course, our last method for scaling your images manually is to use an offline image editor. You might think of this method as the most obvious, although it’s arguably the most efficient option available. For instance, in Photoshop, you can head to Image in the toolbar and select Image Size:
A pop-up screen will appear with the basic dimension for your image. You’ll then be able to scale the image however you wish before uploading it to WordPress.
In addition to width and height, you also have some other options here. For instance, the resolution of the image can be set higher or lower depending on your needs (72 PPI is usually the standard for the web).
Conclusion 🧐
Whether your website is running slowly, or you’re simply looking for another way to optimize its performance, learning how to serve scaled images effectively is a must. With the perfect specifications in place, your site can run lighting fast.
📷 In this article, we’ve discussed how to scale images manually, and offered three useful plugins for doing so. As a quick recap, they are:
- Optimole: This plugin offers a set-and-forget method for serving scaled images.
- Smush: A popular and highly-rated solution for image optimization.
- ShortPixel: For those who prefer a lightweight option, this plugin is the perfect choice.
Do you have any questions about serving scaled images or what it means to serve scaled images? Ask them in the comments section below!
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)!