Lesson 8Image optimization and lazy loading
- Notion 47 - The difference between raster & vector images.
- Notion 48 - Select the correct file type.
- Notion 49 - Adjust the quality of an image.
- Notion 50 - Understand image compression.
- Notion 51 - Use CSS sprites.
- Notion 52 - What’s the new WebP format?
- Notion 53 - Tools for image optimization.
- Notion 54 - Review/assessment
Notion 48
Select the correct file type.
Target skills
"Our brains process images 60,000 times faster than text".
"We retain 80% of what we see, against 20% of what we read".
In order to have an efficient web optimization and decrease your environmental impact, it is important to make the right choice of image formats. A bad choice of format has a major impact on the loading of your web page and thus increases your energy consumption.
The most commonly used image formats on the web are JPEG (Joint Photographic Experts Group); PNG (Portable Network Graphics); GIF (Graphics Interchange Format) and Webp.
The JPEG format
This format is recommended for photographs and most images with very broad colors and contrasts. The main disadvantage of this format is that it causes a loss of image. In other words, the more distinct color the image contains, the less compressible the JPEG is. Despite this disadvantage, this format is the most used on the Web because the quality of the images is better than the other formats.
In addition, with the same weight, the amount of information contained in the JPEG format is richer than the PNG format. In this case, the weight is optimized and requires less energy for storage and loading.
PNG format
This format allows you to compress an image without loss of quality and information.
It is the ideal format if you want to put transparency on your images. Note that its compression quality is higher than that of the GIF.
The GIF format
The GIF format allows the transfer of images and has the ability to combine several images in a single file. It has the ability to support transparency but only offers 256 colors. The big advantage is that it does not lose information during compression.
GIF is the ideal format for small images that need very few colors. On the other hand, if the image is larger and has many colors, the quality of the latter will be impacted and the file size will be quite high.
Note that this format is less interesting than JPEG in terms of weight/quality ratio.
The Webp format
This format combines the advantages of the three (3) other formats mentioned above. It creates smaller images that are richer with a faster impact on the web. Its comprehension is of better quality and is done with or without loss.