Images basse résolution / mobil

Bonsoir
Sur ligthouse J’ai une erreur (Uniquement en version mobil) que je ne parviens pas à résoudre, en fait je ne comprends pas le message … ?

« Les dimensions naturelles de l'image doivent être proportionnelles à la taille d'affichage et au rapport de pixels pour maximiser la clarté de l'image. »

Les 2 images incriminées sont en png, j’ai indiquées leur taille dans le code html et elles sont compressées (faible poids). Logo et bouton menu.
La page

Merci pour vos retours.

J’espère avoir posté dans la bonne catégorie

Bonjour,

Tu vas finir par être champion du monde avec lighthouse si ça continue .

A) Information complémentaire

1) je ne suis pas sûr que lighthouse fasse toujours le bon diagnostic en toutes circonstances sur ce point-là

2) sur quelle machine as-tu testé (un mobile ou un desktop, et quel type d'écran (quel était son pixel ratio)) ? quelle était la largeur visible du viewport au moment du test ? quelle était la valeur du paramètre "Device" de lighthouse au moment du test (mobile ou desktop) ?

3) quelles étaient les valeurs des les lignes suivant ton message d'erreur ? Par exemple, moi, j'ai ça : /img/logo6.png(www.menuiserie-menplast.fr) 200 x 149 200 x 149 600 x 447

B) Correctif possible

Pour tes images, crée des images 2 fois et 3 fois plus grandes (appelées par exemple du nom de ton image initiale et en rajoutant "-2x" et "-3x", et ajoute des attributs srcset à tes images. Voir https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

Par exemple :

<img class="menlogo" srcset="img/logo6-2x.png 2x, img/logo6-3x.png 3x" src="img/logo6.png" aria-label="Menplast" alt="Logo menuiserie Menplast à Montpellier" title="Menplast Fenêtre en PVC">

C) Explication

Certains écrans ont des "pixel ratios" (ou "densité de pixel") supérieur à 1, par exemple les mobiles ou ceux qui ont des écrans rétina. Mais il y en a plein d'autres. Ceci veut dire que ces écrans affichent en fait plusieurs pixels "physiques" par pixel logique (ceux définis dans ton css). Du coup, pour ces écrans (par exemple un 2x), on peut fournir des images 2 fois plus grandes (en terme de nombre de pixels). Une image de 400x298 sera dessinée dans un rectangle de 200x149px logiques avec 400x298 pixels physiques. Du coup, le rendu sera meilleur.

Lighthouse te pousse donc à fournir ces images supplémentaires que l'on pourrait qualifié de haute définition, ce qui se fait via l'attribut srcset des balises <img>. Mais je soupçonne lighthouse de se contenter de vérifier si un attribut srcset est présent, et de ne pas aller vraiment plus loin. Donc tu le calmes en rajoutant cet attribut, tu chopes ton 100% dans son diagnostic, mais pour les utilisateurs, rien ne dit que tu auras bien fourni l'image au bon pixel ratio. En effet, on ne peut pas prévoir une image pour tous les pixel ratios des écrans possibles et imaginables. Aujourd'hui, c'est 2x ou 3x (?) majoritairement, mais il peut y en avoir d'autres, sans parler de ce que nous réserve le futur.

Amicalement,
Modifié par parsimonhi (03 Dec 2020 - 10:49)

Merci parsimonhi pour toutes ces explications et exemples, cela vaut tous les tutos du monde ,
C'est un réel plaisir d'apprendre en lisant tes posts, je vais donc aller faire un petit tour du côté des images adaptatives et srcset.
J'ai de mon côté trouver une solution mais je ne sais pas si elle est conforme.

img{object-fit: contain;}

"Tu vas finir par être champion du monde avec lighthouse si ça continue"

lighthouse m'aide bien à progresser
Modifié par africa (03 Dec 2020 - 11:25)

Bonjour,

africa a écrit :
J'ai de mon côté trouver une solution mais je ne sais pas si elle est conforme.

img{object-fit: contain;}

J'avais vu cette ligne dans ton code css en effet (elle est mal située cependant, elle ne devrait pas être à l'intérieur d'un media-queries, mais avant).

Elle peut peut-être "inciter" lighthouse à te donner un 100%, mais si ça se trouve, c'est juste parce que les développeurs de lighthouse n'ont pas pensé à ce cas (pour s'en assurer, ça nous emmène trop loin). En tout cas, je n'ai pas l'impression qu'elle réponde à la question de fond qui est qu'on peut fournir des images avec beaucoup plus de pixels que ce qui est défini dans le html ou le css pour un rendu optimal sur les écrans qui le peuvent.

Tout ceci est assez cosmétique quand même. Tu auras la satisfaction d'avoir 100% partout dans lighthouse (ce qui n'est pas rien, certes), mais ça ne va pas changer beaucoup la vie des utilisateurs.

Amicalement,
Modifié par parsimonhi (03 Dec 2020 - 11:47)

parsimonhi a écrit :

Tout ceci est assez cosmétique quand même. Tu auras la satisfaction d'avoir 100% partout dans lighthouse (ce qui n'est pas rien, certes), mais ça ne va pas changer beaucoup la vie des utilisateurs.

Amicalement,

Tout à fait d'accord avec toi
Je vais revoir mes photos et allez à l'essentiel.
Merci
Modifié par africa (03 Dec 2020 - 15:32)