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):
- webpack: https://web.dev/codelab-imagemin-webpack
- gulp: https://github.com/sindresorhus/gulp-imagemin
- parcel: https://github.com/DeMoorJasper/parcel-plugin-imagemin
Make sure loading images the right way 🔍
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:
- https://github.com/verlok/lazyload (recommended)
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. 🖼📱
<img> element traditionally only lets you point the browser to a single source file:
<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 —
sizes — to provide several additional source images along with instructions to help the browser pick the right image.
<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
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
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! 🚀💫
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.