Have you overlooked serving scaled images as a method to enhance the site performance of your WordPress website? Well, let’s put it this way: if after running your website through a performance testing tool, you’re told you need to “serve scaled images,” then treat that as a priority task. By serving scaled images, you end up optimizing your page loading times and improving the bounce rates.
When you’re told you need to “serve scaled images,” it means you need to resize your images’ so that they’re equal in dimensions to the way they display on your website.
To make this possible, WordPress has some incredible image optimization plugins that make it possible to serve scaled images automatically. WordPress also makes it possible for you to scale images yourself, using manual methods.
Images that are not optimized end up hogging most of the file size space of your WordPress site. You wouldn’t want stuffy or oversized photos to hold your site back!
In this article, we elaborate on why it is crucial to serving scaled images properly. Further, we will share several methods by which you can go through the process with ease.
If you want to improve your page speed, conversions, and ultimately sales, then let’s get started!
Why Is It Important To Serve Scaled Images?
Images on the web have to be just right so that they’re neither too big nor too small. If an image that is too small is scaled up, it will appear blurry. On the other hand, if an image is too big, the browser will reduce it to the right size, but this will unnecessarily add to the page’s file size, while the picture looks the same.
It takes your browser time and resources to load large images. The time unnecessarily lost in loading bloated images takes a toll on the loading speed of the page itself. Your priority should have pages that load as fast as possible so that your website’s overall performance is not impacted negatively.
A scaled image is one that is “just right” in that it’s meant to fit exactly as per the dimensions you’re using it for. Any performance testing tool you use will suggest the need to serve scaled images. This is because slower pages drive away visitors, lead to poor user experience, and increase bounce rate.
Some famous site speed optimizers that recommend scaling images for performance improvement include:
- Google PageSpeed Insight
Here’s the example of the GTmetrix tool, suggesting the need to serve scaled images to free up space to help the site load faster:
Serve Scaled Images In WordPress Using Plugins
An easy way to serve scaled images properly in WordPress is by using a plugin. A great plugin helps optimize your bulky images so that your pages are cleaned up to load faster. You may choose among several available plugin options. In this article, we have selected ‘Smush’ as a popular plugin option to consider.
Smush (and Smush Pro)
Smush and Smush Pro are excellent WordPress plugins. They are highly-rated and popular options to serve appropriately scaled images. Both Smush and Smush Pro save you a lot of time while optimizing your images.
Smush works quite efficiently. Each image is scanned and set to the proper size by eliminating unnecessary data along the way.
You can select an option that allows you to automatically resize each image to meet your WordPress website’s specific dimension requirements. Once the process rounds up, each image gets stored in your Media Library.
Some of the benefits of the free version of the ‘Smush’ plugin are:
- The plugin is quite robust. It can ‘smush’ up to 50 images in one go.
- Smush can compress images in both local directories or those stored on cloud-based software.
- It optimizes unlimited images, but with a maximum limit of 5 MB per image. The premium version (paid version), called ‘Smush Pro,’ has a much larger per image maximum limit.
Smush & Smush Pro Features:
1.Incorrect Size Image Detection
Both Smush and Smush Pro feature a ‘wrong size image finder,’ which you can activate through the plugin settings. This option will enable you to quickly see which images are slowing down your site and keeping you from getting a perfect 100 on your Google PageSpeed test.
It’s an incredibly user-friendly feature, whereby smart tips for scaling your images will be suggested alongside each highlighted image. Only admins will see the highlighted image and error message.
# How to enable this feature in Smush & Smush Pro?
- Go to plugin settings.
- In the Image Resizing section, use the toggle to enable “Detect and show incorrectly sized images,” and save your settings.
- Now you’ll be able to see incorrectly sized images on the front end of your site.
2. Auto Image Resize
You can save up on hosting space by preventing yourself and others from uploading huge image files on your website.
# How to enable this feature in Smush & Smush Pro?
- Go to plugin settings.
- In the ‘Image Resizing’ section, use the toggle to enable “Resize my full-size images.”
- Smush will resize the image to fit the width and height specified by you before uploading it to your media library.
- You are shown the largest size image on your site, and then Smush doubles it for Retina devices.
- You are also presented with the option to keep a copy of the original image.
3. ‘WP Smush Pro’ CDN
Instead of scaling every image manually, you would want to get all your uploaded images to be a perfect size, especially if there are 100s of them. One easy way to bulk Smush is by becoming a WPMU DEV member and getting access to Smush Pro’s CDN.
The essence of Smush Pro’s lightning-fast CDN is image optimization. Lightning-fast delivery of images that are also served up perfectly sized to your users is two primary highlights of Smush Pro’s CDN.
# How to enable this feature in Smush Pro?
- Configure the settings to activate the CDN
- Enable the automatic resizing option, and the CDN will deliver the right size image for you. Your original photos remain untouched.
Serve Scaled Images In WordPress Without Using Plugins
If you’d instead not use plugins, perhaps because your site doesn’t have a bulk of images, then you can opt for manual resizing.
Hence, alternatively, you may choose to serve scaled images without using plugins. Before moving on to the alternative methods, let’s first understand the ‘srcset’ attribute of WordPress.
‘Srcset’ is a native WordPress feature. Although this feature doesn’t fully serve scaled images, it’s worth mentioning here since it helps make your images responsive to different screen sizes.
You will not achieve peak optimization with this feature, yet the ‘srcset’ and ‘size’ attributes together will get you closer to the ideal image size.
It won’t give you the exact size, nor will it cut the excess from bloated images. Hence, it’s not a method you would want to rely upon while optimizing your website completely. For that extra bit of performance required for proper optimization, you would eventually have to perform scaling.
# How does ‘srcset’ work?
The srcset attribute works by offering the browser three different options to choose from. WordPress provides the URL for the image to the browser and gives the browser a list of three images of various sizes to choose from and expect the browser to select the most optimized for that user.
As a result, some waste reduction happens through this process, yet scaling is for proper performance optimization.
Now, let’s look at three effective methods you can use instead of a plugin to serve scaled images on WordPress properly:
1. Crop images in your media library
2. Adjust images in your admin media settings
3. Use an image editor like any of the following:
- The open-source GIMP
- Adobe Photoshop
1. Manually Crop Images in the Media Library
Here are the steps to crop images in the Media Library:
Step 1 – Go to Media > Library.
Step 2 – Click on the image you want to crop.
Step 3 – Click on the ‘Edit Image’ button.
Once the above necessary steps are followed, you’ll be shown details of the image’s original dimensions, and there will be a box that lets you enter your new scaled dimensions.
Step 4 – Scale or crop the image as required.
In this step, scaled images remain in proper proportion relative to the original image. On the flip side, cropping them does not guarantee they are edited proportionately, depending on the chosen dimensions.
To scale an image:
- Type in the preferred width and height and click on the ‘Scale’ button.
- If you choose the crop option, click on the image, and drag it with the mouse button till your desired selected area is visible.
- Release the mouse button to finalize and reveal your selected area.
Step 5 – Click the ‘Save’ button below the image.
There is also an option to input a desired aspect ratio for the image. The aspect ratio can be preserved by holding down the ‘shift’ key as you’re resizing an image. This ratio is the relationship between the width and height of an image. For instance, an aspect ratio of 1:1 signifies a square-shaped image.
2. Adjust Images in your Media Settings
This method of manually scaling your images involves directly adjusting the settings in WordPress.
Here are the steps to adjust images through Media Settings:
Step 1 – Navigate to WordPress.
Step 2 – Go to Settings > Media.
Step 3 – Now that you’ve ended up at the Media Settings page, you can enter the maximum dimension limits when uploading an image to WordPress. You can feed the maximum dimensions for each of the three options WordPress will present to the browser (see above ‘srcset’ section).
In the Media Settings page, you can change the thumbnail’s width and height, and both medium and large-sized images. From there, WordPress takes over by using these dimensions to create scaled versions of the images automatically.
Step 4 – Once you input the dimensions, click Save Changes at the bottom of the page.
These settings may not always prove fruitful in optimizing your images correctly. Hence, we suggest you consider our final recommended method.
3. Use an image editor (such as GIMP, Paint, or Adobe Photoshop)
Using any “offline image editor” is the final method to scale images manually. This is one of the most efficient manual ways available.
# Steps to follow in Photoshop:
Step 1 – Go to ‘Image’ in the toolbar.
Step 2 – Select ‘Image Size’
A pop-up screen will appear, displaying information about the basic dimensions of your selected image.
Step 3 – Scale the image as per your desire before uploading it to WordPress. You can set the width and height as well as the resolution of the image.
# Steps to follow in Paint:
Step 1 – Go to ‘resize’ in the home tab.
Step 2 – Select the ‘pixels’ radio button to edit the horizontal dimensions.
At this point, if the ‘maintain aspect ratio’ box is selected, the vertical dimensions will automatically be resized. If the box is not selected, you will have to do the calculation yourself.
Step 3 – Once you finish adjusting the dimensions, click on ‘OK.’
Step 4 – Save the file in Paint.
Step 5 – Re-upload the file onto WordPress and replace the image with this file.
Through this article, we’ve elaborated on why serving scaled images correctly is paramount to a site’s performance. We have also shared several methods (plugin & manual) by which you can go through the process with ease.
Learning how to serve scaled images effectively is a must. It’s a sure shot way to enable your WordPress site to run lightning-fast.
There are several ways to serve scaled images in WordPress properly. Yet, the task could get perplexing if you have an established site with lots going on, including having to deal with lots of images slowing things down. In that case, using a plugin like Smush Pro will solve the problem in minutes rather than days.
Do you know other helpful tips on serving scaled images on WordPress? Are there plugins you’ve tried to optimize your WordPress site that would further help our readers? If yes, make use of the comment section to share your experience!