Why Images Should be Optimized for Page Load Speed

It is an SEO best practice to keep web page image filesizes as small as possible as images tend to take up the largest portion of total bytes transferred. If a site does not have properly optimized images, the site may not be performing as well as possible. According to a study conducted by Google, Page Load Speed is one of the biggest factors in why users leave or “bounce” from sites. Page Load Speed is now known to be an important organic ranking factor in the SERPs.

In July of 2019, Google announced that it was moving to Mobile-First Indexing. This means that Google is ranking websites based on the mobile version of the website as opposed to the desktop version. Due to this change, it is important to have a fast website because mobile devices experience considerably longer download times due to slower cellular speeds and processing power. AVX Digital has had great success through past marketing initiatives, by improving a site’s page load speed we have been able to increase user behavior metrics and improve the conversion rate of sites across a variety of industries.

How to optimize images for page load speed

Running Google’s PageSpeed Insights test evaluates many factors and scores a page’s speed from 0-100. Properly optimizing the images on a site can have one the most profound effects in improving your site’s speed score.

Here are the top ways to optimize your images:

1. Efficiently encode images on your site.
2. Defer offscreen images.
3. Properly size the images on the website.
4. Implement srcset attributes on your website.

Efficiently encode images

Efficiently encode images by running images on the site through compression software to decrease their file sizes. Correctly encoded images can have dramatic, positive effects on a site’s performance and load speed.

There are multiple ways to compress the images on a site.  In the example below, we downloaded the image directly from the site and ran it through an online image compression tool. The largest image on the page required 11,340 KB to download. Google’s PageSpeed Insights test tells us that this image has a potential size savings of almost 99%.

We were able to reduce the file size of this one image by 92% without negatively impacting the quality of the image.

After compressing this single image and running the page back through Page Speed Insights, we were able to see a 10 point improvement in the mobile load score.

After compressing a site’s images, the next step is to defer all the images that load below the fold.

How to defer offscreen images

Deferring your offscreen images should often be the second step in image optimization for page load speed improvements. The easiest way to defer these images is by downloading a plugin to lazy load all the images that load below the fold on your website.

Offscreen images are the images that load below the fold on a webpage. The fold refers to the bottommost part of the page that users see without scrolling down when the page loads. By deferring or lazy loading below the fold images, the webpage loads the images as needed while scrolling down the page, increasing the Time to Interactive for both users and Google’s bots.

Properly size the images on your website

One of the most important on-page image optimizations that can be made on a site is properly sizing images to fit their containers. This means that if you are using an image on your page and that image is shown to users in a 500×500 px container, that image should not be saved in the backend as a 2000×2000 px image.

In the example above the image is actually 1200×540 px (intrinsic) but on the page where it is shown, it is served in a container that is only 375×169 px. This container is shrinking this image by more than 68% of the image’s original size.

If a site has several of these overly large images, the site’s speed is being significantly impeded due to the website having to load a larger filesize for each image.

Google’s Best Practices state that:

“Ideally, your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.”

This is not always feasible though, as a site might need to use the same image on multiple pages and these different pages might require the image to be shown in different sizes. We recommend shrinking the image to, at most, 25% of the image’s actual size. This process allows for more leeway in how a site can use the images.

The best way to properly size the images on a site is to download the images off the backend of the website and to manually resize them so that they can fit the containers that actually house the images on the site. This can be slightly time consuming, but it will have a tremendous impact on the site’s load speed.

After resizing the images as mentioned above, you might be wondering how to show the correct sized images to both mobile users and desktop users as the sizes of their screens are inherently different. This question leads to the next step involved in image optimization for page load speed.

Implement srcset attributes on your website

Srcset attributes are lines of code that, when used correctly, allow you to designate different sized versions of the same picture to be used based on the size of the user’s screen. These attributes allow you to improve your site’s page load speed across the different devices used to view your sites. This includes mobile devices, tablets, and desktops.

The effects from these attributes are most noticeable when viewing a banner image on a site, since banner images are built to span the whole screen of the device being used to view them. If you have a desktop with a monitor that is 1800 pixels wide it is best to use an image that is slightly larger than that screen’s size. If the user is using a mobile device such as an iPhone X where the screen is only 375px wide, it would not be recommended to use the same image for the mobile device as this will slow down the site’s page load speed due to the time it takes to shrink the larger image.

Implementing srcset attributes requires 3 different steps.

1. Determine the different sizes of the viewports to be used in each directive.
2. Save the images on your site in the same size as the viewports.
3. Add the srcset attributes to your site’s images.

Choose the different sizes of the viewports to be used in each directive.

To choose the different sizes of the viewports that will be used in a site, it’s best to think of the different devices used to browse your site. We recommend using at least three different attributes to match the three types of devices most commonly used. These devices are desktops, tablets, and mobile devices. You can go more in depth when implementing these attributes to include different variations of different sized mobile devices such as viewports for the iPhone 8 vs the iPhone 8 Plus.

We reviewed data in Google Analytics and found that the below viewports are the most common among visitors to the website.

By different srcset attributes that contain properly sized images for each of these viewports you can increase the page load speed for each of the different devices.

Save the images on your site in multiple sizes for use by the different sized screens viewport.

After choosing the viewports that your attributes will include, the next step is to save multiple versions of the images being affected by these attributes. This is the same principle as mentioned above in the properly sized image section.

The best way to do this is to download the image from the site, resize the image, then add it back to the backend of the site where it will be used for the final step in this process.
It’s also helpful to name your image with its dimensions for easy reference. For example:

• Cute-puppy-360px.jpg
• Cute-puppy-1920px.jpg
• Cute-puppy-1366px.jpg
• Cute-puppy-1440px.jpg

Add the srcset attributes to your site’s images.

The final step after choosing the viewport sizes to be used and duplicating your images into different sizes for each viewport is to add the necessary code to the site so that users’ devices will be able to choose the correctly sized image for that device’s screen.

The image above represents srcset attributes that have been added to a site, these attributes allow a website to load the correct sized image for users no matter the size of their screen. The screen size for each image to be loaded is marked in the same color as the image that is loaded for that screen’s width.

The text marked by the red box represents both the image and screen size required to load that image. Therefore if a screen is larger than 1200 px wide the image that is marked by the red box will be the image that is loaded for that user’s screen. This is indicated by the min-width media condition. Since there is no upper limit set, any screen that is larger than 1200  px wide will use this image.

Notice how the text marked in the purple and green boxes both use a max-width media condition. This marks the screen’s upper limit to load these images.

Since both of these images use a max-width media condition and the image in the red box uses a min-width condition, it sets the upper limit of 1199 px wide and lower limit of 381 px wide on the screen size required to pull the image in the purple box. Normally tablets and smaller laptops have screen sizes within this range.

The text above marked by the green box has a max media condition of 380 px. This means that the image marked in the green box will be loaded when a screen is less than 380 px wide. Screens that are smaller than 380 px wide are normally mobile phones. For example the IPhone X is 375 px wide.

To simplify this means that screens larger than 380 px wide and smaller than 1199px wide will pull the purple image.

In Summary

Google’s PageSpeed Insights test reviews many factors when grading a site. Properly optimizing the site’s images by using the steps discussed above can have dramatic effects on your site’s performance and improve not only your load speed but also increase user engagement.

While optimizing your images is an integral part of improving a site’s page load speed score, this is only a single facet of what can truly be done to optimize the images on your site. Contact AVX Digital today to see how our SEO marketing strategies can improve your site’s traffic and increase conversions through our omni-channel strategies.