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".