Leçon 8Optimisation des images et chargement différé
- Notion 47 - La différence entre les images matricielles et vectorielles.
- Notion 48 - Sélectionnez le bon type de fichier
- Notion 49 - Ajuster la qualité d'une image.
- Notion 50 - Comprendre la compression d'image
- Notion 51 - Utiliser les sprites CSS
- Notion 52 - Qu'est-ce que le nouveau format WebP?
- Notion 53 - Outils pour l'optimisation d'image.
- Notion 54 - Révision/ évaluation
Notion 52
Qu'est-ce que le nouveau format WebP?
Compétences ciblées
Pour rappel, les différents formats les plus utilisés lorsqu'on parle d'images sur le web sont GIF ; PNG ; et JPEG. Ils ont la particularité d'être lourds, longs à charger ou de ne pas gérer correctement la transparence ou les animations.
Il y a quelques années, le géant américain Google a développé un nouveau format d'image gratuit, le WebP. Il a la particularité de réduire la taille de l'image sans perdre en qualité. Selon les données de Google, la taille de l'image peut être réduite jusqu'à 80% par rapport au format JPEG et jusqu'à 30% par rapport au format PNG.
Wepb présente de nombreux avantages par rapport aux trois (3) autres formats traditionnels. En effet, il est plus léger, il offre une plus grande palette de couleurs, il utilise des images animées et il offre de la transparence.
De plus, ce format améliore grandement l'optimisation des écrans de recherche. Ainsi, la réduction de la taille des images a un impact direct sur le temps de téléchargement et réduit donc la consommation d'énergie.
Le gros inconvénient de ce format est son incompatibilité avec certains navigateurs mais cela est en train de changer car les nouvelles générations de navigateurs commencent à l'adopter.
Actuellement, son utilisation se fait via un plug-in d'Adobe. Vous pouvez lire ou exporter des images sur photoshop. Vous avez également la possibilité de convertir vos images via d'autres outils en ligne tels que convertico ( https://www.convertico.com ) ou Webpconv ( https://www.webpconv.software.informer.com )