5 Steps To Speed Up Your Image Heavy Website

Images are a key component of every website. According to HTTP Archive images make up for more than 60% of data loaded on web pages. Being such a critical component of almost all websites, whether it is e-commerce, news, fashion websites, blogs, or travel portals, image optimization is important, and perhaps the lowest hanging fruit, if you are looking to speed up your image-heavy website.

Optimizing images on your website can be broadly divided into 3 categories — load lighter, load fewer, and load faster. The 5 techniques that we discuss in this article or any other techniques that you come across would most probably fall in either of these 3 categories.

So, let’s get started and look at some simple techniques you can implement today to make significant progress on optimizing your image-heavy website.

1. Resize Your Images

This is a must-have. Resize your images to exactly what is required on your website. And no, I am not talking about resizing using CSS or in the HTML. I am talking about resizing the image on the server and then sending it to the browser. Make sure that you scale down the original image to these dimensions BEFORE sending it to the browser. The resized images are much smaller than the original image and will load much faster than the original image.

In my opinion, incorrect resizing of images is the biggest area of optimization on most websites. And often, we as developers, tend to overlook it. Consider the following scenario: You start out with perfectly sized images for your new website. Over the next few months, your website’s layout changes and so do your image dimension requirements. However, instead of generating new images to meet these new dimension requirements, which is quite a task in itself, you make do with a close alternative.

2. Optimize Your Images

The next step in speeding up your image-heavy website is to choose the right format and quality for every image on your website. JPG, PNG, and GIF are the most common image formats being used currently on the web and are each suited for different use cases. There is another relatively new image format called WebP that combines the best of these image formats, is 30% smaller in size, and is supported on almost 75% of the modern browsers.

Given the huge performance benefits, you should deliver your images in WebP format wherever possible. On the other browsers, you can continue to deliver the original image format. Image quality, simply put, is a measure of how the image looks visually. There is a direct correlation between image quality and image size. Higher quality results in higher image size and, as a result, a slow website.

3. Build For Mobile

In today’s world, if you are serious about running a website, ignoring mobile users is a sin. Data suggests that almost 60% of the global traffic originates from mobile devices. And yes, while mobile phones have gotten powerful and mobile networks have become better, data suggests that mobile data speeds are still much slower than broadband speeds. There are countries or areas within countries where the mobile data connection is flaky. So, it is important to be extra careful when designing web experiences for mobile.

If you have a responsive website for desktop and mobile, you can switch to using responsive images. With responsive image tags, using the `srcset` and the `sizes` attributes of the IMG tag, you can provide the browser with a list of variants for a single image and a definition of the relative image size on different screens. The browser then decides the best image size to load on a particular device from the available list based on the device dimensions and the layout you specify.

4. Load Fewer Resources

Even after you have optimized all of your images, loading too many of them is bound to slow down your website and negatively impact the user experience. I am not advocating that we should use lesser images. But, there are cases where we can avoid using images or avoid loading them upfront.

For example, instead of loading images, you can create buttons, gradients, and other advanced elements using CSS. The other more important technique that you can use is lazy loading for your images. Lazy loading basically means that we defer the loading of images that are not required immediately. Typically, any image that is not visible to the user on his screen or the viewport, can be loaded at a later point in time i.e. when the image enters or is about to enter the viewport.

5. Use A Good CDN For Image Delivery

Once you have solved the size of the images and the number of images that get loaded on a particular page, the next step is to ensure that the images that do get loaded on your website, are loaded quickly. Decreasing the image load time will not only help you get a faster overall page load time and thus a better user experience on your website but would also help you rank higher on search engines.

Content Delivery Networks or CDNs are a set of globally distributed caching / proxy servers. This article by Incapsula does a good job of explaining how a CDN works.