Lorsqu’on affiche un site sur mobile, les images ne s’adapte pas forcément à la taille du support. Sur un site, lorsqu’on intègre une image on lui donne une hauteur et largeur fixe, de ce fait elle ne s’adapte pas à la taille des écran sur laquelle on l’a visionne. Donc pour éviter que l’utilisateur mobile n’est besoin de réduire l’image manuellement, il faut rendre cette image « responsive ».
On le sait, aujourd’hui google attache de plus en plus d’importance aux résultats mobiles, et à l’expérience utilisateur, donc votre site se doit d’avoir un affichage parfait sur mobile également.
Heuresement c’est facile à faire, même pour les novices, pour cela il vous simplement ajouter un bout de code tout simple dans votre CSS, et bien sur SEOTool.fr vous le dévoile ici :
img {
max-width: 100%;
height: auto;
}
Si l’espace sur l’écran est suffisant l’image gardera sa taille originale. Mais au contraire, si l’espace de l’écran n’est pas suffisant, l’image adoptera automatiquement une taille adaptée à l’écran sur laquelle on la visionne. Et voila le tour est joué !