Opzioni di ottimizzazione per immagini e GIF animati

I formati per la grafica Web possono essere bitmap (rasterizzato) o vettoriale. I formati bitmap (GIF, JPEG e PNG) sono vincolati alla risoluzione, ovvero le dimensioni di un’immagine bitmap, nonché probabilmente la sua qualità, cambieranno in base alla risoluzione del monitor. I formati vettoriali (SVG e SWF) sono svincolati dalla risoluzione e possono essere ridimensionati senza che la qualità dell’immagine ne risenta. I formati vettoriali possono includere anche dati rasterizzati. 

Opzioni di ottimizzazione JPEG

JPEG è il formato standard per la compressione di immagini a tono continuo come le fotografie. L’ottimizzazione di un’immagine come formato JPEG si basa sulla compressione con perdita di dati, che comporta lo scarto selettivo dei dati.

Determina il livello di compressione. Maggiore è la qualità, maggiori saranno i dettagli mantenuti dall’algoritmo di compressione. Tuttavia, se si utilizza un'impostazione di qualità elevata, le dimensioni del file risulteranno maggiori rispetto a quelle del file di qualità bassa. Visualizzate l’immagine ottimizzata con diverse impostazioni di qualità per trovare il miglior equilibrio tra qualità e dimensioni del file.

Consente di creare un JPEG avanzato con una dimensione del file leggermente inferiore. Il formato Ottimizzato per JPEG è consigliato per la compressione massima dei file; tuttavia, alcuni browser meno recenti non supportano questa funzione.

Visualizza progressivamente l'immagine in un browser Web. L’immagine viene visualizzata come una serie di sovrapposizioni, per consentire agli utenti di visualizzare una versione a bassa risoluzione dell’immagine prima del suo download completo. L’opzione Progressivo richiede l’uso del formato JPEG ottimizzato.

 la visualizzazione dei file JPEG con progressione richiede più memoria RAM e non è supportata da tutti i browser.

Specifica il livello di sfocatura da applicare all’immagine. Questa opzione applica un effetto simile a quello del filtro Controllo sfocatura e consente una maggiore compressione, creando file di dimensioni minori. Si consiglia un’impostazione compresa tra 0,1 e 0,5.

Mantiene i profili colore nel file ottimizzato. Alcuni browser utilizzano i profili colore per la correzione del colore.

Specifica un colore di riempimento per i pixel trasparenti nell’immagine originale. Fai clic sul campione di colore Mascherino per selezionare un colore nel selettore colore oppure seleziona un’opzione dal menu Mascherino: Colore contagocce (per utilizzare il colore nella casella di esempio del contagocce), Colore di primo piano, Colore di sfondo, Bianco, Nero o Altro (per utilizzare il selettore colore).

I pixel completamente trasparenti nell’immagine originale vengono riempiti con il colore selezionato; i pixel semitrasparenti vengono fusi con esso.

Opzioni di ottimizzazione di file GIF e PNG–8

GIF è il formato standard per la compressione di immagini con colori piatti e dettagli nitidi, come grafica al tratto, loghi o illustrazioni con testo. Anche con il formato PNG-8 si ottiene una buona compressione delle aree di colore in tinta unita conservando i dettagli.

I file PNG-8 e GIF supportano il colore a 8 bit e possono quindi visualizzare fino a 256 colori. Il processo di determinazione dei colori da utilizzare è detto indicizzazione, pertanto le immagini in formato GIF e PNG-8 sono talvolta definite immagini a colori indicizzate. Per convertire un’immagine in scala di colore, viene creata una tabella di consultazione del colore per memorizzare e indicizzare i colori nell’immagine. Se un colore dell’immagine originale non compare nella tavola di consultazione del colore, l’applicazione sceglie il colore più vicino oppure simula il colore usando una combinazione di colori disponibili.

Oltre alle opzioni seguenti è possibile anche regolare il numero di colori nella tavola di colore dell’immagine.

Riduce le dimensioni del file eliminando i dati in modo selettivo. Con un’impostazione con perdita di dati più elevata, viene eliminato un numero maggiore di dati. Spesso potete applicare un valore di Perdita compreso tra 5 e 10 e talvolta fino a 50, senza che l’immagine venga degradata. L’opzione Con perdita può ridurre le dimensioni del file dal 5% al 40%.

 non potete usare l’opzione Perdita con l’opzione Interlacciato né con il dithering Disturbo o Pattern.

Specifica un metodo per generare la tavola di consultazione colore e il numero di colori desiderati nella tavola di consultazione colore. Potete selezionare uno dei seguenti metodi di riduzione del colore:

