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 49
Adjust the quality of an image.
Target skills
Learn the main elements that impact the quality of an image
In this lesson, we will learn more about the criteria to take into account when adjusting the quality of your website's images.
The size
Reducing the size of your image will have a positive impact on its weight.
Note that the images, from a smartphone or camera, are about 5000 pixels. A size of 500 to 1000 pixels is sufficient for your website.
Compression
It is important to reduce the percentage of compression by at least 70%. This way, the image will be lighter while keeping its quality.
The weight
The ideal weight of images on the web is 100Kb.