Come utilizzare l'elemento immagine per immagini nitide su dispositivo mobile

Question

L'elemento immagine si sta diffondendo rapidamente e rapidamente (http://caniuse.com/#search=picture), e penso che sia un ottimo modo per evitare di mostrare immagini sovradimensionate o troppo piccole, specialmente quando si desidera visualizzare la stessa immagine su cellulare e desktop al 100% della larghezza della finestra.

che può essere risolto in questo modo:

<img 
    srcset="large.jpg 1920w, 
      medium.jpg 720w, 
      small.jpg 360w" 
    src="medium.jpg"> 

Questo permette al browser di essere intelligente e decidere quale immagine da caricare, ma trovo un problema con questo approccio: molti dispositivi mobili hanno una densità di pixel di 2 o più! Pertanto, quando lo visualizziamo per 360w, avremmo effettivamente bisogno dell'immagine media se vogliamo che l'immagine appaia nitida. Si potrebbe essere fatto in questo modo:

<picture> 
 
    <source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)"> 
 
    <source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)"> 
 
    <img src="http://goo.gl/LsuU9t"> 
 
</picture>

Il problema qui, a mio parere, è che questo può crescere tanto quanto la risoluzione dello schermo cresce e perdiamo i benefici di navigatore abilmente decidere il migliore opzione.

Quindi, la mia domanda è se c'è un punto a metà tra i due, quindi posso ancora separare tra html e css.

Answer 1

Il browser tiene conto della densità di pixel quando si seleziona un'immagine. Quindi un dispositivo con una vista ampia di 360 CSS px e una densità di 2x pixel selezionerebbe medium.jpg. Questo è esattamente ciò che il descrittore w e l'attributo sizes sono progettati per risolvere! Non utilizzare picture qui.

vedere anche https://ericportis.com/posts/2014/srcset-sizes/