Percettiva Crea una tavola colore personalizzata dando priorità ai colori ai quali l’occhio umano è più sensibile.

Selettiva Crea una tavola di colori simile a quella creata dall’opzione Percettiva, ma favorisce aree di colore più estese e conserva i colori per il Web. Questa tavola di colori in genere produce immagini con la massima integrità cromatica. L’opzione predefinita è Selettiva.

Adattata Crea una tavola colore personalizzata tramite il campionamento dei colori dello spettro predominante nell’immagine. Ad esempio, un’immagine con solo i colori verde e blu produce una tavola di colori composta principalmente da verdi e blu. La maggior parte delle immagini concentra i colori in aree particolari dello spettro.

Restrittiva (per Web) Usa la tavola standard di 216 colori comune alle tavole Windows e Mac OS a 8 bit (256 colori). Questa opzione garantisce che nessun dithering del browser venga applicato ai colori quando l’immagine viene visualizzata con colori a 8 bit. Questa tavolozza è anche detta tavolozza web-safe. L'utilizzo della tavolozza Web consente di creare file di grandi dimensioni ed è consigliato solo quando si desidera evitare il dithering del browser.

Personalizzata Usa una tavola colore creata o modificata dall’utente. Se aprite un file GIF o PNG-8 esistente, la sua tavola colore sarà personale.

 Per personalizzare la tavola di ricerca del colore usate la palette Tavola colore della finestra di dialogo Salva per Web e dispositivi.

Bianco e nero, Scala di grigi, Mac OS, Windows Usano una tavola di colori predefinita.

Determina il metodo e la quantità di dithering dell’applicazione. Il dithering si riferisce al metodo di simulazione dei colori non disponibili nel sistema di visualizzazione dei colori del computer. Una percentuale di dithering più elevata crea l’aspetto di più colori e più dettagli in un’immagine, ma può anche aumentare le dimensioni del file. Per una compressione ottimale, utilizzate la percentuale di dithering più bassa in grado di fornire i dettagli di colore desiderati. Le immagini con colori primariamente uniformi possono funzionare bene senza dithering. Le immagini a tono continuo (in particolare le sfumature di colore) possono richiedere il dithering per evitare la formazione di bande di colore.

Potete selezionare uno dei seguenti metodi di dithering:

Diffusione Applica un pattern casuale di solito meno evidente del dithering Pattern. Gli effetti di dithering vengono diffusi tra i pixel adiacenti.

Pattern Applica un pattern quadrato del tipo retino mezzetinte per simulare i colori non contenuti nella tavola colore.

Disturbo Applica un pattern casuale simile a quello del metodo Diffusione, ma senza diffondere il pattern sui pixel adiacenti. Con questo metodo non appaiono giunte.

Determina il livello di ottimizzazione dei pixel trasparenti in un’immagine.

• Per rendere i pixel completamente trasparenti trasparenti e fondere i pixel parzialmente trasparenti con un colore, selezionate Trasparenza e selezionate un colore opaco.

• Per riempire con un colore i pixel completamente trasparenti e fondere i pixel parzialmente trasparenti con lo stesso colore, selezionate un colore opaco e deselezionate Trasparenza.

• Per selezionare un colore alone, fate clic sul relativo campione di colore e selezionate un colore nel Selettore colore. Oppure, scegliete un’opzione dal menu Alone: Colore contagocce (per usare il colore nella casella campione del contagocce), Colore di primo piano, Colore di sfondo, Bianco, Nero o Altri (per usare il selettore colori).

 Le opzioni Colore di primo piano e Colore di sfondo sono disponibili solo in Photoshop.

A. Immagine originale B. Trasparenza selezionata con un colore mascherino C. Trasparenza selezionata senza corrispondenza D. Trasparenza deselezionata con un colore opaco

Quando l’opzione Trasparenza è selezionata, potete scegliere un metodo di dithering per i pixel semitrasparenti:

• Nessun dithering di trasparenza non applica alcun dithering ai pixel semitrasparenti dell’immagine.

• Dithering di trasparenza di diffusione applica un pattern casuale, di solito meno evidente del dithering Pattern. Gli effetti di dithering vengono diffusi tra i pixel adiacenti. Se selezionate questo algoritmo, specificate una percentuale di dithering per controllare la quantità di dithering applicata all’immagine.

• Dithering di trasparenza di pattern applica un pattern quadrato di tipo mezzetinte ai pixel semitrasparenti.

