Accueil  / Tutos & veille internet / Optimiser ses images pour le web

Optimiser ses images pour le web
Optimiser ses images pour le web

Les images sont les poids morts des sites internet : pensez à l’utilisateur et optimisez leur taille / leur poids. Exemples d’outils installés en local ou utilisables en ligne dans un navigateur.

Les 2 principaux avantages des visuels optimisés :

  • Améliorer les performances de votre site (vitesse de traitement et d’affichage, moins d’abandon utilisateur, réduire la consommation du serveur)
  • Renforcer l’identité visuelle de votre marque / de votre entreprise

Pensez à l’utilisateur : évitez les images lourdes sur votre site

Il est recommandé de choisir, retailler, alléger ses images avant de les ajouter à son site internet. Il y a des outils performants qui font ça très bien, même en lot pour ne pas y passer ses journées.

Certains CMS peuvent limiter le poids des images automatiquement ou utiliser un cache optimisé par défaut (exemple SPIP), d’autres comme WordPress affichent les images retaillées en fonction de votre mise en page mais n’en réduisent pas leur poids pour autant. Par ailleurs ce CMS multiplie et stocke les images en dizaines de tailles sur votre serveur. Certaines extensions ajoutées au CMS peuvent aider mais si elles utilisent la puissance de votre serveur pour optimiser les images avant leur envoi à l’internaute (en fonction de la définition de son écran par exemple), le temps de calcul peut être conséquent et demander un serveur puissant.

Taille vs. poids

Vous pouvez très bien avoir une image originale de taille 1500 pixels sur 3000 pixels affichée au final en 300px de large sur 500px de haut dans une page sans que le poids de cette image ne soit réduit. Si elle pèse plusieurs mega, la page sera longue à charger pour un internaute doté d’une connexion internet passable (et si vous avez plusieurs images lourdes sur une page, il abandonnera).

Trois bons logiciels de traitement d’images

Logiciels opensource (ou Freemium) de création et manipulation d’images à installer sur son poste de travail Linux, Mac ou Windows :

  • The Gimp : retouche photo, lit et convertit les .eps, .png,… (équivalant libre de Photoshop).
  • Inkscape : dessin vectoriel, lit et convertit les .ai, svg, PDF,,.. (équivalent libre de Illustrator)
  • XnView permet entre autres le traitement d’images par lot (non libre freemium)

Des outils utilisable en ligne via votre navigateur

Sans installation sur votre poste de travail.

Test images améliorables
Test images améliorables
Test poids des images à optimiser
Test poids des images à optimiser

Images, vidéos, illustrations pour les réseaux sociaux

Chaque réseau social utilise des dimensions différentes pour les bannières, photos de profils, illustrations, videos,.. Utilisez des outils pour vous simplifiez la vie.
Par exemple :

Lien

Pour un panorama plus complet voir le programme de la formation « Les images pour le web »

Publié le 13 mai 2019
Mis à jour le 11 mars 2023