Grafica a basso contenuto di grassi per il Web

Stipare troppe immagini gonfie in una pagina Web è sempre stato uno dei modi più sicuri per spaventare i visitatori. Le immagini che sono state salvate nel formato sbagliato o compresse male possono rallentare la velocità di download. Ecco perché un passaggio chiave nel Web design è sempre stato l'ottimizzazione dei pulsanti, delle foto e di altri elementi grafici di un sito prima che il sito venga pubblicato.

Stranamente, l'applicazione di modifica delle immagini più popolare, Adobe Photoshop, era storicamente tutt'altro che ideale quando si trattava di ottimizzare le immagini per il Web. Poiché mancava un'interfaccia efficiente per modificare e confrontare le immagini compresse, i progettisti dovevano installare speciali plug-in o difetto per applicazioni di imaging più recenti, come Macromedia Fireworks e Adobe ImageReady, create per il Web progetto.

Con Photoshop 5.5, Adobe ha affrontato molte delle carenze relative al Web del suo prodotto di punta. Una nuova opzione Salva per Web consente di visualizzare in anteprima, applicare e salvare facilmente le strategie di ottimizzazione per i principali formati di immagine Web: JPEG, GIF e PNG. E poiché Adobe ora include Photoshop con ImageReady 2.0, non è più necessario acquistare due applicazioni per ottenere potenza di imaging di fascia alta e pratiche opzioni di sviluppo Web. (Vedi la barra laterale "Ottimizzazione con il pilota automatico" per un suggerimento sull'utilizzo di ImageReady.) Armato di alcune conoscenze di base su come la compressione delle immagini funziona, anche i principianti di Photoshop dovrebbero essere ben preparati a creare siti ricchi di immagini da scaricare velocemente.

Compressione 101

I formati di compressione delle immagini sfruttano il fatto che descrivere un'immagine con formule matematiche può essere molto più efficiente che descriverla un pixel alla volta. È analogo a definire un'immagine di un quadrato verde come "una griglia 10x10 di pixel verdi" come contrario a definirlo come "un pixel verde, poi un altro pixel verde, poi un altro pixel verde" e Presto. Gli schemi di compressione spesso riducono la quantità di spazio necessaria per memorizzare un'immagine del 90 percento o più. (Per un confronto delle dimensioni del file dei diversi formati di imaging, vedere la barra laterale "Quale formato? Nozioni di base sulla compressione.”)

Diversi tipi di compressione delle immagini utilizzano formule diverse per comprimere le informazioni e ognuna presenta vantaggi e svantaggi. Fortunatamente, non devi essere un matematico per scegliere il miglior formato di compressione per le immagini della tua pagina web.

Se la tua immagine è una fotografia, ti consigliamo di salvarla come file JPEG, perché il formato JPEG può supportare milioni di colori in una singola immagine, e perché eccelle nella compressione di immagini con continui cambiamenti tono. Lo svantaggio principale di JPEG è che è un file in perdita formato di compressione, il che significa che si perdono alcune informazioni quando si salva un'immagine come file JPEG. La perdita di informazioni si presenta come piccoli artefatti che possono moltiplicarsi in intensità se si comprime ripetutamente l'immagine in quel formato. Quando si salva un'immagine come JPEG, si seleziona la quantità di compressione da applicare. Ciò implica decidere quanti artefatti sei disposto a sopportare in cambio di una piccola dimensione del file. L'opzione Salva per Web di Photoshop ti consente di regolare la compressione JPEG e visualizzare in anteprima l'immagine compressa affiancata all'originale non compresso. (Questa funzione di confronto era in precedenza uno dei vantaggi dell'utilizzo di Fireworks e ImageReady.)

Se vuoi davvero comprimere le tue foto, Save For Web ti consente di aggiungere la sfocatura gaussiana alle tue immagini prima di salvarle. JPEG funziona meglio con toni continui, quindi ammorbidire i bordi di un'immagine con lo strumento sfocatura può aiutare a migliorare la compressione.

L'altro tipo di immagine con cui i web designer si occupano regolarmente sono le illustrazioni con bordi netti e ampie aree di colore piatto. È meglio salvarli come GIF (o come PNG, di cui parleremo di seguito). Le GIF sono limitate a 256 colori, che di solito è sufficiente per illustrazioni a colori piatti (ma non per molte foto).

GIF è senza perdita, il che significa che non perde informazioni durante il processo di compressione. Tuttavia, una nuova regolazione con perdita in Photoshop 5.5 consente di aumentare la compressione scartando informazioni prima di salvare i file come GIF. (Per ulteriori informazioni, vedere la barra laterale "Metti le tue GIF su un file Dieta.")

La parte più importante dell'ottimizzazione della compressione con il formato GIF è ridurre il più possibile il numero di colori nell'immagine (questa è una delle opzioni di Save For Web). I pulsanti a colori piatti e la grafica simile possono spesso essere ridotti a 32 o meno colori e continuare a essere visualizzati correttamente. Altre funzioni Salva per Web, che includono la determinazione della modalità di selezione della tavolozza dei colori di una GIF e se si verificherà il dithering, hanno effetti diversi (ma minori) sulla dimensione del file, a seconda dell'immagine.

Uno sguardo a PNG

L'opzione Salva per Web consente inoltre di salvare le immagini come file PNG (pronunciato "ping"). PNG è il formato di compressione meno utilizzato, principalmente perché è il più recente e il supporto del browser è stato discutibile. (Microsoft Internet Explorer 4.5 per Mac non supporta affatto PNG; Netscape Navigator 4.5 supporta PNG ma non tutte le sue funzionalità.)

Il vantaggio del formato PNG è che può supportare milioni di colori, come JPEG, ma è anche senza perdite, come GIF. Pertanto, genera spesso un'immagine compressa di qualità superiore (anche se leggermente più grande in termini di dimensioni del file) rispetto a GIF. Altri vantaggi includono la sua capacità di memorizzare informazioni sulla gamma, che possono compensare le diverse luminosità del display tra i sistemi operativi e la trasparenza parziale.

Il formato PNG dovrebbe finalmente avere il pieno supporto nei browser versione 5.0, dando ai web designer motivi in ​​più per considerare PNG durante l'ottimizzazione delle immagini.

MIKE WOOLDRIDGE ( [email protected] ) è uno scrittore e web designer che vive a Berkeley, in California.

gennaio 2000 pagina: 111

Quale formato? Nozioni di base sulla compressione

FLAT-COLOR ART 140 per 160 pixel TIFF, non compresso: 39,4K JPEG, qualità media: 5,0K GIF, 16 colori: 4,3K PNG, 16 colori: 6,0K

FOTOGRAFIA 360 x 270 pixel TIFF, non compresso: 307,6K JPEG, qualità media: 15,6K GIF, 16 colori: 25,4K PNG, 16 colori: 29,3K

I tre diversi formati immagine disponibili nello strumento Salva per Web di Photoshop 5.5 comprimono le informazioni sui pixel utilizzando diverse formule matematiche e ogni formula produce risultati diversi a seconda dell'immagine in domanda. Ecco, ad esempio, le dimensioni originali e compresse per queste immagini fotografiche ea colori piatti.

Il formato JPEG è la scelta chiara per le immagini fotografiche. Sebbene il formato JPEG utilizzi diverse tecniche matematiche per risparmiare spazio sui file, la più importante è la trasformazione discreta del coseno (DCT). DCT consente di risparmiare spazio approssimando la disposizione dei pixel di un'immagine e scartando le informazioni meno rilevanti per l'occhio umano.

Per comprimere un'illustrazione a colori piatti, è meglio utilizzare il formato GIF o PNG. Questo perché JPEG, sebbene possa essere in grado di ridurre tale illustrazione a una dimensione di file simile, aggiunge artefatti all'immagine risultante (questo perché JPEG è un in perdita formato di compressione, il che significa che durante il processo si perdono alcune informazioni sui pixel). Questi artefatti saranno particolarmente evidenti nelle aree a tinta unita delle illustrazioni, motivo per cui si desidera utilizzare uno dei formati lossless: GIF o PNG.

Il formato GIF compatta le informazioni sull'immagine utilizzando una tecnica matematica nota come compressione LZW (dal nome dei suoi inventori, Abraham Lempel, Jacob Ziv e Terry Welch). LZW funziona creando un dizionario di diversi modelli di pixel che si verificano in un'immagine; quindi fa riferimento più volte alle voci del dizionario per ricreare l'immagine. Ciò consente di risparmiare spazio perché, mentre i modelli tendono a verificarsi più di una volta in un'immagine, devono essere memorizzati solo una volta nel dizionario. L'algoritmo di compressione GIF è brevettato da Unisys, che riscuote royalties sulle applicazioni che utilizzano la compressione GIF.

PNG comprime le informazioni utilizzando una tecnica simile alla compressione LZW di GIF, ma è abbastanza diversa da non violare il brevetto Unisys. (Il fatto che PNG non sia brevettato, così come JPEG, è uno dei motivi principali per cui gli sviluppatori hanno spinto per la sua accettazione.) Un file PNG può avere milioni di colori, ma ti consigliamo di usarne molto meno per la grafica piatta, perché così facendo diminuirai il file finale misurare.

Metti a dieta le tue GIF

La combinazione del salvataggio di Photoshop per gli strumenti web con alcuni trucchi del mestiere ti aiuterà a ottenere i tuoi file di immagine microdimensionati. I seguenti passaggi mostrano come puoi tagliare i kilobyte extra dalle tue GIF in modo che vengano scaricate più velocemente.

1) Ho iniziato con una scansione di un'illustrazione di un cartone animato. Ho portato l'immagine in Photoshop, ho scelto l'opzione Salva per Web e l'ho salvata come file GIF a 256 colori. La dimensione totale del file era di 6,7K.

2) La parte più importante della riduzione delle dimensioni di un file GIF è ridurre il numero di colori. Poiché il fumetto conteneva linee nere e aree di colore piatto e non aveva sfumature, sono stato in grado di ridurre il numero di colori da 256 a 16 senza degradare l'immagine. Ciò ha ridotto il file a 4,3K.

