IMG adaptative (srcset) ne choisir pas l'image la plus logique mais la plus lourde
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:
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:
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:
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".
