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 52
What’s the new WebP format?
Target skills
As a reminder, the different formats most used when talking about images on the web are GIF; PNG; and JPEG. They have the particularity of being heavy, long to load or do not correctly manage transparency or animations.
A few years ago, the American giant Google developed a new image format free of charge, the WebP. It has the particularity to reduce the size of the image without loss of quality. According to Google data, the size of the image can be reduced to 80% compared to the JPEG format and up to 30% compared to the PNG format.
Wepb has many advantages compared to the other three (3) traditional formats. Namely, it is lighter; offers a wider color palette; uses animated images and offers transparency.
In addition, this format greatly improves the optimization of search monitors. As a result, the reduction in image size has a direct impact on the download time and thus reduces energy consumption.
The big drawback of this format is its incompatibility with some browsers but this is changing as new generations of browsers are adopting it.
Currently, its use is done via a plug-in from Adobe. You can read or export images on photoshop. You also have the possibility to convert your images via other online tools such as convertico ( https://www.convertico.com ) or Webpconv ( https://www.webpconv.software.informer.com )