Résolution d’images : une mesure de la finesse des détails d’une image pour une dimension donnée. (En savoir plus)

Lorsqu’on bâtit un site Web, une panoplie d’images sont nécessaires pour une visite agréable.
Qu’il s’agisse de votre logo ou d’une image qui vous représente, des images titres ou des photos de votre portfolio, elles sont agréables pour les yeux des visiteurs.

Une image vaut mille mots! De plus, elles allègent la lecture et agrémentent l’expérience de visite! 🙂

Quand on parle de gestion d’images, il s’agit de gérer :

• les dimensions de l’image (largeur-hauteur) ;
• la densité de l’image (le nombre de pixels au pouce carré) ;
• l’extension utilisée pour l’image (PNG, JPEG, GIF, etc.) ;
• le poids final de l’image à afficher (en ko ou en mo).

Le défi est toujours le même : avoir la plus belle image possible au plus petit poids possible.

Le poids de l’image est un des facteurs qui a le plus d’impact sur la rapidité d’ouverture de la page. Comme nous souhaitons que notre page ouvre le plus vite possible (pour ne pas perdre l’attention de l’internaute qui vient de cliquer sur notre lien), il est pertinent de se pencher sur la question et de « réduire » la résolution de nos images.

Oui, nous pouvons faire une gestion des images avec du code (langage CSS) directement sur les pages Web, mais comme les navigateurs s’occupent de charger tout le contenu et ensuite d’appliquer le CSS, (c’est-à-dire si on installe une grande image au poids lourd et qu’à l’aide du CSS on la redimensionne à la grandeur voulue,) le temps de chargement sera plus long (la grande image sera chargée et ensuite réduite).

Il est plutôt souhaitable de mettre une plus petite photo (petit poids – comme l’exemple ci-dessous) et d’en mettre une deuxième en lien, avec une plus grande résolution, au cas où l’on souhaiterait que le visiteur ait accès à plus de détails de la photo. Dans ce cas, le visiteur cliquerait sur la photo et une plus grande image se chargerait. Comme l’exemple ci-dessous.

Vous souhaitez voir l’image dans sa taille d’origine? Cliquez dessus!

Les appareils photos d’aujourd’hui ainsi que plusieurs cellulaires, entre autres depuis le S5 (Samsung) et le 5S (IPhone), font des photos en très grande résolution.

Pour votre site Web, les photos prises avec un de ces appareils seront probablement dans une résolution plus grande que nécessaire et devront probablement être réduites.

Notez qu’il est tout de même préférable de partir d’une bonne qualité d’image et de réduire avec la conscience des dimensions, de la densité, du poids et de l’extension voulus.