Discussion :

[sentinel66]

Salut,
J'ai un problème avec les images responsives, qui impliquent peut-être aussi du CSS, juste pour vous avertir.
Pour l'image ci-dessous, les dimensions réelles affichées sont une largeur de 222,23 pixels et une hauteur de 353 pixels.
Et le navigateur choisit presque toujours (pas toujours, pour certaines raisons) la plus grande version de l'img, même si une version inférieure répondrait mieux aux conditions.
Dans le cas suivant l'image affichée est celle avec 531px de largeur, donc "essai_meta_1re_couv.webp 531w", alors qu'elle devrait logiquement être "essai_meta_1re_couv_hu304e743424f2712edfae17d652a7507f_115378_400x0_resize_q100_h2_mitchellnetravali_ 2.webp" avec une largeur de 400px.

Voici le html*:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<figure class=image>
<figcaption>something !</figcaption>
<img src="../../Images/article/essai_meta_1re_couv_hu304e743424f2712edfae17d652a7507f_115378_400x0_resize_q100_h2_mitchellnetravali_2.webp" srcset=", /Images/article/essai_meta_1re_couv_hu304e743424f2712edfae17d652a7507f_115378_200x0_resize_q100_h2_mitchellnetravali_2.webp 200w, /Images/article/essai_meta_1re_couv_hu304e743424f2712edfae17d652a7507f_115378_400x0_resize_q100_h2_mitchellnetravali_2.webp 400w, /Images/article/essai_meta_1re_couv.webp 531w" width="531" height="845" loading="lazy" alt="Essay on Meta" title="Essay on Meta" sizes="(max-width: 960px) 100vw, (max-width: 604px) 50vw, 35vw" style="background-image:url(data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAADQBACdASoUACAAPqU+lUQjIaEYBAAzCkT0gAAt9MUIZ0JEqiYV+uS2g0hDPpvYQAD+9xA2jDOPmXyZWIReXixxztA9o841vWs8sh93pBXKo6fYFdXgtwf1X/JkKneDYVXPU0DikD62IMoEq6L7KvE4/i+bXaG9HkZEpgOJijhzt0wfxFjvddh6MOGStVnPE+7vgmcRjviOAAAA);background-size:contain;background-position:50%">
</figure>

Ma classe CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.image {
  img {
    display: flex;
    clear: right;
    flex-direction: column;
    width: auto;
    height: auto;
    margin: auto;
    max-height: 500px;
    max-width: 50%;
  }
  :any-link {
    display: contents;
    float: right;
  }
}

Celui-ci, en revanche, choisit bien :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<img 
src="../../Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_1024x0_resize_q100_h2_mitchellnetravali_2.webp" 
srcset=", /Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_200x0_resize_q100_h2_mitchellnetravali_2.webp 200w, /Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_400x0_resize_q100_h2_mitchellnetravali_2.webp 400w, /Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_604x0_resize_q100_h2_mitchellnetravali_2.webp 604w, /Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_1024x0_resize_q100_h2_mitchellnetravali_2.webp 1024w, /Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_1540x0_resize_q100_h2_mitchellnetravali_2.webp 1540w, /Images/meta/shining_parody.webp 2741w"
sizes="(max-width: 960px) 100vw, (max-width: 604px) 50vw, 35vw"
style="background-image:url(data:image/webp;base64,UklGRsgAAABXRUJQVlA4ILwAAACQBACdASoUAA4APqU8lkQjIaEYBAAzCkT2AE6ZQjgAFiEPkdRFvDgNvqkfJRwA/qbDR/wxYiPiS7JXTLvvnwwYaWQw15h3gtomB89vFc0gtnSmLQpfuGd+d40kzwaHEgZyM3z8yfURu+UgQyjzx3+eWEPYkrB/1fZQo2H+GRQHG7niX9It/+dwsRrwy89VR5rzLvHbnkXv8B3O2z48SO6PZm9uU+WSDaLH/uzMFZikRMKZ4RNbziRpefAAAA==);background-size:contain;background-position:50%" width="2741" height="1848">

