Website

Improving Website Performance – Serving Scaled Images

Using oversized images can negatively affect your website’s speed and performance. Fortunately, it’s possible to change them by serving scaled images. Keep on scrolling to find out how!

What is a Scaled Image?

A scaled image is an image whose size matches exactly with the size defined in CSS or HTML. Unfortunately, many webmasters do not really pay attention to it.

Let’s say a user decides to use a 500 x 500 pixels image for a 50 x 50 thumbnail. As a result, the browser has to download and scale the picture down before displaying it to the visitors. This process is inefficient and can slow down your website loading time.

However, this issue won’t happen if you serve scaled images. Smaller images use less space and speed up your site, which in return will improve your site’s SEO and ranking.

How to Serve Scaled Images the Right Way?

Now it’s time to learn how to serve scaled images on your website.

Step 1: Analyzing Your Website

First thing first, we need to find images from your site that need to be rescaled along with their proper dimensions. To do so, we will use GTMetrix.

  1. Access GTMetrix, enter your site’s URL and click Test Your Site.Analyzing the Website Using GTMetrix
  2. Once it is finished, navigate to the Page Speed tab and click the Serve scaled images section.
  3. Copy the images’ URLs and note down the recommended sizes.GTMetrix Serve Scaled Images Test Result

Step 2: Rescaling the Images

The next move to serve scaled images is by rescaling the oversized pictures. There are tons of image editing tools available, however, in this tutorial, we’re going to use PicResize.

  1. Open PicResize and click the From URL button.PicResize Resizing Tool
  2. Paste the URL of the image you want to edit, and select Continue to Edit Picture.
  3. Choose the Custom Size option from the drop-down menu and enter the recommended size.Custom Size Option
  4. Hit I’m Done, Resize My Picture! and save your image by clicking the Save to Disk button.
  5. Rename the images back to their original names by removing rsz_ from the file name.

Step 3: Replacing the Images

As you expected, the last thing we need to do when serving scaled images is to replace those old media uploads. To do so, we’ll utilize Enable Media Replace.

  1. Install and activate Enable Media Replace from the Plugins menu.
  2. Navigate to Media -> Library and change the layout from Grid to List.WordPress Media Library Viewing Layout
  3. Click the Replace Media option, next to the oversized images.Replacing WordPress Media Using Enable Media Replace
  4. Press the Choose File button and select the scaled image you’ve saved.
  5. Set up the Replacement and Date options to your liking, then click Update.

That’s it! After serving scaled images, your site’s results will look like this:Serve Scaled Images Section on GTMetrix

Conclusion

In this short guide, you’ve learned how to serve scaled images. You only need to scan your website using GTMetrix, and then rescale and upload the oversized images.

We hope this article was helpful. If you have any questions, share your thoughts in the comment section below!

About the author

Gediminas B.

Gediminas was a passionate content writer and SEO geek at Hostinger. He started his journey at customer support and aims to use his gathered knowledge to create the most epic content the world has ever seen. From WordPress to server management, there's no topic he can't cover! He also likes cats.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!