Optimiser les visuels web

Optimiser les visuels web

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

Dans cet article nous allons vous conseiller sur Comment redimensionner un visuel ? Quels sont les logiciels disponibles ? Où trouver des banques d’images originales et sympathiques, libre de droit, etc.
Alors, vous êtes prêt ?

1 – La sélection

Premièrement, vous devez sélectionner vos visuels. Des visuels de bonne qualité sont nécessaires mais comme nous sommes à destination du web, n’en faites pas trop pour ne pas charger le serveur. Des images trop lourdes seront plus longues à s’ouvrir, ce qui engendrera un ralentissement du temps de chargement des pages et un mauvais référencement. A éviter !

Point de vue qualité, pour le web, optez pour image 72 DPI (point par pouce). Ce dernier est une unité de précision qui détermine la résolution de votre image.

Après la qualité, 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 newsletter, seul 23% des boites mails affichent les images automatiquement.

Quelques 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. Vous vous en doutez, cette liste est loin d’être exhaustive !

 

2 – Redimensionner une image

Vous avez trouvé la bonne image mais cette dernière ne correspond pas à la taille ou au format désiré ? La photo choisie est trop lourde ?  Modifiez- la ! Il faut baisser la résolution à 72 DPI et réduire la taille à celle qui sera utile. Inutile de charger des images trop grandes, car elles vont 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 ont une utilisation peu fréquente. Les fonctions proposées sont souvent limitées comme faire pivoter une image, la passer en noir et blanc, la 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. Ne vous inquiétez pas, d’autres logiciels sont très performants : Gimp, Photo Paint, Corel Photo Paint, etc. De plus, de nombreux tutoriels vous montrent comment les utiliser !

 

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é va garder 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, nous allons préférer le JPG pour les photos. Le JPEG n’est pas adapté aux logos et aux textes.

  

La pixellisation, qu’est-ce que c’est ? Il s’agit d’un phénomène qui arrive lorsqu’une image est de mauvaise qualité ou retouchée. Des carrés de couleurs apparaissent et sont visibles à l’œil nu donnant un effet de flou. Si cela vous arrive quand vous retouchez une image, changez de méthode ou de logiciel. Certains logiciels gère 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. Le côté pratique de ce format est qu’il est plus léger, l’image peut être retravaillée, sans aucune détérioration via un fichier SVG qui ressemble au XML. 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 donné du mouvement aux images, de créer de l’animation avec plusieurs images rassemblées. Aujourd’hui ringardisé, on lui préfère les animations en HTML5.