3) Un trucco per ridurre le dimensioni di un file GIF consiste nell'eliminare eventuali pixel vaganti nelle aree di colore prevalentemente a tinta unita. Ho utilizzato lo strumento clone per eliminare alcuni pixel verde scuro sparsi sullo sfondo del cartone animato. Quando ho salvato nuovamente il file, la sua dimensione è scesa a 3,9K.

4) Il passaggio finale è stato l'applicazione della funzione Lossy GIF, una novità di Photoshop 5.5. Lossy GIF sfrutta il fatto che GIF si comprime meglio quando i pattern di pixel si ripetono all'interno di un'immagine. Quando impostate il dispositivo di scorrimento GIF Salva per Web con perdita più in alto, Photoshop trova le sequenze di pixel simili e le rende identiche. Per questa illustrazione, ho impostato il cursore con perdita su 30. Ciò ha ridotto il file a una dimensione finale di 3,7 K, ovvero il 45 percento inferiore rispetto al file GIF con cui ho iniziato.

Ottimizzazione sul pilota automatico

Hai bisogno di comprimere una cartella piena di immagini, ma ti stai avvicinando a una scadenza? Questo è quando ImageReady 2.0, che è in bundle con Photoshop 5.5, torna utile. I droplet di ImageReady sono schemi automatici di ottimizzazione delle immagini che appaiono come icone del desktop. Ecco come creare e utilizzare una goccia dall'interno di Photoshop.

1) Fai clic sul pulsante largo nella parte inferiore della finestra Strumenti di Photoshop. Questo aprirà ImageReady. (Se hai un'immagine aperta in Photoshop, verrà importata in ImageReady.)

2) Seleziona un formato di file compresso dalla finestra Ottimizza di ImageReady e regola le impostazioni di compressione a tuo piacimento.

3) Fare clic sull'icona della goccia (superiore) nell'angolo in alto a destra della finestra Ottimizza (l'icona è la freccia rivolta verso il basso). Questo ti chiederà di nominare e salvare la tua nuova gocciolina. Nella schermata (metter il fondo a), ho salvato quattro diversi schemi come goccioline in una cartella.

4) Per far funzionare il tuo nuovo droplet, trascina e rilascia uno o più file immagine (o cartelle) sull'icona. ImageReady aprirà, comprimerà e salverà nuove versioni dei file.

Facendo doppio clic sull'icona di una goccia si aprirà un menu di azione ImageReady che ti consente di perfezionare ulteriormente il tuo schema di compressione dell'immagine.