Objectif
Pré-requis
Pourquoi optimiser vos images ?
Optimiser les images publiées sur un site internet, dans un e-mailing ou sur les réseaux sociaux est une nécessité. En effet, les appareils photos numériques, y compris ceux intégrés dans les smartphones, fournissent des fichiers d’un poids de plus en plus important.
Et plus ce poids est important, plus la vitesse d’affichage en sera défavorablement impactée.
Or la vitesse d’affichage est un élément primordial de confort pour le visiteur du site et le lecteur du mail ; et c’est également logiquement un critère pris en compte par les robots de référencement, notamment celui de Google. Il est donc essentiel de traiter toutes les images que vous souhaitez utiliser, et ce, préalablement à leur mise en ligne.
Les notions de base
Avant de s’attaquer à l’optimisation de vos images, il est bon de se rappeler quelques notions de base relatives aux fichiers d’images numériques.
Les formats d’images
Les trois formats d’images les plus couramment utilisés sur internet sont :
- JPEG : ce format permet de compresser l’image, certes avec une perte de qualité, mais avec des gains importants en termes de poids ; c’est le format recommandé pour les photographies dans la plupart des cas.
- PNG : ce format gère la transparence ; il est toutefois plus lourd que le JPEG. Son utilisation sera donc réservée aux logos et autres illustrations dont la transparence doit être conservée.
- GIF : moins utilisé que les deux précédents, ce format prend néanmoins en charge l’animation.
Le poids d’une même image varie fortement selon le format utilisé, comme on peut le constater à travers le test suivant, effectué à partir d’une même image re-dimensionnée et optimisée sous Photoshop en taille 1000×667 :
Le format JPEG, même en qualité supérieure, est ainsi plus de deux fois plus léger que le format PNG le plus light (PNG 8)…
La taille et la résolution
Une image numérique est composée d’un ensemble de points appelés « pixels » (Picture Elements). L’ensemble de ces pixels est contenu dans une grille à deux dimensions qui constituent l’image :
La taille d’une image correspond à sa « définition », calculée en nombre de pixels qui la composent. Pour l’image ci-dessus, sa taille réelle, telle qu’elle est affichée dans la page, est ainsi de 150 x 125 pixels.
La « résolution », exprimée en « dpi » (dot per inch – points par pouce), détermine la densité de ces pixels/points par unité (par pouce carré).
La résolution permet donc de faire le lien entre la définition et les dimensions physiques d’impression de l’image.
La notion de résolution est souvent utilisée pour déterminer un niveau de qualité, avec comme idées simplificatrices largement répandues, le fait qu’il faille :
- 72 dpi pour une image sur internet
- 300 dpi pour une image imprimée.
Cette notion est toutefois obsolète. Sur internet, la qualité d’une image dépend de sa seule définition, c’est-à-dire de sa taille en pixels, puisque la résolution sera déterminée, et imposée à l’image, par l’écran du matériel d’affichage (ordinateur, tablette, smartphone…). Ainsi, une image de 300 pixels de largeur s’affichera sur votre écran sur 300 pixels de cet écran !
L’important sera donc de dimensionner les images au plus juste de manière à utiliser l’espace écran de manière cohérente…
L’organisation nécessaire
La préparation des images et illustrations de votre site peut être assez chronophage. Elle nécessite donc un minimum d’organisation.
Cette organisation fait l’objet de l’article “Organisez votre espace de travail“.
Pour aller plus loin…
Sur la question de la résolution d’une image :
http://blog.arnaudfrich.com/photo/pour-en-finir-avec-les-72-dpi/
Sur l’optimisation des images :
http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-son-site-pro/
http://www.comleweb.com/reduire-et-nommer-ses-images/
http://www.tomshardware.fr/articles/bases-photo-numerique,2-349.html
http://blog.youseemii.fr/seo-savez-vous-optimier-le-referencement-de-vos-images/
0 commentaires