A Guide to Optimizing and Serving Scaled Images

Serving scaled images is a great way to improve your website’s performance, yet it is often overlooked. In this guide, we will go over what a scaled image is, the benefits of serving scaled images, and how to serve them in WordPress.

What exactly is a scaled image?

Images should be a top priority if you’re looking to improve page speed, conversions, and sales since they can use up a lot of file space if they’re oversized. Images on the web have to be just the right size, not too big and not too small. If the image is too small and is scaled up, it will become blurry and unattractive. If the image is too big, the browser will shrink it so that it is the right size, and while this doesn’t affect how the image looks, it will add to the file size of the page.

While you can’t see a change in quality for images scaled down by the browser, there is extra weight on the image files which can be easy to overlook. However, serving an image that is too large can be hurtful. For example, when an image is too large, it forces the browser to perform additional server requests. So, rather than delivering a webpage as fast as possible, the browser has to take the time to resize the image, especially on image-heavy webpages.

For example, if you upload a picture with the dimensions of 500 x 500 and use it as a thumbnail of 50 x 50 using HTML or CSS, the browser will first have to download the large file and scale it down before displaying it. It would be more efficient to resize the image to 50 x 50 so that the browser doesn’t need to take the time to download and resize the image.

A scaled image is an image that has been resized for the exact dimensions you need. Scaling will preserve the image dimensions, rather than alter the proportions (like cropping).

What are the benefits of serving scaled images?

When an image is properly scaled, it can improve the performance of your website on computers, smartphones, and tablets, as well as save you lots of data. Because scaled images take up less space, they will load a lot faster and reduce the amount of resources used.

Serving scaled images is recommended for website optimization. The better your score is, the better your SEO, and the higher your website’s ranking on Google will be.

How to Serve Scaled Images

Step 1 – Detecting the incorrectly sized images

1. Go to Google PageSpeed Insights
2. Enter your webpage URL
3. If you have any improperly sized images, you can click on the dropdown next to “properly size images.” This will give you the links to the images that need resizing.

Step 2 – Inspecting your images

Once you know which images need to be optimized, you can head back to your site in Google Chrome.

Right click on the image and choose Inspect.

When hovering over an image in the inspector, a container size will pop up for the image.

Resize your image in WordPress and re-upload (see Step 3).

Step 3 – Resizing your images

Manually Crop Images in the Media Library

1. Go to Media > Library
2. Click on the image you want to crop
3. Click Edit Image to open the editing interface
4. Scale or crop the image as needed

Depending on the original image’s dimensions, keep in mind that if you scale the image to the width you need, the length may be shorter or longer than what is specified by the theme you’re using.

Choosing to scale your image means that it will still retain the proper proportions relative to the original image. If you choose to crop your image, it may not end up being proportionate depending on the dimensions chosen.

Scale your image by inputting the desired width and height and then clicking the Scale button. If you want to crop your image instead, you can click and drag your mouse over the image and select the area you want visible, or enter the desired aspect ratio (this is the relationship between the width and the height). If you want to preserve the aspect ratio, you can do so by holding down the shift key while resizing your selection.

You can also click and drag the area you have selected to move it to the part of the image you want visible. If you decided to crop your image by selecting an area with your mouse, click on the crop icon above it when you’re done.

After you are done with that, under Thumbnail Settings, choose what you’d like your changes to apply to. When you’re done making changes, click on the Save button.

You can also resize your images while editing a post or a page by clicking the Add Media button above the editor. Click the Media Library tab and choose from the listed images. Click on the Edit Image link to access the same editing interface as seen above.

Media Settings

The default image sizes in WordPress are thumbnail, small, medium, large, and full-size. However, full-size refers to the original dimensions of the uploaded images and cannot be changed under Media Settings.

To resize the default image sizes, go to Settings > Media and enter the width and height for the image size you want to change. When you’re done, click Save Changes.

Please keep in mind that these sizes can be used in numerous places in your theme, so you may end up editing some images that you don’t want resized.

Edit Images in Paint

1. Once you’ve opened up Paint, click on Resize under the Home tab
2. A popup box will allow you to enter in the new desired dimensions
3. Select the Pixels radio button and edit the horizontal dimensions. The vertical dimensions will be resized automatically if the Maintain aspect ratio box is checked (which is what we want)
4. Once you’re happy with your adjustments, click OK
5. Save the file in Paint
6. Upload the new image to WordPress and replace the old one

Conclusion

In this guide, we’ve gone over what scaled images are, the benefits of using scaled images, and how to serve scaled images. Not only will serving scaled images decrease the loading times for your webpages, but it will also help you rank higher on search engines.

While no formal knowledge is needed to serve scaled images, if you need help with or have any questions about image optimization, please feel free to reach out to us!