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 51
Use CSS sprites.
Target skills
In this module we will discuss CSS Scripts and its impact on the speed and durability of your website.
From information gleaned from the internet (Conception Web durable : Sprites CSS - Mightybytes), CSS Sprite is defined as a collection of images that are placed in a single large image. In other words, this technique consists in assembling several images in a single file, thus reducing the number of HTTP (Hypertext Transfer Protocol) requests. For your information, this request represents a set of lines transmitted to the server by the browser.
For example, instead of using 3 individual images at your web page you combine them in one. With CSS we can show just the part of the image we need.
The use of this technique contributes greatly to reducing our ecological impact when designing our website. Indeed, by reducing the number of requests sent to the server it will also optimize the performance of your website.
CSS Sprite Generator is an online tool that can help you create your sprites.
https://www.css.spritegen.com