The Powerful Technique to Serve Properly Sized Images in WordPress

Mitigating one of the most common Google PageSpeed Insights warnings “properly size images” can significantly improve the performance score in Google PageSpeed Insight. Google PSI shows you this warning when images on your WordPress website are not appropriate in size.

While adding images is essential to improve the user experience, using improper-sized images can cause a poor PageSpeed performance which leads to a low score on Google PSI. 

Serving images with proper sizes can significantly improve the website’s visual stability as well as loading time, which in turn enhances the user experience.

Here, we will discuss details of the ” properly sized images” warning, including what it is and the importance of saving properly sized images. Then we will guide you on how to serve properly sized images on a WordPress website. 

You can try to solve the issue without the help of any plugin by relying on your coding skills. However, if you are looking for a no-code solution, we would explain how RabbitLoader can help to serve properly sized images effortlessly on the WordPress website when you already have images. 

What Does “Properly Size Images” Mean?

The Google PageSpeed warning “properly size images” indicates that the images you have added to the WordPress website are not appropriate in size. According to Google, the size of an image’s dimension should not be larger than the size it needs to render on the user’s screen. 

Serving any images with larger sizes can negatively affect the website’s PageSpeed performance:

1. The browser takes more time to load the larger-sized image
2. It needs more time to resize the images
3. The visual stability might hamper. 

Every device has an individual screen resolution size. If you add an image larger than the screen resolution size, Google PSI triggers the warning “properly size images”. In such cases, you need to use the responsive image to mitigate the warning.    

The Importance of Serving Properly Sized Images

Before going the the direct solutions first we will discuss the importance of serving properly sized images which includes:

1. Improve The Website’s Visual Stability
2. Improve the page loading time 
3. Enhance The User Experience
4. Improve The Core Web Vitals Performance

Improve The Website’s Visual Stability

If you are not using appropriate-sized images on your WordPress website, it may be one of the most common reasons for the unwanted layout shift when loading the website. This will increase the impact and distance fractions of your WordPress website and harm its visual stability. 

Serving properly sized images can significantly reduce the website’s impact and distance fraction, reducing the layout shift. Hence, your website’s visual stability will automatically increase. 

Improve the Page Loading Time 

Imagine you have added an image of 2500 Pixels, which only requires 800 Pixels to render on a user’s browser. It would increase the page loading time of your WordPress website. If your aim is to achieve a 90+ PageSpeed performance score in Google PSI, you must serve properly sized images. 

Like visual stability, serving properly sized images can also improve the page loading time and help you achieve a 90+ PageSpeed performance score which leads you to be in the green zone in Google PSI.

Enhance The User Experience

As a WordPress website owner, your first priority should be providing a well-functioning website to your visitors. Images are essential for website content. However, sometimes adding an image with an inappropriate size can harm the website’s PageSpeed performance. 

As you already know, serving properly sized images can improve the website’s visual stability and page loading time which results in enhancing the user experience. Hence, the website’s bounce rate would dramatically reduce which in turn leads you to achieve a better conversion rate. 

Improve The Core Web Vitals Performance

Google created Core Web Vitals metrics to determine the website’s PageSpeed performance based on loading speed, visual stability, and responsiveness. 

Serving properly sized images can significantly improve the performance metrics especially the Cumulative Layout Shift (CLS), which provides a score on a website’s visual stability and the Largest Contentful Paint (LCP), which calculates the time of a website’s initial loading speed. 

Improving the performance of CLS and LCP can help you increase the Google PSI score. Let’s see the weight of the performance metrics in the overall PageSpeed score. 

Google considers Core Web Vital metrics an essential ranking factor, so improving Core Web Vital metrics can significantly improve organic Search Engine Optimization (SEO) rankings, which can increase potential traffic to your WordPress site. 

How to Serve Properly Sized Images On WordPress Website?

At this point, you already know the importance of serving WordPress images with the proper size. Hence, if your website is also diagnosed with the warning “properly sized image” in Google PageSpeed Insight, you must serve properly sized images on a WordPress site. 

When it comes to serving properly sized images, there are two ways you can implement it. If you love to explore coding, you can try the solution below. Otherwise, to get an effortless, non-coding solution, install RabbitLoader. We will explain it below. 

Let’s concentrate on how to serve properly sized images in WordPress manually. 

• Use Responsive Images

Using responsive images is the best image optimization strategy for serving properly sized images on a WordPress website. Responsive images can adjust their size attributes, like image width and height, according to any screen (mobile, tablet, and desktop) size. 

Here we are providing you with the syntax that you can use in your HTML file and CSS stylesheets. 

Syntax for HTML file:

<html>

<head>

<title> creating a responsive images </title>

</head>

<body>

<p> creating a responsive image which can adjust its size according to the screen size </p> 

<img src="featured image.jpg" alt="uploaded image" class="responsive">

</body>

</html>

Syntax for CSS stylesheet:

.responsive {

  width: 100%;

  height: auto;

}

Here, in the featured image we set “auto” in the height attribute to maintain the aspect ratio of the image. Please keep in mind that the scaled image should not be larger than the original image. The best practice is max-width instead of width. 

For example: 

.responsive {

 mid-width: 100%;

  height: auto;

}

Also, you can add the maximum width of a responsive image by following the below syntax.

Syntax for CSS:

.responsive {

  width: 100%;

  max-width: 400px;

  height: auto;

}

Serve Properly Sized Images In WordPress With RabbitLoader 

As you can see, manually creating a responsive image can be daunting if you do not wish to tamper with your codes. Thus, many website owners invest in the wrong WordPress plugin. 

Most image optimizer plugins are focused on converting the image format and compressing the images.

As image conversion can’t fix the Google PageSpeed Insights warning “properly size images” they can be encountered again and again, frustrating for a website owner. Choosing the right tool or plugin is essential to fix the Google PageSpeed warning. 

Here, you need the help of RabbitLoader to serve the properly-sized images in WordPress without putting any effort. 

Like other Google PageSpeed Insights warnings such as “Reduce unused CSS”, “Serve images in next-gen formats”, and more RabbitLoader also mitigates the “properly size images”. 

RabbitLoader serves responsive images that can adjust the image size according to the user’s screen size. Hence, by using RabbitLoader, you can easily serve the WordPress images with the right size. 

Thus, if you are also encountering the Google PageSpeed warning “properly size images” and struggling to fix this warning, don’t invest your valuable time into the wrong image optimization plugin. Install RabbitLoader and improve the website performance by serving properly sized images within a few minutes for free. 

FAQ 1: How to Specify the Size of an Existing Image? 

In order to resize the image, you need to modify the HTML and CSS files by following the below code. 

In HTML file:

<img src="large image.jpg" 

     width="400" 

     height="500" />

In CSS Stylesheet:

img {

  width: 400px,

  height: 300px

}

FAQ 2: What are the Next-Gen Image Formats?

AVIF and WebP are the most common types of next-gen formats (also known as next-generation). Here, you can compress the default image size without harming the image quality. 

FAQ 3: What are the Useful WordPress Plugins to Optimze Images?

Several image optimization tools are available such as RabbitLoader, Ewww image optimizer, imagify and many more that you can use for optimizing images.