Optimisez vos images pour le web

Objectif

Le présent article vous fournit les bonnes pratiques pour optimiser les images et illustrations destinées à votre site internet.

Pré-requis

Disposer d’une sélection d’images et d’illustrations libres de droits.

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 :

blank

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é).

blank

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…

Les outils utilisables

En dehors de Photoshop, le service en ligne gratuit iLoveIMG va vous permettre d’optimiser vos images.

Consultez les Quick Tutos pour tout savoir sur l’utilisation d’iLoveIMG.

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

blank
Cet article vous a-t-il été utile ?

N’hésitez-pas à nous faire part de vos expériences et des difficultés que vous pouvez encore rencontrer, de manière à ce que nous puissions affiner et compléter ce support…