iOS - Immagini diverse basate sul dispositivo OPPURE ridimensionamento della stessa immagine?

Question

Sembra che gli sviluppatori creino sempre risorse immagine diverse per dispositivi diversi e caricandole in base al dispositivo. Ma ci sono degli svantaggi solo nella creazione di immagini per il più grande dispositivo di risoluzione (iPad) e quindi ridimensionare l'immagine per iPhone 6, 5, ecc.?

Io uso SpriteKit, quindi creerei solo SKSpriteNodes di dimensioni diverse e applicheremo la stessa texture e scaleremo per adattarlo al nodo.

So che le prestazioni possono essere qualcosa da considerare (caricamento di immagini di grandi dimensioni per dispositivi precedenti). Ma a parte questo, c'è qualcos'altro? Queste immagini sembrerebbero più sfocate/sfocate?

Answer 1

La risposta perfetta/purista sarebbe utilizzare immagini e codice separati per ogni risoluzione del dispositivo.

Tuttavia, dal punto di vista del tempo e della sanità mentale, è opportuno utilizzare un set limitato in quanto il numero di risoluzioni e dimensioni dello schermo non diminuirà presto. Quindi, perché sprecare ore a preparare più immagini a meno che non possa essere reso più semplice farlo da parte di artisti come xcode.

Per immagini con proporzioni quadrate o fisse, penso che sia necessaria solo un'immagine. C'è il problema per le immagini come sfondi in cui, indipendentemente dalla risoluzione, dovrai soddisfare almeno le diverse razioni di aspetto: quindi le immagini con proporzioni separate sono essenziali (come 3: 2 e 16: 9) a meno che non ti dispiaccia lo schiacciamento, lo stretching o ritagliare le immagini.

Se si riscontra un problema nelle prestazioni, è sempre possibile aggiungere immagini di risoluzione inferiore in un momento successivo.

In termini di pixelizzazione, è qualcosa che non si può evitare. Se pensi a cosa sta succedendo quando passi da una risoluzione x3 a una risoluzione x1, devi mescolare 3x3 pixel in 1x1. Ad alta risoluzione, tutto ciò che è largo un solo pixel (come una linea) o ha un rapido cambiamento di colore su alcuni pixel ne risentirà maggiormente. Ci sono molti articoli online su questo che puoi guardare.

L'unico modo per evitare la pixelizzazione consiste nell'utilizzare immagini vettoriali, ma ciò richiederebbe un software speciale per caricare immagini vettoriali e renderle in UIImages.

Ogni immagine subirà differenze quando si ridimensiona. Un pensiero potrebbe essere quello di andare per le immagini x2 che ridimensionate 1 per iPhone 3 e fino 1 a x3 per iPhone 6+. Ciò coprirebbe la maggior parte dei dispositivi attuali con risoluzione nativa e forse offrire una pixelazione meno visibile.

Answer 2

Sono stato sotto l'impressione per un po 'che anche una singola immagine che avresti scalato in seguito andrebbe bene.

Per la moltitudine di modi di fare così, insieme ad alcuni parametri di riferimento, controlla NSHispter: Image Resizing Techniques

E per ulteriori letture, controlla la Core Image di Apple doc, cui l'articolo NSHipster cita pure.

Answer 3

Nessuno ha effettivamente risposto se la qualità dell'immagine sarebbe stata ridotta. Ho appena provato a implementarlo e le immagini appaiono leggermente più pixellate di quelle che sarebbero state mantenute nella loro dimensione nativa.

Answer 4

Dipende. Ovviamente è più economico utilizzare un'immagine o un'immagine per proporzione, se il troncamento dell'immagine imporrà un problema.

Per immagini come le fotografie questo può essere perfettamente accettabile perché questo tipo di immagini tende a non includere caratteristiche pixel-perfette.

Se ci occupiamo di grafica comunque: linee sottili, contorni netti, caratteristiche pixel-perfette - il ridimensionamento potrebbe essere gravemente dannoso per la qualità.

Considera l'esempio seguente: Immagina di voler creare un campo di testo personalizzato con una dimensione fissa. L'area di testo deve essere racchiusa da un contorno nero con una larghezza della linea di 1 pixel. Stai utilizzando la risoluzione retina per la tua opera d'arte e il tuo punto di partenza è la dimensione dello schermo da 4 "Come verrà visualizzata la scatola su altre dimensioni dello schermo, a condizione che il campo di testo si riduca insieme allo schermo? -retina display?

Non retina: la risoluzione deve essere dimezzata. Immagina un blocco di 2x2 pixel nel disegno, dovrà essere calcolato in un singolo pixel. Il nostro schema è solo 1px in larghezza, quindi un 2x2 il pixel block con una linea che lo attraversa contiene due pixel neri e due bianchi, il pixel non retina risultante sarà grigio, in realtà il ridimensionamento è un po 'più complesso, ma il risultato sarà una linea sfocata, meno nera e leggermente più spessa

Retina in scala: la risoluzione deve essere aumentata. Immaginate un dispositivo con oluzione di 1,5x lo schermo da 4 ". La linea 1px dovrebbe diventare larga 1,5 pixel che, ovviamente, non funzionerà. Invece, la linea originale di 1px sarà allungata su una scala di grigi su due (o più) pixel, approssimando la "quantità di nero" che avrebbe una linea di 1,5px.

In entrambi i casi (su o giù) il ridimensionamento renderà il contorno sfocato, più spesso e meno nero.

L'esempio non è perfetto perché iOS consente di definire immagini con parti estensibili che si adattano perfettamente. Per la nostra scatola rettangolare, questo sarebbe effettivamente possibile. Tuttavia, non funziona per opere più complesse.

Se pixel perfezione è un must, non v'è alcun modo per aggirare le immagini per ogni risoluzione o grafica vettoriale (quarzo/SVGKit/...)

Edit: ho riprodotto il mio esempio in Photoshop utilizzando scalatura bilineare . Potrebbe sembrare leggermente diverso sul dispositivo perché potrebbe utilizzare un altro algoritmo di ridimensionamento. Ma penso che si ottiene il punto ...

Answer 5

posso rispondere dalla mia esperienza in termini di utilizzo della memoria. Le persone hanno risposto abbastanza alla qualità dell'immagine, quindi l'unico altro problema è l'utilizzo della memoria. Ho usato la tecnica che hai descritto nel mio gioco Piston Flip e ha funzionato bene perché non stavo usando molte trame o nodi. Tuttavia, in un altro gioco su cui sto lavorando, che usa le tessere, non posso permettermi di usare immagini grandi e ridimensionarle perché ogni dispositivo può praticamente gestire solo il caricamento delle tessere specificate per le sue dimensioni dello schermo.

Quindi dipende davvero.