Make your site faster handling images like a boss

Images are mandatory to any website, but they also require most of the bandwidth causing sometimes to slowdown the whole site. As compared to text, images are often requiring around 20 times more data than the site itself. We will show you different techniques that you can apply to your website in order to reduce as much as possible the effects of images loading on your website. Let’s see the two main types of images that we can use:

 

Pixel-based images

Most images that we see on most of websites are pixel based, the formats are the well-known bmp,jpg,png,gif…  

This kind ofimages are stored in a map of points (pixels) where each point has its colour. The colour of a point (or pixel) requires 3 bytes, one per primary colour (red, green and blue) so called RGB

Pixel based image
Figure 1.- Pixel-based image

Looking at the example of figure 1, we will say that this is an image of 7x10 resolution (7 horizontal and 10 vertical pixels). To store this image, we will need 210Bytes (7x10x3 bytes). As our image map has two dimensions the file size increases exponentially when increasing the resolution. In order to see the figure 1 image properly on a desktop we will most probably need a resolution of 700x1000 and the resulting file will be around 2.1MB without compression (we will touch base on compression later on)

 

Vector-based images

This type of images is becoming more and more popular since few years but still they are not as popular as pixel-based. The most used format is svg. Vector-based images store the image in vectors and not pixels and is the job of the navigator to represent the vectors on the screen

Vector based image example
Figure 2.- Vector-based image

 

Figure 2 shows a vector-based image. The image is stored in vectors that represents the picture we want, and these vectors are written in a text format called XML. In the case of our Figure 2 image, the image will take less than 1KB and the big advantage is that it will display perfectly in any screen size as vector-based images are not dependant on resolution. The drawback of vector-based images is that we cannot use it for images like photos but only for drawings (sometimes very realistic like in Figure 3)

 

Vector image complex
Figure 3.- Complex vector image

 

Image compression

This is the first technique that you should consider on your website as is easy to put in place. Any pixel-based image can be significantly reduced by applying compression. The king of compression is the JPG format that everybody knows and that allows big data reduction trading quality against size. Our pixel-based Figure 1 image of 2.1MB will most probably take around 20KB or less after compression

 

Multiple image resolutions

As we saw previously, the image resolution has a huge effect on the quality of the image displayed. It does make sense then to have the same image stored in different resolutions and present the right resolution to the right support. For example, if we are displaying a full screen image on a mobile phone a resolution of 400x400 might be enough, while the same image in a desktop should be presented in a resolution of 1000x1000. If we only have the 1000x1000 resolution image, it means that it will be displayed correctly on all screen sizes, however on a mobile phone we will be sending too many data. In addition, the mobile phone might not be connected to a high-speed network so the loading time will be too slow

 

Use vector-based images when possible

Vector-based images have no dependency with screen size and are almost always considerably smaller than its equivalent pixel-based, it makes sense then to use them as much as we can. There is many software out there to create vector-based images, for making trials we recommend a quite complete and free software called inkscape

 

Load images only when required

If we don’t do anything, when we enter on a website page, all the images that the page contains will be loaded (even the ones at the far bottom of the page that maybe our visitor will never get into).

The technique is so called “Lazy loading” and mainly loads the images on-demand when the visitor scrolls and the image appears in the viewport. The big advantage is that when we load the page we will only load few images and hence accelerate the page loading time and when user scrolls images will be loaded on-demand.

 

kubiiks uses a combination of all the methods allowing us to provide a unique user experience

 

Created : 01-Apr-2020

Discover the last web technologies

You will receive an email per month explaining different topics and features of web apps

Personal data usage terms and conditions