Scrset et ratio

Bonjour à tous,

Voilà je vous explique mon soucis.
Sur un slider, je souhaite qu'il y ai une image horizontale sur desktop et carré en mobile.
D'autant que sachant que ce slider étant full-width, je ne souhaites bien évidemment pas charger une image de 1920px de large sur un mobile.
Donc pour l'instant j'ai fait:

<img srcset="test_320.jpg 320w,
             test_640.jpg 640w,
             test_1024.jpg 1024w,
             test.jpg 1920w"
             sizes="100vw" 
     src="test.jpg">
        </div>

Nb
test_320.jpg image carré (destiné au mobile)
test_640.jpg image carré (destiné au mobile)
test_1024.jpg image horizontale (destiné au desktop)
test.jpg horizontale (destiné au desktop)

Mais je ne comprends pas du tout les résulats ni comment obtenir ce que je veux
écran de 0px-> 220 image test_320.jpg
écran de 220px-> 400 image test_640.jpg
écran de 400px-> 700 image test_1024.jpg
écran de 700px-> image test.jpg


Je suppose évidemment que c'est une question de pixel ratio,
Mais j'ai bien tenté plein de chose impossible d'arriver au resultat escompté
Comme:

sizes="(max-width: 320px) 320px,
             (max-width: 640px) 640px,
             (max-width: 1024px) 1024px,
             1920" 

Sachant qu'en revanche j'y arrive par <picture>

<picture>
    <source srcset="test_320.jpg"
            media="(max-width: 320px)">
	<source srcset="test_640.jpg"
	            media=" (max-width: 640px)">
	<source srcset="test_1024.jpg"
	            media=" (max-width: 1024px)">
    <img src="test.jpg" alt="" />
</picture>

Si quelqu'un avais une piste
Modifié par gotcha5832 (20 Aug 2020 - 12:06)