Optimiser ses images pour le web

Optimiser ses images pour le web, comment et pourquoi ?

Les images sont les éléments les plus volumineux d’un site internet. Plus elles sont grandes et plus elles prendront de temps à se charger et à s’afficher sur votre site internet.

Impacts si votre site prend trop de temps à se charger :

  1. vos visiteurs quitteront votre site rapidement et il y aura peu de chances qu’ils reviennent
  2. 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.

1. Choisir le bon format d’image, la bonne extension.

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 coordonner ses besoins et moyens pour faire le bon choix.

a. le jpg ou le jpeg
C’est le format standard du web. Il s’agira de votre premier choix.

b. le png
Vous choisirez plutôt ce format si vous avez besoin d’apporter de la transparence à vos images.

c. le gif
Ce format est désuet et n’est presque plus utilisé que pour des images animées.

2. Ajuster la taille des images

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 adaptée à son utilisation. La largeur d’un site excédent rarement les 1000 pixels.

si vous utilisez des images trop petites
Vous obtiendrez un effet de pixellisation avec une très forte dégradation de la qualité de limage.

si vous utilisez des images trop grandes
le temps de chargement de votre page sera plus long et dans certains cas des images qui s’affichent au-delà du view port, de la fenêtre d’affichage de votre browser (chrome, firefox, safari…)

3. Recadrer ses images

Le recadrage d’une image à plusieurs avantages. Techniquement il permet de réduire la taille d’une photo, de diminuer ses dimensions en élimant les parties superflues. Ce qui a également un impact positif sur le poids d’un image et donc sur son optimisation et le référencement du site. 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.

Avantages

  1. réduction de taille
  2. optimisation pour le référencement
  3. mise en valeur du sujet de l’image
  4. alternance des modes portrait et paysage
  5. correction de l’inclinaison

4. Adapter la résolution de ses images

Une image est composée 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é).

Ce qu’il faut en retenir

  1. pour le web : 72 dpi
  2. pour le print : 300 dpi

5. Régler 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.

À retenir 

  1. pour le web : RVB
  2. pour le print : CMJN

6. Compresser ses images

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 avec 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%.

En résumé

  1. enregistrez vos photos pour le web
  2. ne compressez en deçà des 80%

7. Développer ses images, faire du photomontage

Si vous connaissez suffisamment photoshop oui gimp pour pourrez corriger les défauts présents dans vos images et photos. Vous aurez également la possibilité de régler l’apparence de vos images.

Vous pourrez

  1. débarrasser, gommer les éléments perturbateurs de vos images (arrière-plans gênants, taches, défauts, reflets… )
  2. régler la chromie (ambiance lumineuse), la luminosité, le contraste, la saturation…

Conclusion

1. Utilisez le format le plus adapté à l’utilisation de vos images : 

  1. photos : jpg
  2. transparence : png
  3. animation : gif

2. Limitez la taille de vos images 

  1. 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

  1. web : 72 dpi
  2. print : 300 dpi

5. Choisissez le bon espace colorimétrique

  1. web : RVB
  2. print : CMJN

6. Compressez vos images

  1. enregistrer pour le web
  2. ne pas descendre sous une qualité de 80%

7. Si vous le pouvez, faites du photomontage et ajustez l’ambiance de vos images.

Leave a Reply