Optimiser les visuels web

Optimiser les visuels web

L’utilisation d’images dans vos messages web, vos newsletters, sur votre site ou dans vos articles divers, permet de capter le regard des visiteurs. C’est pourquoi, elle doit être contrôlée et finement travaillée.

Dans cet article vous trouverez des conseils afin de vous aider à choisir vos images sur des banques d’images originales et libres de droit, des outils de redimenssion ainsi que la présentation des différents formats.

1 – La sélection

Commencez par sélectionner vos visuels, de bonne qualité, néanmois puisque nous nous concentrons ici sur le web, il n’est pas nécessaire d’en faire de trop au risque de surcharger le serveur inutilement.

En effet, des images trop lourdes seront plus longues à ouvrir, engendrant un ralentissement du temps de chargement des pages et par la même occasion un mauvais référencement.

Concernant la qualité, optez pour image 72 DPI (point par pouce), unité de précision qui détermine la résolution de votre image.

Puis, concentrez-vous sur la représentation cognitive de votre image. L’image doit représenter votre sujet et non l’inverse. A noter que, pour l’envoi de newsletters, seulement 23% des boites mails affichent les images automatiquement.

Voici une liste, non exhaustive, de banques de photos gratuites et payantes :

  • La plus épurée : Barn Images
  • La plus généreuse : Unsplash
  • La plus pratique : Freepik
  • La plus connue : Fotolia
  • La plus grande : Shutterstock
  • Quelques autres noms de sites photos et icônes : Getty Images, Iconfinder, Gratisography, Pixabay, etc.

2 – Redimensionner une image

Vous avez trouvé la bonne image mais cette dernière ne correspond pas à la taille désirée, au format souhaité ou est trop lourde ? Pas de panique, il sufit de la modifier un peu.

Pour cela, baissez la résolution à 72 DPI et réduisez la taille. Inutile de charger des images trop grandes, car comme mentionné précédemmment, elles ne pourront que pénaliser le temps de chargement de la page web.

Des outils payants et gratuits (et même en ligne) permettent de modifier les images à volonté.

  • Les outils en ligne :

De nombreux outils en ligne permettent de redimensionner une photo. Souvent simples et intuitifs, ils facilitent la vie des personnes qui en ont une utilisation peu fréquente. Les fonctions proposées sont souvent limitées, par exemple, faire pivoter une image, passer en noir et blanc, redimensionner, etc.

  • Les logiciels de gestion d’image :

Le plus connu reste toujours Photoshop, mais dans une version payante un peu complexe pour des novices. Néanmoins, ce genre de logiciel permet une totale gestion de l’image et de son format pour ainsi retoucher tous les éléments contrariants.

Très performants également, il existe

Il existe d’autres logiciels très performants tels que Gimp, Photo Paint, Corel Photo Paint, etc.

Gimp, Photo Paint, Corel Photo Paint sont également très performants, vous trouverez d’ailleurs de nombreux tutoriels afin de correctement les prendre en main.

3 – Le format – le détail à ne pas négliger

Il existe différents formats possibles lorsque l’on parle de photo. A l’inverse, pour les photos contenant du texte ou pour les illustrations, il est conseillé d’utiliser le .png.

Le format JPG ou JPEG ( Joint Photographic Experts Group) :

Ce format compressé vous permet de conserver les profondeurs de couleur et une qualité d’image supérieure. Néanmoins, il ne tient pas compte de la transparence et des textes qui peuvent alors être pixelisés. A destination du web, il est préférable d’utiliser le JPG pour les photos, attention tout de même car ce format n’est pas adapté aux logos et aux textes.

La pixellisation, qu’est-ce que c’est ?

Il s’agit de l’apparition de carrés de couleurs (pixels) apparaissant et visibles à l’oeil nu donnant un effet de flou lorsque l’image est de mauvaise qualité ou retouchée. Si cela vous arrive quand vous retouchez une image, changez de méthode ou de logiciel car certains gèrent mieux que d’autres le traitement des dimensions.

Le format PNG (Portable Network Graphics) :

Ce deuxième format va générer des images sur un spectre de couleur moins large que le JPEG, mais qui seront à même de contenir les textes correctement.  Il est souvent utilisé dans la gestion des logos ou des illustrations vectorielles.

Le format SVG (Scalable Vector Graphics) :

Ce troisième format est utilisé sur le web afin de garder l’intégralité de la qualité d’une illustration vectorielle.

Pratique car plus léger, l’image peut être retravaillée, sans aucune détérioration via un fichier SVG qui ressemble au XML. Attention car il est parfois refusé sur certains CMS pour des raisons de sécurité.

Le format GIF (Graphics Interchange Format) :

Il s’agit d’un format d’image numérique souvent utilisé sur le web. Il a pour vocation de donner du mouvement aux images, de créer de l’animation avec plusieurs images rassemblées. Le GIF fait d’ailleurs son grand retour depuis quelques années.

Le format WebP :

Le format WebP, introduit en 2010, est spécialement conçu pour intégrer des images sur des plateformes numériques telles que les sites internet. Comparé aux formats JPG ou PNG, il présente une qualité d’image supérieure tout en conservant un avantage : sa taille de fichier plus réduite. Ainsi, il occupe moins d’espace tout en maintenant sa qualité. Un autre atout du format WebP réside dans sa meilleure performance sur les sites web, puisqu’il permet un chargement des pages plus rapide.
Toutefois, le principal inconvénient de ce format est qu’il n’a été pris en charge par tous les navigateurs que très récemment et n’est toujours pas compatible avec tous les systèmes d’exploitation.