HTML5 srcset: mixaggio della sintassi x e 01

Question

Sto cercando un modo per fornire immagini ad alta risoluzione ai client iOS8 fornendo allo stesso tempo risorse di immagini reattive per i browser che supportano la sintassi w. Secondo lo standard W3C dovrebbe essere possibile mescolare entrambe le sintassi in un attributo srcset:

<img alt="The Breakfast Combo" 
    src="banner.jpeg" 
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> 

(Fonte: http://drafts.htmlwg.org/srcset/w3c-srcset/)

Tuttavia, quando si esegue l'esempio in Chrome 38 (OS X, nessun alto dpi) che supporta la sintassi w in altri casi il browser carica sempre l'immagine più grande (banner-HD.jpeg), indipendentemente dalla dimensione della finestra. Quando aggiungo

banner.jpeg 1x 

al srcset Chrome utilizza tale immagine, ma ignora ancora le immagini 100W.

---

Nel mio caso vorrei specificare una versione più piccola di un'immagine così come le risorse 2x per entrambi:

<img src="default.png" 
    srcset="small.png 480w, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x"> 

che sembra funzionare su dispositivi 2x iOS 8, che captano media @ 2x .png perché non supportano la sintassi w. Tuttavia, a quanto pare, Chrome non sembra importare e carica medium.png indipendentemente dalla dimensione della finestra.

Sto facendo qualcosa di sbagliato qui o si tratta di un problema noto nell'implementazione di srcset da parte di Chrome?

Answer 1

1. Non guardare cosa fa il browser. Chrome è l'unico a farlo correttamente. (e 38 FF)
2. Non guardare questa bozza. Non è e non sarà implementato. Ecco quella giusta: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

miscelazione x con w in un descrittore non è valido e il browser scenderà i candidati, perché descrittore aw è sempre calcolato in ax descrittore:

<!-- invalid --> 
<img srcset="a.jpg 1x 300w, b.jpg 2x 600w" /> 

miscelazione x con descrittore aw per i diversi candidati è utilizzato/analizzato dal browser, ma non è valido e non ha senso nel 99% dei casi:

<!-- makes no sense: --> 
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="100vw" /> 

<!-- would make sense, because sizes is static in layoutpixel defined (i.e: 600/300 = 2x): --> 
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" /> 

Questo significa che se si utilizza il w si descrittore automat anche per ottimizzare la retina, non è necessario utilizzare un descrittore x aggiuntivo. (Vale a dire: 480W 2x = 960W)

Aditionaly, nella maggior parte dei casi di utilizzo di descrittore aw predefinito immagine/fallback dovrebbe essere definito in srcset:

<img src="small.png" 
    srcset="small.png 480w, mediumg.png 640w, large.png 960w" 
    sizes="100vw" /> 

3. prova respimage polyfill (tentativo dilettantesco per pubblicizzare il mio polyfill)

Answer 2

Che cosa si vuole fare, può essere raggiunto dal tag immagine:

<picture> 
 
    <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" 
 
      media="(min-width: 1100px)" /> 
 
    <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" 
 
      media="(min-width: 720px)" /> 
 
    <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" 
 
      media="(min-width: 450px)" /> 
 
    <img src="http://placehold.it/500x600/eee/ddd" 
 
     alt="image with artdirection" /> 
 
</picture>