Bon je sais que j'en demande beaucoup mais je n'arrive pas à comprendre comment fonctionne srcscet + sizes avec picturefill.js
Malgré des tests, une dizaine de tuto et recommandations des hautes sphères, je ne comprends pas, il y a qqch qui m'échappe (mes tests ne correspondent pas à la réalité décrite dans les articles).
Qqn utilise t il cette solution?
Ex:
Normalement, c'est simple: le browser doit prendre la taille la plus adaptée à la situation.
MAIS moi j'ai des gros soucis:
Par ex sur un mobile avec un écran de 320 px de large et une densité de pixel 1x => il prend pas "monimage-tiny.jpg 320w" mais "../img/logo-id/monimage-normal.jpg 780w"
Et si écran 320px avec densité de pixel 2x => il prend direct le "../img/logo-id/monimage-big.jpg 1560w"
Embêtant n'est ce pas???
Une idée?
Malgré des tests, une dizaine de tuto et recommandations des hautes sphères, je ne comprends pas, il y a qqch qui m'échappe (mes tests ne correspondent pas à la réalité décrite dans les articles).
Qqn utilise t il cette solution?
Ex:
<img
src="../img/logo-id/monimage.jpg"
srcset="../img/logo-id/monimage-tiny.jpg 320w,
../img/logo-id/monimage-small.jpg 390w,
../img/logo-id/monimage-normal.jpg 780w,
../img/logo-id/monimage-nobig.jpg 1170w,
../img/logo-id/monimage-big.jpg 1560w"
sizes="100vw"
alt="mon image">
Normalement, c'est simple: le browser doit prendre la taille la plus adaptée à la situation.
MAIS moi j'ai des gros soucis:
Par ex sur un mobile avec un écran de 320 px de large et une densité de pixel 1x => il prend pas "monimage-tiny.jpg 320w" mais "../img/logo-id/monimage-normal.jpg 780w"
Et si écran 320px avec densité de pixel 2x => il prend direct le "../img/logo-id/monimage-big.jpg 1560w"
Embêtant n'est ce pas???
Une idée?