With internet speeds constantly increasing, smartphones becoming the primary way to get online, and people’s attention spans getting shorter than ever, it is absolutely crucial that your website loads quickly. Visitors will not hesitate to click the ‘back’ button and Google has slowly made loading times one of the most important ranking signals it uses. 

At the same time, users have come to expect stylish, high-quality images from any website they visit. They don’t just want to find the best information. They want the best information in the most enjoyable package. 

This creates a catch-22 for website owners. Users want to see a page filled with great images, but they don’t want to wait for it. Unfortunately, these high-quality pictures have the tendency to slow down how quickly websites load. 

Thankfully, there are ways to mediate this by optimizing your images to make loading your web pages as efficient and quick as possible – as Alan Kent, Google Developer Advocate, shares in a recent video:

The video gets pretty in-depth at times and leans into technical details, so we will try to collect the most important tips and info below:

Google’s 6 Tips For Optimizing Online Images

1. Eliminate Image Cumulative Layout Shift (CLS)

Don’t let the jargony name intimidate you. You have no doubt encountered CLS before, and it probably frustrated you.

CLS is where text or images move as each individual component loads. Because of this, you might have text which refuses to stay in place as you try to read it, have new images popping into place where a link was visible seconds before, or potentially open an entirely different page because a link appeared right where you were trying to swipe. 

Though this issue can affect any type of content on a webpage, images are frequently a leading culprit because of the amount of space they fill on a page. 

2. Keep Your Images Only As Large As Needed

It can be tempting to upload images in the largest size possible, to guarantee every little detail will be included without pixelation or artifacting. Some web designers see this as “future-proofing” their site or ensuring the best quality no matter how large an image is shown. 

The problem is that this can be overkill. Even when rendering an image for smaller resolutions, browsers have to download the original image and compress it to render correctly. This slows things down, as larger images take a longer time to be downloaded and rendered in the proper size for the display it is being shown on.

The complication is that displays can range wildly in size and resolution – from tiny smartphones to gigantic monitors. That makes it hard to identify exactly when an image becomes “too large.” 

The easiest way to find this out is by checking out the Opportunities section in the PageSpeed Insights report, under ‘properly sized images’. Here you’ll see which images are larger than they need to be so you can replace them with more properly sized alternatives.

3. Use The Best Image Format

Which file format you choose to save your images in might seem like a minor choice, but it can have major effects on loading speeds. At the same time, choosing the right image format isn’t always as simple as choosing the one which outputs the smallest file.

While formats like JPEG or webP tend to deliver smaller file sizes from the same initial image, they do so by compressing the image. This compression subtly degrades the quality of the image to minimize file size. 

On the other hand, larger file formats like PNG can preserve fine details to maintain the original quality of an image, though this results in larger files. 

In many cases, your visitors may not notice the difference between a PNG or JPEG, making the smaller file the obvious choice. However, more complex images or very large images may look noticeably worse in small formats.

To identify images that may not be in the most efficient format for your site, check out the ‘serve images in next-gen formats’ section of the PageSpeed Insights report.

4. Compress Images Properly

While file formats have a big impact on how large your image files are, most formats allow you to dictate just how much compression occurs. If you’d like, you can prioritize preserving detail while receiving a slightly larger file, or you can prioritize getting the smallest file at the cost of the image quality. 

To figure out what is best for your website, you can explore the ‘encode images efficiently’ section of the PageSpeed Insights report. Here, you’ll find details about images that may benefit from being compressed and how much this might shrink image files. 

5. Cache Images In The Browser

Caching is a process browsers use where they temporarily store images or details from your website to s[eed up the loading process on related pages or if they return to your site. 

If you do this, however, it is important for you to tell the browser how long it should keep these cached images This is done through an HTTP response header containing guidance on how to handle cached files and images. 

If you’re unsure whether you’ve properly configured this header, you can also find details about this in the PageSpeed Insights report, within the ‘serve static assets with an efficient cache policy’ section. 

6. Correctly Sequence Image Downloads

By default, web browsers wait to load details until they are absolutely needed. This is a practice called “lazy loading” that allows browsers to focus on the details you’re most likely to be focused on at the moment. This is not always the best process for loading larger files like images or videos, though. 

To get around this, Google recommends establishing the sequencing order some parts of your site are downloaded and rendered by browsers. 

Specifically, Google recommends using the following sequencing order:

• “Hero Images” at the top of the page
• Above the fold images
• Images just below the fold

After this, Kent says most other images can be lazy-loaded without an issue. 

Again, you’ll be able to find an assessment of how efficiently you are loading images on your website within the PageSpeed Insights report, under ‘defer offscreen images‘. 

For more, be sure to watch the 14-minute long video above or explore more SEO news and tips here.