Lazy Loading And Progressive Loading: Taking Image Optimization Further Up

Visuals play important roles in websites. Their presence helps improve conversions, user experience and increase engagement.

Images compromise more than two-third of a website's bandwidth. Because images dominate page weight, image optimization can have a significant effect.

For the best user experience, each image you have on your website should be enhanced and optimized to meet viewing context. This includes adapting the image to fit the layout of the page and selecting the optimal quality and encoding settings.

Since web design should have speed in mind, optimizing images include optimizing them for different browsers, devices and bandwidth.

While there’s almost nothing better than an ideal image to draw the eye to where you want it to go, images have their own downsides: the more you're utilizing images for visuals, the more costly you have to maintain your website. Large number of images, although they've been optimized for size, can still put a heavy load to your website's server.

While it makes sense that a smaller image file size will result in faster load time, less bandwidth usage and a better user experience. However, if you reduce the file size too much, and image quality could suffer and impair user satisfaction.

To anticipate this, there are two common solution: lazy loading and progressive loading.

Lazy Loading

Lazy loading images

Lazy loading is a way for your website to not load content until users scroll down far enough to see it. This practice can not only save a lot of bandwidth, as it can also speed up your website by margins.

So for example, you have images that are located below-the-fold. When users first visit your page, they'll usually land on the top part of the page (above-the-fold). If your website uses lazy loading on its images, the images that aren't yet seen by users (below-the-fold), won't be loaded.

This will save some precious loading time and preserve bandwidth.

Lazy loading typically use JavaScript to see the space where the image will load within the viewport. If the image enters the rendered area, JavaScript will fire up to load the image.

Progressive Loading

Progressive loading image

Progressive can be a great way to accommodate lazy loading. It works by rendering an image in low-resolution, and progressively enhances itself over time. There are two ways progressive images can be implemented. The first is to use encoding, and the second is using placeholders.

Major browsers can use load images progressively. They can render low-resolution approximations of progressively encoded images to screen, long before the full file has been downloaded.

Common website image formats such as .jpeg, .png and .gif can all be progressive images. But they use different form of encoding.

Placeholders don't actually make images to load faster. But they can help user experience as they are simply telling users that images are on their way. Placeholders are common on websites that use a lot of images.

Examples of placeholders include:

  • Rendering an empty space that match the dimension of the image to be loaded.
  • Having an icon to represent the content that is yet to be loaded.
  • Solid color that is similar to empty space, but filled with color.
  • Low-resolution image which is small in size and blurry. The image will transition to the full image when the original quality image is ready. This technique can be combined with responsive and lazy loading to make sure than users' browser only download images when they need them, without sacrificing experience by much.

Summary

Images take two-third of a websites' bandwidth, and for that reason you should be optimizing them matter what. More images means more bandwidth, and more bandwidth is more money for you to spend.

Before optimizing your image for lazy loading or progressive loading, you still need to optimize your images as much as you can. After each and every images on your website are optimized, then you can decide how much you can rely on lazy loading and progressive loading.

Both image loading techniques tend to rely quite a bit on JavaScript. This is where you should make sure that the scripts are all working and in place. A faulty implementation of JavaScript can break your entire site. And in a number of reasons, like poor connection, browsers that don't load scripts, slow devices, outdated software and more, can also make JavaScripts to not work properly (or not even loading at all).

To anticipate this, you can implement fallbacks.

If you can optimize your images, to then load them lazily and/or progressively without any necessary hiccups, your site will definitely feel faster. Visitors of your website will love the speed and experience, without them knowing the reason why.

Further reading: Improving Your Server Response Time: Every Millisecond Matters