Optimize your images, do not let your users download big images for nothing
Images are a big part of what browsers need to download to display web pages.
Even though internet connections have become faster and faster, you do not always have a fast connection, especially when you are on a mobile device in a subway or in some other part of the globe.
And after all, even if your connection is fast, why download 2 MB for an image if you can have the same image by only downloading 100 KB? Be nice to polar bears, save bandwidth.
At Doctolib, we have static illustrations and a huge amount of photos uploaded by doctors to present their profile and their practice. Because two thirds of our patient website users are on a mobile device, image optimization is important for us. Let’s see how we do it.
Static images
Most of our static images are PNG illustrations and SVG icons, but we also have a few JPEG photos. These images are part of our codebase, so they can easily be optimized.
PNG and SVG are lossless data compression image formats but both can contain metadata like information about the software which produces the image, color profiles, element identifiers, comments, etc. Clearly this metadata is useless for your users and can be removed from the file.
To do this optimization without SVG knowledge and risk of breaking something, we use ImageOptim on macOS. This is a free, open-source application which combines several optimizers. You just drag and drop your images into the window to have them optimized.
JPEGs can contain some visual details that are not visible to the human eye. So in addition to the metadata, the weight gain can be substantial. ImageOptim can do these optimizations but I prefer using JPEG mini, I found their compression algorithm impressive.
To avoid adding unoptimized SVG files to our codebase, we use SVGO which checks and lets developers optimize them with a command we’ve reduced to a simple `yarn optimize:svg`.
Dynamic images
Some images are uploaded by doctors, such as their profile picture. We do not have control over the quality, resolution and weight of these images. In addition, these profile pictures are displayed on several screens in very different sizes. They can be found in the search results for doctors as a thumbnail, on the doctor’s profile in a medium size or in its original size without transformation in a slideshow as shown in the following captures with Dr Manhattan, one of our doctors in the development environment.
In this case, to optimize image size we use Cloudinary to make on-the-fly image transformations with a dynamic URL. We can crop, focus on the face of the doctor, scale to a resolution at specific pixel density, compress, change the format, etc.
The original image as you can see above is a 220x300 JPG image which weighs almost 19.59 KB and is used to display the small thumbnail in the search bar and the medium thumbnail in the profile page. After optimization, this image becomes two images that weigh 1.17 KB and 2.22 KB respectively on recent browsers. A reduction by around 16x and 9x. Pretty cool, no?
How was it reduced so much? Because we asked Cloudinary through an URL to:
- Scale down to 40x40 pixels with a pixel density of 2, so the final image dimensions are 80x80 pixels.
- Compress the image to a visual quality acceptable for humans
- Change the image format to WebP because the browser of the user was compatible ( like Chrome, Edge, or Firefox)
To explain how it works, you can see parameters in the image URL:
- q_auto:eco compresses the image
- f_auto outputs the image as WebP if possible. Cloudinary detects through the browser User-Agent that the request is made from Firefox which supports WebP.
- dpr_2 doubles the image dimensions
- w_40,h_40 crops to 40x40 pixels
- g_face focuses on the face
What can still be improved
Some improvements can be done on devicePixelRatio (DPR), whatever the quality of the screen, we always ask Cloudinary to give us a DPR of 2. It doubles the size of the image but it is necessary to have a sharp image on a smartphone or a computer with a Retina screen. But, not all users have this type of screen, so in some cases we can only transform the image and divide the image weight by 2. Because it concerns around 30% of our users and because these users are on desktop so with a stable Internet connection and it needs to change how we display images by using the Picture HTML element, we have not made this improvement for the moment.