• Dithering trasparenza disturbo applica un pattern casuale simile all’algoritmo Diffusione, ma senza diffondere il pattern tra pixel adiacenti. Non vengono visualizzate giunture con l'algoritmo Disturbo.

Visualizza una versione a bassa risoluzione dell'immagine in un browser durante il download del file di immagine completo. L’interlacciamento può far sembrare più breve il tempo di scaricamento e può assicurare agli spettatori che lo scaricamento è in corso. Tuttavia, anche l’interlacciamento aumenta le dimensioni del file.

Consente di specificare un livello di tolleranza per lo spostamento dei colori sugli equivalenti della tavolozza Web più vicini (evitando così il dithering dei colori in un browser). Con un valore più alto si spostano più colori.

Ottimizzare la trasparenza nelle immagini GIF e PNG

Con la trasparenza è possibile creare immagini non rettangolari per il Web. Per le immagini con sfondo trasparente, i pixel trasparenti restano tali.

Lo sfondo della pagina Web resta visibile attraverso le aree trasparenti dell’immagine. La funzione di alone di sfondo simula la trasparenza tramite il riempimento o la fusione dei pixel trasparenti con un colore alone uguale al colore di sfondo della pagina Web. Questa tecnica funziona meglio se lo sfondo della pagina Web è in tinta unita e se sapete di che colore si tratta.

Utilizzate le opzioni Trasparenza e Mascherino nella finestra di dialogo Salva per Web e dispositivi per specificare il livello di ottimizzazione dei pixel trasparenti nelle immagini GIF e PNG.

• (GIF e PNG-8) Per rendere i pixel completamente trasparenti trasparenti e fondere i pixel parzialmente trasparenti con un colore, selezionate Trasparenza e selezionate un colore opaco.
• Per riempire con un colore i pixel completamente trasparenti e fondere i pixel parzialmente trasparenti con lo stesso colore, selezionate un colore opaco e deselezionate Trasparenza.
• (GIF e PNG-8) Per rendere completamente trasparenti tutti i pixel con trasparenza superiore al 50% e completamente opachi tutti i pixel con trasparenza pari o inferiore al 50%, selezionare Trasparenza e selezionare Nessuno dal menu Mascherino.
• (PNG-24) Per salvare un’immagine con trasparenza a più livelli (fino a 256 livelli), selezionate Trasparenza. L’opzione Mascherino è disattivata poiché la trasparenza a più livelli consente di fondere un’immagine con qualsiasi colore di sfondo.

 nei browser che non supportano la trasparenza PNG-24 i pixel trasparenti potrebbero essere visualizzati su un colore di sfondo predefinito, ad esempio grigio.

Per selezionare un colore alone, fate clic sul relativo campione di colore e selezionate un colore nel Selettore colore. Oppure, scegliete un’opzione dal menu Alone: Colore contagocce (per usare il colore nella casella campione del contagocce), Colore di primo piano, Colore di sfondo, Bianco, Nero o Altri (per usare il selettore colori).

 le opzioni Colore di primo piano e Colore di sfondo sono disponibili solo in Photoshop.

Visualizzare la tavola colore di una sezione ottimizzata

La tavola colore per una sezione compare nella finestra di dialogo Salva per Web e dispositivi.

Selezionate una sezione ottimizzata in formato GIF o PNG-8. La tavola colore per la sezione selezionata compare nella finestra di dialogo Salva per Web e dispositivi.

Se un’immagine contiene più sezioni, i colori della tavola colori possono variare da sezione a sezione (per evitare che ciò si verifichi, potete collegare prima le sezioni). Se selezionate più sezioni che usano diverse tavole di colore, la tavola di colore è vuota e sulla barra di stato viene visualizzato il messaggio "Misto".

Personalizzare la tavola colori per immagini GIF e PNG-8

Usate la tavola colore nella finestra di dialogo Salva per Web e dispositivi per personalizzare i colori di immagini GIF e PNG-8 ottimizzate. La riduzione del numero di colori spesso mantiene la qualità dell’immagine riducendo nel contempo le dimensioni del file dell’immagine.

Potete aggiungere ed eliminare i colori nella tavola colori, convertire i colori selezionati in colori sicuri per il Web e bloccare i colori selezionati per evitare che vengano eliminati dalla tavolozza.

Ordinare una tavola di colori

Scegliete il tipo di ordinamento nel menu della palette Tavola colore:

