Per esempio, un sottile gradiente di sfondo a una pagina Web, quali sono i vantaggi e gli svantaggi di salvarlo come una png a 16 bit / canale?
I colori rappresentati da > 8bits sono visualizzati nei dettagli previsti in tutti i browser?
Vantaggi
Svantaggi
Devi esprimere un giudizio di valore - è giustificato per un elemento di sfondo? Probabilmente no.
Il vantaggio di un PNG a 8 bit per canale indicizzato è la sua dimensione.
Lo svantaggio è che se l'immagine contiene più di 256 colori, il programma di editing grafico tenterà di adattare la tavolozza, il che significa che alcuni colori cambieranno leggermente. Alcuni programmi sono intelligenti per scegliere una tavolozza ben adattata. Alcuni sono ritardati. Non usare gli ultimi.
Per un gradiente sottile , questo svantaggio non esiste, poiché i gradienti sottili difficilmente potrebbero usare più di 256 colori. Per ridurre ulteriormente le dimensioni dell'immagine, puoi limitare il PNG 8 a utilizzare meno di 256 colori: ad esempio solo 16.
Nota sui gradienti in generale:
Se si tratta di un gradiente orizzontale o verticale, assicurati che l'immagine sia alta un pixel o alta un pixel . Questo sembra ovvio, e tuttavia ho visto un numero enorme di designer, programmatori e persone specializzati in HTML e CSS che inseriscono un'immagine di 1000 × 150 pixel per avere un gradiente dall'alto di 150 pixel.
Se non dovrebbe supportare i browser legacy, considera i gradienti CSS 3 invece delle immagini. Per il browser, l'immagine migliore in termini di dimensioni non è affatto un'immagine.
Quando devi supportare i browser legacy, considera comunque i gradienti CSS 3 . Le persone che utilizzano ancora Internet Explorer 8 o versioni precedenti probabilmente non si preoccupano troppo delle belle sfumature, delle ombre o degli angoli arrotondati. Per loro, il tuo sito web sarà monotono, piatto e quadrato, ma ancora utilizzabile .
Nota sui programmi di modifica della grafica:
L'utilizzo di un programma di editing grafico professionale aiuta. Ad esempio in Photoshop, puoi vedere immediatamente come sarà resa l'immagine con un set di impostazioni, ad esempio Percettivo, Diffusione, Colori 16. Ciò consente di provare rapidamente diverse opzioni e scegliere quella che è appena sopra il livello sotto la quale la qualità dell'immagine diminuire visivamente.
Se non ne hai uno, puoi comunque salvare più varianti della stessa immagine, quindi confrontarlo in un visualizzatore affiancato.
Nota sulla dimensione delle immagini:
La maggior parte degli utenti non sarà disgustata da artefatti JPEG minori o PNG con palette non ottimali, specialmente sui dispositivi mobili. La velocità, d'altra parte, è importante, specialmente sui dispositivi mobili. Se un sito web è bello ma ogni immagine impiega secoli a caricarsi a causa delle sue dimensioni, nessuno utilizzerà il sito web. Considerare questo pregiudizio quando si sceglie il formato e le impostazioni appropriati. In altre parole, guarda più alla dimensione dell'immagine e meno alla qualità visiva.
Alcuni altri suggerimenti:
Giocando con le immagini e specialmente con PNG 8, potresti scoprire quanto segue:
A volte, combinare più immagini in una (cioè creare uno sprite CSS ) è vantaggioso in termini di prestazioni: non solo i browser richiedono un'immagine, invece di fare più richieste, ma anche questa immagine non è molto più grande (e talvolta anche più piccola¹) di più di quella originale.
Inoltre, la suddivisione di una immagine in più unità può ridurre di molto la dimensione complessiva quando si lavora con PNG 8. Ricordo di passare da 200 KB sprite CSS monolitici a 40 KB dividendoli in dieci immagini. Secondo le metriche, questo ha avuto un impatto positivo sul server, nonostante il fatto che il browser fosse costretto a fare dieci richieste invece di una.
¹ Non ricordo il caso quando l'ho visto. Se qualcuno conosce un caso del genere, sentiti libero di modificare la risposta.
Leggi altre domande sui tag web-development browser image