In un gioco HTML5 2D, qual è il miglior formato di immagine da utilizzare e perché? Dovrei usare formati diversi in situazioni diverse? Ad esempio .png per l'immagine di sfondo, .jpeg per i frame di animazione e così via ...
La parte del "perché" è importante per me. Non deve essere localizzato in HTML5, può anche essere un consiglio generale.
Risposte:
Il formato dell'immagine è solo un modo per salvare i dati grezzi di pixel, quindi finché si utilizzano bitmap, il formato di solito non fa differenza nell'esecuzione dopo il passaggio di caricamento. Ciò che conta sono i dati pixel forniti all'API grafica. Esistono tre formati comunemente utilizzati nel Web:
.gif Il formato GIF (ora normalmente deprecato) viene utilizzato per le immagini con 256 colori o meno, portando a dimensioni molto ridotte. La GIF viene spesso utilizzata anche per le animazioni. Quando si utilizzano solo 256 o meno colori, si tratta di un formato senza perdita, il che significa che non viene persa la qualità in termini di compressione. In caso contrario, la varietà di colori deve essere ridotta a 256, con conseguente riduzione della qualità.
.png Il formato Portable Network Graphics è, a mio avviso, il formato di immagine più utilizzato in assoluto, poiché presenta un buon tasso di compressione pur essendo in grado di salvare più colori rispetto al GIF. PNG è anche in grado di traslucenza (o comunemente chiamato trasparenza, che è il nome sbagliato poiché un pixel deve essere 100% traslucido per essere chiamato trasparente). È anche un formato senza perdite e mirava a migliorare e sostituire GIF nel 2006 ( fonte , primo paragrafo). Lo uso personalmente come tipo di immagine su siti Web e giochi.
.jpeg Il formato JPEG è comunemente usato per le foto e cose del genere. Non è capace di traslucenza, né garantisce una compressione senza perdita. È comune specificare la qualità durante la compressione, portando a un compromesso tra spazio e qualità.
Analizziamo alcuni casi d'uso:
Tieni presente che il consumo di memoria e le prestazioni dell'API grafica sono generalmente uguali tra questi formati. Ciò che conta sono le dimensioni e la velocità di caricamento (è possibile immergersi negli algoritmi di questi formati se si desidera stimare il costo di caricamento). Il consumo di memoria di qualsiasi immagine allo stato grezzo è generalmente definito dal width*height*4byte della regola generale per un formato pixel RGBA, che è il più comune.
Solo un paio di cose da aggiungere alla risposta di @ Marco:
.gif è gravemente obsoleto. Eviterei completamente di utilizzare i file .gif il più possibile. Penso che le persone li usino solo in questi giorni a causa delle animazioni nel browser e al momento i png animati non sono ben supportati .
Quindi tutto ciò che hai è jpg e png.
PNG: è senza perdita di dati . L'unica cosa che stai prendendo in considerazione qui è il tasso di compressione che ottieni. Generalmente fa un buon lavoro comprimendo blocchi di colori solidi , ma un cattivo lavoro comprime scene con molte variazioni.
JPG: Fa un lavoro orrendo con blocchi di colore solido (entrambi perde dettagli e occupa più spazio di png) ma un ottimo lavoro con immagini con molte variazioni (buona compressione, perdita di qualità dell'immagine quasi impercettibile).
Per esempio
Quindi qui, con i solidi blocchi di immagine a colori, perdiamo i dettagli e subiamo ulteriori dimensioni utilizzando JPG . Conclusione: non utilizzare jPG per immagini con grandi blocchi di colore solido.
Ora, pensa a una scena dai colori intensi:
Quindi in breve
Astraggiamo ulteriormente la domanda, quindi:
In un gioco in esecuzione sulla piattaforma designata, quali sono le considerazioni per i media che utilizza?
Considerazione n. 1: dimensioni, ovvero velocità di caricamento
Indipendentemente dalla piattaforma e dal gioco e dal tipo di media, il fatto è che deve essere inserito in un contesto per il rendering. Su una piattaforma basata sul Web, questo significa download. In un ambiente desktop o console, significa caricare da un supporto di archiviazione locale. Il caricamento dei file multimediali richiede tempo. Le piattaforme basate sul Web possono essere particolarmente paralizzate se è necessario scaricare molti media su una connessione lenta.
Considerazione n. 2: consumo di memoria
Correlato a, ma non uguale alla dimensione. Un pezzo di media può essere compresso su disco o in un pacchetto o altro, ma una volta caricato come texture o buffer audio per qualcosa potrebbe essere un po 'più grande. Il dispositivo su cui è in esecuzione il gioco non ha una quantità infinita di memoria.
Considerazione n. 3: qualità e stile
I media sono di qualità sufficiente? Questo può essere cruciale per il tuo gioco ed è spesso in contrasto con la considerazione delle dimensioni. Molto spesso è necessario un equilibrio tra i due. Alcuni giochi hanno una grafica incredibilmente semplice (minecraft) e tuttavia hanno molto successo. Altri hanno una grafica davvero fantastica che occupa grandi quantità di memoria, ma offre una qualità coinvolgente con sfondi dall'aspetto sorprendente. Alcuni giochi scappano con blip e bloop per effetti sonori, mentre altri devono avere musica stereo da 41k.
Quindi, in base alla più importante, prendi la decisione giusta per il tuo gioco. La decisione è per gioco, non una taglia adatta a tutti.
In genere, scegli la dimensione del file più piccola che fornisce ancora una qualità accettabile dell'immagine. Inoltre, png supporta l'alfa, quindi non è necessario gestire immagini aggiuntive per gestire un livello alfa.
Cosa / quando usare png per (in generale ):
PNG è senza perdita di dati, ma l'intensità del colore può essere modificata.
Usa jpg per i casi rimanenti - immagini fotografiche, dipinti, immagini con molti piccoli dettagli, colori e sfumature. Se provi a usare PNG per memorizzare queste immagini noterai che la dimensione del file è molto più grande del jpg.
Strumenti come Adobe Image Ready ti daranno un'anteprima dell'immagine insieme alla dimensione del file in una varietà di formati e impostazioni di qualità.