Big Images. Slow Pages, and how to fix them!

Web developers spend hours researching, testing, and tweaking their code, to make sure a web page works as well as it can. However, the task of choosing and uploading imagery to a content management system (CMS) often falls into the hands of a website content editor, who may not have a technical background.

A content editor’s skills more often than not lie in writing engaging copy and choosing vibrant supporting graphics, but they may lack knowledge or understanding of the technical intricacies of image file formats and compression ratios.

Not knowing much about the impact of image file formats and compression ratios, and uploading images willy-nilly, can lead to page sizes growing by several hundred percent, with load times and bounce rates growing with them.

This is a problem.

It’s well known that slow web pages have higher bounce rates, and that site speed is part of Google’s ranking algorithm.

In fact, research from Google released a few years ago shows the impact a slow page load time has on bounce rate – see image above.

The bottom line is, the slower your page loads, the more people will leave.

Help is at hand with WEBP

The web is a continually evolving place, and web browsers are improving all the time with support for new and exciting features. One of these such features is an image file format called WEBP.

Most people who work in the digital world are familiar with JPEG and, perhaps to a lesser extent, PNG. These two image file formats have been around for decades and are good for different things. PNG was traditionally best for icons and JPEG for photographs, with JPEG also having an adjustable compression ratio that allows a trade-off between file size and image quality.

The downside is that if a PNG, or a low compression JPEG, is used for a website image, the resulting file can be huge.

This is where WEBP comes in.

As a single file format, WEBP can take the place of both JPEGs and PNGs, and give you a smaller overall file size for the same quality of image.

But what about training those content editors? And what about all those existing images in your media library?

A tool to automate image conversion and optimisation

We do a lot of work here at Codehouse to test new tools and technologies, all in an effort to ensure that our customers can do all the things they want to do, and make use of the latest and greatest technology, so that they have a website that not only looks great but performs brilliantly.

One we have been using with great success as it relates to automating the conversion and optimisation of imagery, particularly for Sitecore websites, is Dianoga.

Dianoga works with the Sitecore media library; its big selling point being that it can automatically optimise any image without the content editor having to do anything.

Web browsers which support WEBP can be served an optimised image in that format, whilst older browsers are served an optimised copy of the original JPEG or PNG. Content editors can continue to upload images to the media library as they have always done, and everything happens seamlessly behind the scenes.

This avoids any problems with images not being compressed properly, and it can deliver huge savings in page load time, especially if your pages are image-heavy.

Dianoga ensures that your Sitecore site is always serving fully-optimised media library images, and is perfect for organisations with content editors who may not be image editing experts.

Working with Codehouse

If you have a Sitecore website, and you think you have an image with large image sizes that could be affecting your web page load time and your bounce rates, or if you’re not really even sure what your page load times are, we can help. Get in touch.