Sélectionner une page

Optimiser images pour le web

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

Adaptez la taille de vos images.

Le cadrage

Supprimez le contenu superflu.

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

C’est le format standard du web. Il s’agira de votre premier choix, il convient à la plupart des situations.

.svg

C’est un format vectoriel pour le web. Ces fichiers conservent leur définition de façon permanente.

.png

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

.gif

Ce format est désuet pour des images fixes, il n’est à utiliser que pour des images animées.

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

Vous obtiendrez un effet de pixellisation avec une très forte dégradation de la qualité de limage.

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…)

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

72 dpi

pour le print

300 dpi

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

CMJN

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 :
  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.
Rappez Graphics

GRATUIT
VOIR