Felix Häberle

3 easy steps to fix slow image loading

Frontend Development, 

Thinking & Design

Loading images on the web can be a pain, especially if you are doing a website mainly for mobile devices. Because wireless connection is used in such cases, the transfer speed is often slower compared to a wired connection and therefore the content loads slower.

For text, you might not be able to spot a difference because text gets really fast transported over the web and only weights a few KB's, where images, especially those which have a high resolution, often tend to have a really big file (multiple MB's) size which loads slowly. The easy way would be to exclude the high resolution images, but in most cases, we can't reduce the amount of high-res images so we have to deal with them. Don't worry, I'll show you how to master big images on your website in a minute. ⏱

Tools to the win 🏆

First of all, make sure the images you want to include in your webpage are minimized/compressed. You can accomplish this task with a lot of tools, some of them also guarantee that the overall quality of the image does stay the same. That said, it's good to know how and where the image should be used, because you should optimize it for the use case. For example, a picture which is only displayed as a little icon (possibly 20px/20px) doesn't need to have a resolution of 2000px/2000px because that would be too big. On the other side, a big full-width image shouldn't be that small to keep a nice resolution on the image.

To tackle this task, I can recommend the following sources based on your needs:

🛰 Online image minimization/compression:

📦 Integrate the minimization task into your build/preprocessing (recommended):

Make sure loading images the right way 🔍

Second, a fundamental part of making your loading faster and better is loading the images the right way. Eventually you have heard of lazy loading things, that's when you interrupt the browser to load things immediately and start it over later usually with JavaScript. Lazy loading is used on sites where there are big amounts of images and you can't afford loading all images at once because then your site would take really long to load or eventually would never stop loading (because of you being bored and cancel).

To fix this problem, lazy loading only loads images you specified (at first) and loads the other part after an action is happening e.g. the image gets scrolled into the view or some other interaction is happening. 🕹

A few lazyload libraries:

  1. https://github.com/verlok/lazyload (recommended)
  2. https://github.com/tuupola/lazyload
  3. https://github.com/aFarkas/lazysizes

Another solution to load the right image is choosing the right file for the right viewport. There are often images on websites which could be smaller on mobile devices because they scale down on small viewports anyway and could therefore also be smaller in size. To load different images based on the viewport/screen size, you need to monitor the viewport and set in the right image source. 🖼📱

The standard <img> element traditionally only lets you point the browser to a single source file:

HTML

<img src="nice-image-900.jpg" alt="This is a very nice image">

For setting up responsive image loading we can use two new attributes — srcset and sizes — to provide several additional source images along with instructions to help the browser pick the right image.

HTML

<img srcset="nice-image-340.jpg 340w,
             nice-image-500.jpg 500w,
             nice-image-900.jpg 900w"
     sizes="(max-width: 340px) 300px,
            (max-width: 500px) 450px,
            900px"
     src="nice-image-900.jpg" alt="This is a very nice image">

At first, the srcset and size look complicated, but they aren't that hard to understand. To dive right in, the srcset sets the various images and defines the real widths for them (e.g. 340w ). To get the real width of the image, you can inspect the image informations on your computer. The sizes attribute describes which image fits best for the current viewport.

At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 480px) media condition will be true, and so the browser chooses the 450px slot. The nice-image-500w.jpg will be loaded, as its inherent width (450w) is the closest to 500w.

Design with image loading in mind 💡

Third, the best solution to prevent slow image loading or loading problems in general is to reduce the overall amount of images which you load initially on your website. The more images you load the slower your site will get and the tips I gave you above are only in the case you can't dispense with it.

Designers tend to do more vector graphics such as SVG these days because SVG files ares basically text and therefore load really quickly. Also, you can modify SVG code to a certain point in your code after loading them which is pretty neat in some cases. Thus, it can be said that SVGs should be used wherever it is possible and images are only used where necessary. Another part of the image loading solution is choosing the right image format in general, a good read about this can be found here.

Happy coding and improving your images to be lighting fast! 🚀💫

2021 Update

The world is changing pretty fast and so does the browser functionality. There is a brilliant infographic by Addy Osmani which covers the state of the art way on how to use the latest and fastest image features of the browser.

loading