responsive image (srcset) doesn't the choose the appropriate version

Bonjour,
J'ai un problème avec les images adaptatives.
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 la plus grande version de l'img, même si une version plus petite 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_h2mitchellnetravali 2.webp" avec une largeur de 400px.

Voici le html :

<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 class css

.image{
    clear:right;
    display:flex;
    flex-direction:column;
    max-width:50%;
    img{max-height:500px;
        width:auto;
        height:auto;
        margin:auto;}
    float:right;
    :any-link{display:contents}}

Dans le cas plus bas par contre, la bonne version est choisie. J'obtiens celle de largeur 1024px. Sur la même page.

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

Finalement, j'ai lazy=loading sur toutes les images (pas ajouté ici).
J'espère que vous y comprendrez quelque chose... essayé sur chromium et librewolf