Vous êtes ici : Accueil > Blog > Pourquoi-comment-optimiser-images
~ 5 minutes
Vous êtes ici : Accueil > Blog > Pourquoi-comment-optimiser-images
~ 5 minutes
Vous avez beaucoup à gagner à optimiser les images de votre site web.
Un des premiers élément à prendre en compte est tout simplement l’expérience utilisateur.
En effet, le chargement des images lors de l'affichage d'une page web ralenti beaucoup la première impression (First Paint).
Afficher des images rapidement renforce la qualité de votre site internet et par conséquent sa crédibilité.
Un site trop long à s'afficher est frustrant pour le visiteur, et Google déteste ça aussi, surtout depuis la mise en place de
l'indexation Mobile First.
Les images représentent en moyenne 50 % du poids total d’une page web.
Plus de la moitié des internautes quitte un site web si celui-ci prend plus de 3 secondes à s’afficher !
Comme expliqué précédemment Google à commencé à faire la chasse aux sites non performants en terme de rapidité.
Même si le critère principal reste la qualité du contenu de votre site web, Google sanctionnera les sites trop lents, et leur référencement en sera impacté.
Dommage d’accorder autant de temps pour distribuer du contenu de qualité à vos visiteurs et être sanctionné à cause de vos images trop lourdes …
Par exemple pour sur un site e-commerce trop long à charger, les déboires peuvent être multiples :
Les réseaux sociaux ne font pas l’impasse non plus sur la vitesse de chargement.
La priorité des fils d’actualité des réseaux sociaux est donnée aux contenus provenant de sites qui se chargent rapidement
Nommez vos fichiers avec un nom descriptif de l'image.
La taille des fichiers est un des critères fondamentaux sur leurs poids.
Adaptez la taille de l’image à la taille d’affichage sur l’écran.
En effet, il est inutile de charger des images de 1500 pixels de large pour les afficher sur mobiles (400 à 600 pixels de large en moyenne).
Le temps de chargement sera extrêmement long.
De plus, il faut adapter ces images à la taille de leur contenant.
Une image de 1000 pixels de large chargée dans un conteneur de 500 pixels n’est pas cohérent non plus, même sur un grand écran de 1900 pixels.
Ce type d’erreur est très fréquent, elles sont très répandues lors de développement de site web par CMS (WordPress, …)
Il y a beaucoup à gagner sur la taille de vos fichiers images.
Viennent ensuite les formats (l’extension) de l’image même, (JPEG, PNG, …).
Ces deux derniers formats sont très répandus mais peu adaptés pour l’affichage sur une page web. De tels fichiers contiennent
des données inutiles à l’affichage de l’image dans la page, et donc alourdissent inutilement le poids de celle-ci.
Il est inutile de charger des métadonnées et autres.
De nouveaux formats d'images pour le web existent, le JPEG2000, le webp, …
Ils sont optimisés pour le chargement dans une page web et allègent considérablement le poids de vos fichiers.
Le format webp allège d'environ 30 % le poids d'une image en comparaison au png ou jpeg
Viennent ensuite les optimisations d'accéssibilité et d'utilisabilité qui auront également une influence sur le SEO.
alt
La balise alt de l’élément image n’est pas obligatoire mais fortement recommandée.
Il s’agit du texte qui sera affiché lorsque que le navigateur n’affichera pas l’image.
C’est le cas s’il ne reconnaît pas le format ou si celui-ci n'est pas valide, et dans les navigateurs des personnes visuellement handicapées.
Dans ce cas, seul le texte sera lu par un robot.
De plus le w3 validator retournera une erreur si la balise alt est inexistante ou vide. Il semblerait également que cette balise ait une influence sur le SEO.
Renseignez vos balises alt avec rigueur.
C’est peu de temps pour des résultats qui peuvent être vraiement significatifs, tant en terme d’UX que de référencement.
Il n’est pas rare de voir dans les balises alt du texte incompréhensible généré automatiquement avec les développements par CMS.
Google tient compte également de la sémantique de vos pages web, y compris pour vos balises images.
Le code généré avant et après vos images doit être en corrélation avec celles-ci. Le contenu du texte doit être cohérent avec l’image affichée.
Celle-ci doit comporter un titre et idéalement une légende.
Logiquement un bloc de code figure contient l’illustration img et la légende figcaption.
On s’aperçoit que des pages bien codées et optimisées techniquement profitent à tous.
L’expérience utilisateur est renforcée, notamment pour les personnes présentant un handicap visuel, la cohérence de la page est améliorée,
la lecture par les robots optimisée, et votre référencement ne s’en porte que mieux.
Codez en respectant les standards du web pour l’intérêt de tous.
Je suis disponible si vous avez besoin d'aide pour optimiser l'insertion d'images dans vos pages web.
