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.
- https://www.fixpicture.org : Online Image Resizer and Converter - Resize & Convert Images, Photos & Pictures
- https://tinypng.com : Smart PNG and JPEG compression
- https://pageweight.imgix.com : outil de test qui scanne votre site et indique les images améliorables.
Exemple de résultat de test avec cet outil :
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 :
- https://sproutsocial.com/fr/landscape/ : Streamlined Image Resizing for Social Media/
