{"id":575,"date":"2021-08-25T13:56:12","date_gmt":"2021-08-25T13:56:12","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/websiteimproving-website-performance-serving-scaled-images\/"},"modified":"2026-03-09T19:19:09","modified_gmt":"2026-03-09T19:19:09","slug":"how-to-serve-scaled-images","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-serve-scaled-images","title":{"rendered":"How to serve scaled images on WordPress to improve your website\u2019s performance"},"content":{"rendered":"

Website speed is essential for its success since 47% of visitors are likely to leave a website that takes more than two seconds to load.<\/p>

While several factors affect your website performance, images require special attention. In addition to using images that adapt to different screen sizes, you should serve scaled images as well.<\/p>

Serving scaled images involves optimizing images by refitting them into the perfect size – not too small, not too large. Using correctly scaled images will positively affect site speed and performance, improving your site’s SEO (Search Engine Optimization).<\/p>

This article will explain how to serve scaled images on your WordPress website. We have also included plugin recommendations to help you serve scaled images automatically.<\/p>

\"\"<\/a><\/figure>

\n\n\n\n\n<\/p>

What is a Scaled Image<\/h2>

A scaled image is an image adjusted to fit the exact dimensions that are required on the website.<\/p>

If you use a small image to fill a larger area, it will be blurry when you scale it up. On the other hand, if you use oversized images, browsers will shrink them to fit the given dimensions, but the image sizes will remain unnecessarily large.<\/p>

\"A<\/a><\/figure>

For example, if you use a 500 x 500 px image for a 50 x 50 px thumbnail, the browser has to download and scale the picture down before displaying it to visitors. This process is inefficient and will slow down the website loading time.<\/p>

However, this problem won’t occur if you optimize your images<\/a> by serving scaled images.<\/p>

How to Serve Scaled Images<\/h2>

Now it’s time to learn how to serve scaled images properly on your WordPress site. There are two ways to do so – manually or using a plugin. This section will show you how to scale images manually.<\/p>

Step 1: Analyze the Website<\/h3>

If you wish to experiment with a handful of images before fully optimizing the entire media library, try scaling images that appear repeatedly on multiple pages on your site. For example, the site logo or header image.<\/p>

First, you need to find images on the site that need to be rescaled and the proper dimensions to use. To do so, we will use GTMetrix<\/a>.<\/p>

    \n
  1. Open GTMetrix and enter your WordPress website URL. Click the Test Your Site <\/strong>button.<\/li>\n<\/ol>
    \"GTMetrix<\/a><\/figure>
      \n
    1. Once it finishes analyzing your site, go to the Structure<\/strong> tab and click the Properly size images<\/strong> section.<\/li>\n<\/ol>
      \"GTMetrix<\/a><\/figure>
        \n
      1. This section will show which images in your site need to be optimized. The Potential Savings<\/strong> column will display the potential savings as a result of serving scaled images. Save the images’ URLs for later.<\/li>\n<\/ol>
        \"GTMetrix<\/a><\/figure>

        Step 2: Use the Inspect Tool to Find Out the Maximum Display Size<\/h3>

        WordPress already includes a native feature for image optimization called srcset<\/a>, which makes your images responsive.<\/p>

        srcset creates several sizes for each image uploaded to the site. For example, if you upload an image that is 2000 x 2000 px, WordPress will automatically create copies in several other sizes, such as:<\/p>