Les images sont un des éléments les plus volumineux sur un site internet. Plus elles sont grandes et plus le temps de chargement de votre site prendra du temps pour s’afficher. Si vous avez en tête d’utiliser de nombreuses photos sur les pages de votre site, vous avez intérêt à maîtriser les fondamentaux des images.
Quels sont les impacts si votre site prend trop de temps à se charger :
- vos visiteurs quitteront votre site plus rapidement que vos photos se chargeront et il y aura peu de chances qu’ils reviennent ensuite.
- le référencement de votre site dépend en partie de la vitesse de chargement de vos pages, les moteurs de recherche analysent et évaluent votre site et déclasseront votre positionnement dans les résultats de recherche si votre site et ses images ne sont pas optimisées.
Selon certaines études près de 60% des visiteurs quittent un site si il met plus de 3 secondes à se charger. Au-dela de cet aspect technique il faut également que vos images se comportent conformément à vos besoins. Voici donc quelques conseils avisés si vous voulez optimiser vos images et photos pour le web.
Que faut il vérifier ?
Voici déjà les points les plus essentiels à vérifier avant d’uploader vos images sur le web.
L'extension
Chaque format à ses spécificités.
Les dimensions
Le cadrage
La résolution
L'espace colorimétrique
La compression
Les extensions de fichiers
Chaque format à ses spécificités et chaque image à ses propres besoins. Et il n’y a donc pas de réponse universelle, mais il suffit de bien se comprendre les fonctions de chaque format pour faire le bon choix.
.jpg
.png
.svg
.gif
Les dimensions
Les dimensions de vos images ont un impact direct sur leur poids et sur la vitesse de chargement de votre site.
Sur un site internet il est important d’utiliser une taille parfaitement adaptée à son utilisation.
La largeur des images sur un site excédent rarement les 1000 pixels.
trop petites
trop grandes
Le cadrage
Le recadrage d’une image à plusieurs avantages bien trop souvent négligés.
Techniquement cela permet de réduire la taille d’une photo, de diminuer ses dimensions en élimant les parties superflues. Mais ça a également un impact positif sur le référencement (SEO) car plus une page est optimisée, mieux elle sera évaluée par les moteurs de recherche.
En supprimant le contenu superflu vous mettrez le sujet ou l’objet de l’image plus en valeur, plus en avant et vous obtiendrez un résultat plus esthétique ou simplement plus efficace.
Vous pouvez également jouer avec la forme de votre image (rectangulaire ou carrée) et sur son orientation horizontale (mode paysage) ou vertical (mode portrait).
Finalement vous pourrez encore corriger l’éventuelle inclinaison de vos images.
La résolution
Une image est composée de pixels, qui ne sont rien d’autre que de petits points alignés les uns aux autres.
La valeur de la résolution représente le nombre de points alignés dans la composition d’une image. On pourrait encore mettre en parallèle la résolution d’une image et sa précision.
Plus il y a de pixels dans une image, plus elle est détaillée. La résolution des images est exprimée en dpi (dots per inch : points par pouce carré).
pour le web
pour le print
L’espace colorimétrique
Il existe 2 modes principaux de colorimétrie. La colorimétrie standard pour le web qui est la trichromie RVB : rouge, vert et bleu. RGB en anglais pour red, green et blue. La quadrichromie CMJN : cyan, magenta, jaune et noir est principalement destinée à l’imprimerie. CMYK en anglais pour cyan, magenta, yellow et black.
Quadri pour le print
La compression
Chaque image, en fonction de sa complexité et de son format peut être compressée afin de réduire son poids. Cette compression implique plus ou moins de perte de qualité.
Avec un logiciel comme photoshop ou gimp, choisissez l’option “enregistrer pour le web” afin de jouer sur le taux de compression de l’image. Il est également possible de gagner en légèreté en diminuant le nombre de couleur de vos images. Cette compression peut réduire le poids d’une image jusqu’à plus de 70%.
enregistrez vos photos pour le web
Ne compressez pas à plus de 80%
Conclusion
1. Utilisez le format le plus adapté à l’utilisation de vos images :
- photos : jpg
- transparence : png
- animation : gif
2. Limitez la taille de vos images
- 1000 pixels de largeur suffisent généralement
3. Recadrez vos images en supprimant le contenu superflu
4. Adaptez la résolution de vos images
- web : 72 dpi
- print : 300 dpi
5. Choisissez le bon espace colorimétrique
- web : RVB
- print : CMJN
6. Compressez vos images
- enregistrer pour le web
- ne pas descendre sous une qualité de 80%
