Une mauvaise qualité d'image peut-elle avoir un effet négatif sur l'expérience utilisateur même si elle améliore les performances du site Web?
Une mauvaise qualité d'image peut-elle avoir un effet négatif sur l'expérience utilisateur bien qu'elle améliore les performances du site Web? Nous utilisons 3 types d'images sur notre site Internet:
- Icônes, logo, balles
- Stock photos comme de vraies personnes, la nature, des images de produits, etc.
- Images d'arrière-plan CSS répétées ou non répétées
L'optimisation des images pour les performances est considérée comme la meilleure pratique; la plupart du temps, nous le faisons. Je suis souvent confus quant à la quantité de compression à utiliser.
Mes questions sont les suivantes: la réduction de la qualité d'une image afin de réduire la taille du fichier peut-elle avoir un impact négatif sur l'expérience de l'utilisateur? Les utilisateurs attendent-ils des images nettes et claires? Et quelle est l'importance des images de haute qualité pour les utilisateurs?
Oui , pour les raisons suivantes
- Si je vois un site avec des images de mauvaise qualité ou écrasées ou même étirées, à moins que le site n'ait une marque forte derrière lui, je douterais sérieusement de la qualité de la marque car elles ne semblent pas intéressées à présenter un front positif avec des images de mauvaise qualité.
- Deuxièmement, si le site a un bon contenu mais des images de mauvaise qualité, il est possible que je me laisse distraire par les images (car les visuels se démarquent davantage que le contenu) dégradant mon expérience utilisateur.
- Si je vais sur un site produit ou un site e-commerce qui me fournit des images de mauvaise qualité du produit qu'il essaie de me vendre, ma confiance est naturellement réduite et j'hésiterais à l'acheter.
Par exemple. J'ai récemment voulu acheter un conteneur de disque dur pour ordinateur portable et j'avais du mal à en trouver un dans ma ville. J'ai finalement trouvé un détaillant en ligne qui l'a vendu, mais la qualité de l'image qu'il avait mise sur le site était si vague que je doutais du moment où le produit était réel ou simulé et je n'ai pas fait l'achat
Je recommande de regarder ceci excellente discussion sur la qualité de l'image et comment elle affecte la conversion
Pour résumer ce que dit l'article en ce qui concerne l'importance d'avoir une image de haute qualité:
Ceci est important car votre objectif est de fournir suffisamment d'informations aux utilisateurs pour qu'ils puissent évaluer/comparer le produit et prendre une décision d'achat. Si les détails d'un produit sont importants pour l'utilisateur, mais qu'ils ne peuvent pas les distinguer, il y a de fortes chances qu'ils quittent votre site Web et regardent ailleurs.
Cet article Comment choisir des images pour votre site Web met également en évidence certains points clés:
Les images de faible qualité ne sont pas seulement désagréables à voir, elles laissent également l'impression d'une opération amateur, et c'est la dernière chose que vous souhaitez que les gens associent à votre site Web.
Les images ne sont pas seulement une jolie garniture. Ils sont un outil de marketing, ils enrichissent le contenu du site et ils donnent confiance aux visiteurs que votre site n'est pas un canular.
En fait, c'est une très bonne question. Et pourtant, comment vous avez formulé votre question, la réponse est très claire: une mauvaise qualité d'image peut-elle avoir un effet négatif sur l'expérience utilisateur? -> absolument, c'est possible!
Bien sûr, la question est donc: que faire à ce sujet? Quels sont les bons moyens d'avoir une bonne performance de site Web ainsi qu'une bonne qualité d'image?
Quelques conseils:
vous pouvez et devez utiliser des graphiques de meilleure qualité pour les écrans rétine à mon avis, et sachez que ces graphiques (si vous les implémentez de la bonne manière) ne seront utilisés que pour les appareils avec écran rétine. Les appareils dotés d'un affichage "normal" continueront à utiliser les autres graphiques. Vous devez donc fournir deux résolutions pour chaque image.
oui, il est vrai que les appareils avec écran rétine n'auront pas toujours une connexion Internet rapide, comme c'est le cas pour les appareils sans écran rétine. Mais tout d'abord, cela changera à l'avenir car il y aura beaucoup plus de services et de fonctionnalités disponibles, ce n'est donc qu'une question de temps. Si vous regardez vers l'avenir, ne vous en faites pas trop.
Deuxièmement, pour les utilisateurs ayant des connexions Internet lentes, votre site ne sera pas le seul à prendre beaucoup de temps à charger. Cela ne devrait pas être une excuse, mais ce que je veux dire, c'est qu'il en va de même pour les utilisateurs utilisant d'anciens navigateurs Web - ils sont minoritaires et ne s'attendent pas à ce que votre site soit différent des autres.
Et enfin, oui jusqu'à présent, seuls l'iPhone et l'iPad avaient des écrans rétine, mais maintenant le premier MacBook Pro avec écran rétine a été lancé par Apple et vous pouvez vous attendre à ce que dans le futur, l'ordinateur portable les lignes et les ordinateurs de bureau auront des résolutions plus élevées.
Quelles sont les meilleures pratiques et solutions?
utilisez le moins d'images possible! Pour tout ce qui concerne la mise en page, n'utilisez pas d'images du tout si vous le pouvez. C'est plus facile que jamais avec CSS3. Exemple: j'ai entendu (jamais vérifié en fait) que le menu en haut sur www.Apple.com est uniquement basé sur CSS. Donc, beaucoup de choses sont possibles de nos jours.
savoir comment compresser les images de la bonne façon! Découvrez la différence entre JPEG, JPEG 2000, GIF et PNG. De bons programmes de retouche d'image peuvent très bien compresser les images sans réduire considérablement la qualité. Très facile - pensez à des sites comme Facebook ou Flickr, ils doivent traiter des millions de photos et de nombreuses photos sur une seule page - donc c'est IS possible.
à la perfection expérience utilisateur: vous pouvez précharger les images. Google le fait à votre insu, si par exemple vous entrez un terme de recherche, il commence déjà à précharger les images des premiers résultats répertoriés.
et néanmoins: pensez aux photos qui sont vraiment nécessaires pour être affichées ainsi qu'à la résolution. De plus, lors du chargement du site, le chargement des images empêche-t-il de charger la mise en page? Essayez de charger d'abord la mise en page puis les images.
Au total, il y a souvent beaucoup d'autres choses que vous pourriez améliorer avant de réduire la taille de l'image. Souvent, les gens se concentrent sur la réduction de la taille de l'image sur les pages Web sans savoir que les plugins tiers comme les plugins sociaux de Facebook ralentissent le site beaucoup plus que n'importe quelle image.