Images

Le test des images examine toutes les images d'un site Web pour vérifier si elles sont référencées conformément aux bonnes pratiques les plus récentes. Nous vérifions également que les images sont dans un format approprié pour le Web.

Pourquoi testons-nous ce point ?

Les créateurs de sites Web incluent souvent des images sur leurs pages d'une mauvaise manière, ce qui crée des problèmes d'accessibilité pour les visiteurs et augmente le temps de chargement de la page.

Il est important d'inclure les attributs de largeur et de hauteur dans chaque balise d'image. Le balisage est valable sans les attributs de hauteur et de largeur, mais c'est une bonne pratique de les inclure. Sans ces attributs, le navigateur du visiteur ne sait pas combien d'espace laisser pour l'image jusqu'à ce qu'il l'ait téléchargée. Ceci signifie qu'une fois l'image chargée, la page doit être rafraîchie par le navigateur du visiteur, ce qui allonge le temps de chargement de la page et peut provoquer des « sauts » de certains éléments de la page, particulièrement si la connexion Internet de l'utilisateur est lente. Il est également important de ne pas étrier l'image en utilisant ces attributs, ils doivent être identiques aux dimensions réelles de l'image. Cela augmente également le chargement de la page.

Comment testons-nous ce point ?

Nous téléchargeons toutes les images d'un site et notons les résultats de plusieurs critères 

• S'agit-il d'un format non compatible avec le Web ? Seules les images webp, avif, jpeg, png, svg et gif sont autorisées.
• Les attributs de largeur et de hauteur sont-ils absents ? Cela se produit lorsque vous omettez les attributs de largeur et de hauteur de l'image.
• Est-elle étirée dans le navigateur ? Cela se produit lorsque l'image source a une taille différente de celle indiquée par les attributs de largeur et de hauteur spécifié dans le code HTML. Si vous voulez étirer une image dans le navigateur, vous devriez utiliser le CSS parce que la balise décrit l'image source, pas comment elle devrait être affichée.

Que puis-je faire ?

Assurez-vous que toutes les images que vous utilisez sont dans un format adapté au Web, tel que jpeg, gif ou png. Vous devez également inclure les attributs de largeur et de hauteur de toutes les images, et ceux-ci doivent être aux dimensions réelles de l'image source. Si vous devez étirer l'image dans le navigateur, utilisez le CSS. La balise de l'image dans le code HTML définit l'image source, et le CSS définit comment elle doit être présentée.