Ho un sito Web mobile che sfrutta jQuery Mobile, tuttavia le immagini, francamente, sembrano schifo su iPhone 4/4S. Presumo che lo stesso andrà per il "nuovo iPad" quando sarà disponibile entro questa settimana.Qual è il modo corretto di gestire le immagini Web ad alta risoluzione per i display ad alta risoluzione (principalmente display retina iOS)?
So che questo ha qualcosa a che fare con il rapporto pixel e/o DPI dell'immagine (o PPI o qualsiasi altra cosa si voglia chiamare ... non entriamo in una discussione al riguardo). Voglio semplicemente sapere qual è il metodo migliore per offrire immagini web ad alta risoluzione per questi display retina iOS.
In un primo momento, ho pensato che la modifica dell'immagine DPI (in Photoshop) avrebbe risolto il problema. Ho scattato alcune immagini di esempio e ridimensionato a una larghezza di 190 px. Ho salvato un'immagine a 72 DPI e l'altra a 200 DPI. Questo non ha avuto alcun effetto. Guarda tu stesso (su un iPhone 4/4S): http://haxway.com/restest/1.html L'immagine in basso di ciascuno è quella da 200 DPI.
Quindi, invece di salvare l'immagine ad alta risoluzione a 200 DPI, l'ho salvato nuovamente a 72 DPI, ma questa volta ho aumentato la larghezza (a 528 px) in modo che quando ridimensionato a una larghezza di 190 px sarebbe a ~ 200 DPI. Questo sembrava fare il trucco: http://haxway.com/restest/2.html Se si visualizza il codice sorgente, è possibile vedere che sto forzando una larghezza/altezza sui tag immagine (<img src="w4.jpg" alt="" width="190" height="143">).
Tuttavia, non sono convinto che questa sia la soluzione migliore. Non utilizzare gli attributi width/height per ridimensionare un'immagine influisce sulle prestazioni di rendering in quanto il dispositivo deve ridimensionare l'immagine piuttosto che caricarla (e non toccarla ulteriormente)?
Dopo alcune ricerche, sembra che ci siano alcune query multimediali CSS come -webkit-min-device-pixel-ratio [1] in cui è possibile utilizzare diversi CSS per i display ad alta risoluzione e quindi caricare immagini ad alta risoluzione nel CSS. Ma ho bisogno di indirizzare i tag HTML <img>. Un altro articolo che ho letto (mi dispiace aver perso il link) suggerisce di usare Javascript per scambiare le immagini "normali" con quelle ad alta risoluzione. Sembra pazzesco!
C'è un modo migliore di andare su questo? Mi rendo conto che le opinioni possono differire su quale sia il modo "migliore". Se i pro/contro di ciascun metodo potrebbero essere spiegati, sarebbe fantastico! Il mio obiettivo è quello di utilizzare qualsiasi metodo per renderizzare il più veloce (si spera che non si utilizzi un javascript hacky, ecc.).
Grazie!
[1] http://aralbalkan.com/3331
Il tuo campione è un po 'strano. Quello che fanno i browser, è mostrare le immagini pixel per pixel. Visto così, le tue immagini sono simili. I formati di stampa delle immagini a 200 dpi sono appena più piccoli. Se invece dovessi caricare la stessa immagine con una risoluzione maggiore - contenente più pixel - vedresti i browser mostrare le immagini 3 volte più grandi. Anche questo non è ciò che vuoi. – commonpike
... esattamente. Non è quello che voglio. Quindi, come questo approccio attuale è "pescoso"? (Non intendo attaccare ... solo curioso.) –
scusa se questo suonava offensivo. Mi confondeva: quello che vuoi, presumo, è la stessa dimensione dell'immagine con una risoluzione più alta. Ma hai caricato invece un'immagine più piccola con una risoluzione più alta. Se i browser * rispetteranno * il dpi, le immagini da 200 dpi che hai caricato saranno molto più piccole. (in entrambi i casi, grazie per le immagini di prova - mi hai aiutato). – commonpike