Optimiser les visuels pour le site

Tutoriel

Il est impératif d’optimiser tous les visuels qui sont mis en ligne sur le site, au sein des articles ou sur les autres pages, afin de gagner en qualité d’image et surtout, pour les visiteurs, en rapidité de téléchargement des pages du site.

Cette optimisation est fondamentale car la mise en valeur des contenus du site est naturellement basée sur le design et la plus-value esthétique des photographies, or si les nouveaux visuels ajoutés ne s’avèrent pas qualitatifs, c’est toute la charte graphique du site qui s’en trouve dévalorisée.

D’autre part, si les visuels sont trop lourds, le temps de téléchargement des pages s’en trouve augmenté d’autant, ce qui tend à décourager les visiteurs de naviguer sur le site.

• La dimension du visuel

Sur le site, selon les pages, le visuel d’un article est affiché avec une taille différente :

  • Par exemple, sur la page d’accueil, le visuel est affiché en « vignette » de 330 pixels de largeur,
  • Mais sur la page du blog, le même visuel est affiché en 795 pixels de largeur par 530 de hauteur.

Il faut donc privilégier au maximum les visuels qui font au moins cette dimension de 795 pixels de largeur, car s’ils sont plus petits, ils seront « gonflés » artificiellement au moment de l’affichage sur le site et la qualité apparaitra médiocre.

Lorsqu’un visuel est téléchargé sur la base de données du site pour un article, il est très recommandé qu’il fasse 795 pixels de largeur, car plus petit, il perdra en qualité, et plus grand, il alourdira la base de données.

• Le ratio

Pour favoriser la cohérence de l’ensemble des visuels présentés sur le site, le ratio est de 3 par 2 (3 de largeur pour 2 de hauteur) : la dimension recommandée pour les articles, 795 x 530, correspond à un ratio de 3 par 2.

Il est intéressant de respecter autant que possible ce ratio et de recadrer l’image au besoin, à moins que cela n’entame la valeur artistique ou informative de l’image ou que le visuel ne s’y prête pas (exemple les affiches dont le format est généralement en hauteur).

• Le cadrage

Ne pas hésiter à recadrer une image lorsque cela est possible et utile, si la dimension de l’image le permet (donc, en ce qui concerne les articles, si à la base la dimension du visuel est supérieure à 795 x 530 pixels).

• La réduction du poids

Selon l’origine du visuel, la variation de son poids en terme informatique (sa taille en octets) peut être considérable, or la grande majorité des visuels ont un poids trop élevé qui est très dommageable pour la navigation sur le site. Il est donc indispensable d’alléger au maximum tous les visuels qui doivent être téléchargés dans la base de données du site, sans pour autant nuire à la qualité des images.

Pour cela, il existe une possibilité d’effectuer cette opération en ligne, sur le site Web Resizer :

http://www.webresizer.com/resizer/

– 

1/ Charger le visuel

Cliquer sur le bouton « Choisir le fichier » et sélectionner le fichier du visuel retenu qui se trouve sur votre ordinateur (attention, ce fichier ne doit pas, au départ, dépasser un poids de 5 MB soit 5 mégabytes), puis cliquer sur le bouton « upload image ».

Après quelques secondes, l’image apparait sur l’écran avec :

  • à droite, l’image original,
  • à gauche, l’image optimisée.

web-resizer

– 

2/ Modifier les paramètres

Sous l’image sont indiquées les valeurs du visuel : sa taille en KB ou MB (« size » soit le poids du visuel) et sa largeur et sa hauteur en pixels (« width » et « height », soit la dimension du visuel). En vert et entre parenthèse apparait le pourcentage de réduction du poids (« % smaller »).

Par défaut, le logiciel re-dimensionne l’image automatiquement en 400 pixels de largeur (width), il est donc nécessaire d’indiquer la dimension voulue. Cliquer sur l’espace de saisie à droite de « New size » et inscrire soit la dimension originale, soit par exemple 795, lorsque le visuel est destiné à un article). Une fois le chiffre inscrit, cliquer sur le bouton « apply change ». La photo s’affiche alors plus grande à l’écran.

Par défaut, la valeur de traitement de qualité de l’image « Image quality » est 80 sur une échelle de 10 à 100 (Attention, ce paramètre n’apparait pas sur l’interface de Web Resizer, et n’est donc pas modifiable, si le visuel à alléger est au format .png). Le fait de baisser ce pourcentage fera baisser le poids du visuel mais aussi sa qualité. Une valeur de 60 permet d’obtenir un bon compromis produisant un visuel nettement allégé et sans trop perdre de qualité. Une fois cette valeur inscrite pour « Image quality », cliquer sur le bouton « apply change ».

Le reste des modifications de paramètres que propose cette application Web Resizer ne nous est, à priori, pas utile.

– 

3/ Récupérer le visuel modifié

Donc, pour sauvegarder le visuel ainsi modifié, cliquer sur le lien « download this image ». Le visuel est alors téléchargé sur l’ordinateur et peut être ensuite intégré à un article comme indiqué sur le tutoriel « Ajouter un article sur le blog ».