• Non ordinare, per ripristinare il criterio di ordinamento originale.
• Ordina per tonalità esegue l’ordinamento in base alla posizione del colore sulla ruota dei colori standard (espressa in gradi da 0 a 360). Ai colori neutri viene assegnata una tonalità pari a 0 e sono collocati insieme ai rossi.
• Ordina per luminanza, per ordinare in base alla luminosità del colore.
• Ordina per popolarità ordina in base alla frequenza di occorrenza dei colori nell’immagine.

Aggiungere un nuovo colore alla tavola colori

Potete aggiungere i colori che non sono stati inclusi nella creazione della tavola colori. L'aggiunta di un colore a una tabella dinamica sposta il colore nella tavolozza più vicina al nuovo colore. L'aggiunta di un colore a una tabella fissa o personalizzata aggiunge un colore aggiuntivo alla tavolozza.

Selezionare i colori nella tavola colori

Attorno ai colori selezionati nella Tavola colori viene visualizzato un bordo bianco.

• Per selezionare un colore, fate clic sul riquadro corrispondente nella Tavola colore.
• Per selezionare più colori nella tavola colori, premete Maiusc e fate clic su un altro colore. Vengono selezionati tutti i colori nelle righe comprese tra il primo e il secondo colore selezionato. Per selezionare un gruppo di colori non contigui, premete Ctrl (Windows) o Comando (Mac OS) e fate clic su ciascun colore che desiderate selezionare. Il menu della palette Tavola colore offre anche altri comandi per la selezione dei colori.
• Per selezionare un colore nell’immagine di anteprima, fate clic al suo interno con lo strumento contagocce nella finestra di dialogo Salva per Web e dispositivi. Per selezionare altri colori, fate clic tenendo premuto Maiusc.
• Per deselezionare tutti i colori, scegliete Deseleziona tutti i colori nel menu della palette Tavola colore.

Spostare un colore

Potete modificare un colore selezionato nella tavola colori con qualsiasi altro valore di colore RGB. Quando rigenerate l’immagine ottimizzata, il colore selezionato viene sostituito dal nuovo colore, ovunque appaia nell’immagine.

Convertire i colori negli equivalenti più simili della palette Web

Per proteggere i colori dal dithering in un browser, potete spostare i colori sugli equivalenti più simili nella tavolozza Web. In questo modo i colori non subiranno alcun dithering se visualizzati in browser su sistemi operativi Windows o Macintosh in grado di visualizzare solo 256 colori.

Mappare i colori sulla trasparenza

Potete aggiungere trasparenza a un’immagine ottimizzata mappando i colori esistenti sulla trasparenza.

Bloccare o sbloccare un colore

Potete bloccare i colori selezionati nella Tavola colore per impedirne sia l’eliminazione, se viene ridotto il numero dei colori, sia il dithering nell’applicazione.

 il blocco dei colori non impedisce il dithering effettuato dal browser.

Eliminare i colori selezionati

Per ridurre le dimensioni del file immagine, potete eliminare i colori selezionati dalla tabella dei colori. Quando eliminate un colore, le aree dell’immagine ottimizzata che includevano quel colore in precedenza vengono rigenerate con il colore più simile rimanente nella palette.

Quando eliminate un colore, la tavola dei colori si trasforma automaticamente in una tavolozza Personalizzata. Questo si verifica perché le tavolozze Adattivo, Percettivo e Selettivo aggiungono automaticamente il colore eliminato alla tavolozza quando l'immagine viene riottimizzata: la tavolozza Personalizzata non cambia quando l'immagine viene riottimizzata.

Salvare una tavola colore

Potete salvare le tavole di colore da immagini ottimizzate per utilizzarle con altre immagini e per caricare le tavole di colore create in altre applicazioni. Una volta caricata in un’immagine una nuova tavola di colori, i colori dell’immagine ottimizzata vengono modificati in modo da riflettere i colori della nuova tavola di colori.

Caricare una tavola colori

Opzioni di ottimizzazione PNG-24

Il formato PNG-24 è adatto alla compressione di immagini a tono continuo; tuttavia produce file di dimensioni molto maggiori rispetto al formato JPEG. Il vantaggio di utilizzare il formato PNG-24 è che può mantenere fino a 256 livelli di trasparenza in un’immagine.

Determina il livello di ottimizzazione dei pixel trasparenti in un’immagine.

Visualizza una versione a bassa risoluzione dell'immagine in un browser durante il download del file di immagine completo. L’interlacciamento può far sembrare più breve il tempo di scaricamento e può assicurare agli spettatori che lo scaricamento è in corso. Tuttavia, anche l’interlacciamento aumenta le dimensioni del file.