Skip to main content
Quésaco-conception

Mission n°3 : Les images

By 9 juillet 2024juillet 19th, 2024No Comments

À votre avis, combien pèsent les images en moyenne sur une page web ?
44 % du poids ! Évidemment, vous devez l’avoir compris, en éco-conception, nous faisons des économies.

La checklist

Bonnes pratiques

Bénéfices

Utilisez des glyphes typographiques, ils peuvent remplacer :

  • Les symboles
  • Les pictogrammes
  • Les illustrations
  • Réduction de la bande passante grâce à une économie de poids.
  • Réduction du nombre de requêtes.
  • Réduction de la complexité du DOM (si vous ne savez pas ce que c’est, pas de panique, je vous explique tout à la fin du compte rendu).
Compressez les images :

  • Lossy = gain maximal de poids avec une légère perte de la qualité
  • Lossless = gain minimal de poids sans impact sur la qualité
  • Glossy = gain moyen de poids avec une qualité quasi intacte
  • Chargement plus rapide.
Réduisez la palette de couleur de l’image.
  • Économie de poids.
  • Accélération du chargement de la page.
Lazy Loading:  active le chargement des images lorsqu’elles sont visibles sur l’écran au lieu de télécharger l’ensemble des images d’un coup.
  • Moins de données consommées par les utilisateurs.

Il existe de nombreux outils en ligne permettant d’optimiser vos images (voir le guide d’éco-conception de services numériques des Designer Éthiques) je vous conseille Squoosh. C’est un outil gratuit permettant de resizer, réduire la palette de couleurs et de compresser vos images.

Ce qu’il faut savoir sur le DOM 

Le DOM, ou Document Object Model, est comme le manuel de votre vaisseau spatial. Imaginez que votre site est un vaisseau permettant d’effectuer des voyages interstellaires. Le DOM explique comment chaque pièce est connectée et peut être modifiée.

Quand vous ouvrez un site web, votre navigateur utilise le DOM pour transformer le code en quelque chose de visible et interactif, comme si l’ingénieur en chef assemblait et vérifiait chaque élément avant le départ.

Le DOM permet aussi aux développeurs de jouer avec ce vaisseau en temps réel, ajoutant ou modifiant des éléments facilement. En résumé, le DOM est le guide qui permet de créer, organiser et modifier un site web.