Bonjour Randie,
Voici comment je résumerais les avantages des différents formats utilisables pour le web :
JPEG : Généralement le meilleur choix pour les images photographiques et les rendus 3D avec des dégradés de couleur. Il offre un bon compromis entre qualité et taille de fichier.
PNG : À privilégier pour les images avec des zones transparentes, des logos ou des graphiques vectoriels. Il permet de conserver une qualité parfaite sans perte, mais les fichiers peuvent être plus lourds.
WebP : Un format plus récent développé par Google, offrant une meilleure compression que JPEG et PNG pour les images photographiques. Cependant, sa compatibilité avec les navigateurs n'est pas encore totale.
SVG : Essentiellement pour des dessins (full vectoriel), pour les éléments graphiques simples comme des icônes ou des dessins vectoriels, le SVG est léger, sans perte de qualité. Il n’est pas adapté aux images complexes comme des compositions florales en 3D, mais à garder à l’esprit si tu intègres des éléments vectoriels.
Ensuite pour le format JPEG, PNG, WebP, tu peux utiliser des application de compression d’image : Utilise des outils comme
TinyPNG ou
JPEG-Optimizer pour compresser tes fichiers JPEG/PNG avant de les télécharger sur le site. Il existe aussi des outils pour WebP comme
Squoosh pour compresser et convertir des images.
Pour ton code tu peux utiliser les formats responsive :
Utilise l’attribut srcset dans les balises <img> pour fournir plusieurs tailles d’images en fonction de la résolution de l’écran de l’utilisateur. Par exemple, un écran mobile n’a pas besoin d’une image aussi grande qu’un écran de bureau.
Tu optimiseras ainsi le chargement d'images.
Exemple :
Code :
<img src="image-default.jpg"
srcset="image-small.jpg 600w, image-large.jpg 1200w"
sizes="(max-width: 600px) 600px, 1200px"
alt="Composition florale 3D">
Aussi
Lazy Loading (Chargement différé) : Cette technique permet de ne charger les images que lorsqu’elles apparaissent dans le champ de vision de l’utilisateur, réduisant le temps de chargement initial de la page. En HTML, cela se fait facilement avec l'attribut loading="lazy" sur les balises <img>.
Tu peux également héberger les images sur un autre serveur (type cloud ou cdn) réduisant ainsi le temps de chargement pour les utilisateurs et ne pas encombrer l'hébergement de ton client.
Si tu utilises un CMS type WordPress, pense également à configurez correctement la mise en cache côté serveur pour les images statiques afin de réduire les temps de chargement pour les visiteurs récurrents.
De mon point du vu, voilà pour l'essentiel