Media query per immagini @ 2x, @ 3x e @ 4x

Question

Sto cercando di supportare una varietà di rapporti pixel sul sito corrente che sto sviluppando. Voglio anche assicurarmi di fornire eventuali prefissi del browser richiesti per supportare la più ampia varietà di dispositivi/browser all'interno della ragione. Inoltre, sto usando SVG ovunque sia possibile, ma ho bisogno di una soluzione per le immagini fotografiche. Idealmente, vorrei fornire:

1. immagine 1x @ (Proporzioni pixel 1.0) (Proporzioni pixel di 1.25+)
2. @ 2x immagine
3. @ immagine 3x (Proporzioni pixel di 2.25+)
4. @ 4x dell'immagine (rapporto di pixel di 3.25+)

la mia domanda è quale sarebbe il modo migliore per andare a scrivere le media query per raggiungere questo obiettivo? La mia preoccupazione principale è che i miei argomenti siano corretti per ciò che sto cercando di ottenere. Apprezzerei qualsiasi suggerimento o consiglio che hai. Attualmente il mio codice è il seguente:

/* @1x Images (Pixel Ratio 1.0) */ 
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);} 

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);} 
} 

/* @3x Images (Pixel Ratio of 2.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 9/4), 
     only screen and (-webkit-min-device-pixel-ratio: 2.25), 
     only screen and (min-device-pixel-ratio: 2.25), 
     only screen and (min-resolution: 2.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@3x.png);} 
} 

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4), 
     only screen and (-webkit-min-device-pixel-ratio: 3.25), 
     only screen and (min-device-pixel-ratio: 3.25), 
     only screen and (min-resolution: 3.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@4x.png);} 
} 

Alternativa 1: Ho preso in considerazione l'utilizzo del tag <picture> per raggiungere questo obiettivo. So che puoi fornire contenuti alternativi per i browser che non supportano lo standard <picture>, che sarebbe la mia principale preoccupazione nell'utilizzarlo. Ragazzi, pensate che sarebbe la migliore pratica per fornire foto con più pixel?

Answer 1

Bene, ignorando le ovvie differenze funzionali tra un'immagine di sfondo e un elemento di immagine in linea come picture, ci sono alcuni pro e contro tra i due.

Pro immagine in linea per/contro per background-image:

non c'è modo di usare un media-query per uno stile in linea, in modo da specificare un background-image richiede dichiarando un selettore per qualsiasi elementi richiedono immagini di sfondo separano dal tag . Questo complica questa soluzione per gli elementi creati dinamicamente.

Inoltre, se si è interessati a servire solo immagini con proporzioni pixel diverse, è sufficiente utilizzare lo srcset attribute of an img tag anziché l'elemento picture. L'elemento picture richiede più markup e ha un numero di funzioni che non sono necessarie per questo, più srcset è leggermente meglio supportato.

Pro per background-image/contro immagine in linea per:

supporti risoluzione basata interroga are much better supported di the picture element e the srcset attribute. Alcuni browser non supportano l'elemento picture o l'attributo srcset in questo momento, anche se il supporto sta migliorando.

Per inciso, se si desidera ottimizzare il supporto del browser per le versioni di Firefox precedenti a 16, è possibile aggiungere the min--moz-device-pixel-ratio selector, che ha la stessa sintassi di -webkit-min-device-pixel-ratio. Ecco un esempio usando il tuo CSS.

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min--moz-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);} 
} 

Le migliori pratiche?

Si consiglia di utilizzare le query multimediali per i luoghi in cui è necessaria un'immagine di sfondo e srcset o picture per i luoghi in cui è necessaria un'immagine in linea. Tuttavia, a questo punto, potrebbe essere più importante considerare quali browser è necessario supportare. Per questo, vedere i collegamenti compatibilmente (possibilmente considerando che molte persone che utilizzano browser più vecchi sono probabilmente anche utilizzando monitor a risoluzione standard):

• CSS media resolution
• picture element
• srcset attribute

Answer 2

davvero usare la img[srcset] attributo. Il suo supporto è molto meglio di stato in un'altra risposta. Current Chrome e Safari supportano questo attributo. E noi conosciamo lo, Firefox 38 e IE 12 lo supporteranno anche. Inoltre la sintassi consente di eseguire semplici miglioramenti progressivi e non è necessario scrivere query multimediali complesse.

Questo è come sembra:

<img src="img/shopping_bag@1x.png" srcset="img/shopping_bag@2x.png 2x, img/shopping_bag@3x.png 3x" /> 

E nel caso in cui si vuole aggiungere il supporto per i browser non-portante, è possibile scegliere tra differentpolyfills.

Nel caso in cui si utilizza un polyfill si potrebbe cambiare la marcatura a questo: domanda

<img srcset="img/shopping_bag@1x.png, img/shopping_bag@2x.png 2x, img/shopping_bag@3x.png 3x" />