J'obtiens la version de largeur 1024px, pas la plus grande. Même page.
Enfin, les deux ont "lazy=loading".

[mathieu]

votre souci n'inspire pas beaucoup de monde, pourriez-vous nous montrer une page complète avec les images qu'on pourrait tester directement ?

[sentinel66]

Oui, désolé j'étais occupé. Voici votre échantillon
Voici les caractéristiques de mon écran : largeur : 1366 hauteur : 768
Et l'image que j'obtiens affichée est 800x0_resize_q100_h2_mitchellnetravali_2.webp, tandis que la largeur et la hauteur affichées sont respectivement 479.656 et 251.203.

Voici l'objet img*:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img
    src="
      ./Images/spirituality/illusion_marriage_hufd4e02f7698220cbc96336c3b44dc7ef_798222_1024x0_resize_q100_h2_mitchellnetravali_2.webp"
    srcset="
      ./Images/spirituality/illusion_marriage_hufd4e02f7698 220cbc96336c3b44dc7ef_798222_200x0_resize_q100_h2_mitchellnetravali_2.webp 200w,
      ./Images/spirituality/illusion_marriage_hufd4e02f7698220cbc96336c3b44dc7ef_798222_400x0_ resize_q100_h2_mitchellnetravali_2.webp 400w,
      ./Images/spirituality/illusion_marriage_hufd4e02f7698220cbc96336c3b44dc7ef_798222_604x0_resize_q100_h2_mitchellnetravali_2.webp 604w ,
      ./Images/spirituality/illusion_marriage_hufd4e02f7698220cbc96336c3b44dc7ef_798222_800x0_resize_q100_h2_mitchellnetravali_2.webp 800w,
      ./Images/spirituality/illusion_marriage_hufd4e02f7698220c bc96336c3b44dc7ef_798222_1024x0_resize_q100_h2_mitchellnetravali_2.webp 1024w,
      ./Images/spirituality/illusion_marriage_hufd4e02f7698220cbc96336c3b44dc7ef_798222_1240x0_re size_q100_h2_mitchellnetravali_2.webp 1240w,
      ./Images/spirituality/illusion_marriage.webp 1528w"
    width="604"
    height="316"
    loading="lazy"
    sizes="(max-width: 400px) 100vw, 50vw, 35vw"
    style="
      background-image:url(data:image/webp;base64,UklGRtIAAABXRUJQVlA4IMYAAABwBACdASoUAAsAPqU8lkQjIaEYBAAzCkTgCdEf/2SgB ivHestOgaX4pTIvAAD +bNghV3J+e9BiBXI4dK4MMKJpamC8TduhYZsdKCIavKy5GWORlUqgxSnty3I1TuTawvwEctVQNSPqyupZAia84eZEbsuBcu739ue0vFmQdrS/yY7l0u8H/u93sR7/plp+foSKHl3Ym64wcE8ZW0Xhy HFzGhwvV/E4aqdMqaN/1WMZo0wXPZ/ko2fgN7L9Le8q5z1MOewAAAA=);
      background-size: cover"
>

ps: j'avais encore écrit en anglais. décidément...

[mathieu]

je pense que le souci sur cette page vient de "sizes". il faudrait plutot mettre quelque chose comme cela : (max-width: 400px) 80vw, 35vw.
ce qui veut dire qu'en dessous de 400 px, l'image prend 80 % de la largeur et 35 % dans les autres cas.
avec cette modification, mon navigateur utilise bien l'image de 604 px de large pour l'écran de 1366 px.

[sentinel66]

Mince alors je n'avais pas vu ça !!
Merci, vous avez vaincu html. Effectivement cet attribut était défecteux dans le code Golang (préprocesseur) que j'utilise.