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 di compressione delle immagini a tono continuo, come le fotografie. L’ottimizzazione di immagini in formato JPEG si basa sulla compressione con perdita, che elimina i dati in modo selettivo.

Determina il livello di compressione. Maggiore è la qualità, maggiore è il dettaglio che l’algoritmo di compressione mantiene. Un’impostazione di Qualità alta risulta tuttavia in file di dimensioni maggiori. Visualizzate l’immagine ottimizzata con diverse impostazioni di qualità per stabilire il miglior rapporto tra qualità e dimensioni.

Crea un file JPEG con una dimensione file leggermente inferiore. Il formato JPEG ottimizzato è consigliato per ottenere la massima compressione del file; tuttavia, alcuni browser meno recenti non supportano questa caratteristica.

Visualizza progressivamente l’immagine in un browser Web. L’immagine viene visualizzata come una serie di sovrapposizioni, consentendo agli utenti di vedere una versione a bassa risoluzione dell’immagine prima di averne terminato lo scaricamento. L’opzione Progressione richiede l’uso del formato 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. I profili colore sono usati da alcuni browser per la correzione del colore.

Specifica un colore di riempimento per i pixel che erano trasparenti nell’immagine originale. Per selezionare un colore nel selettore colore, fate clic sul campione di colore alone o selezionate un’opzione nel menu Alone: Colore contagocce (per usare il colore nella casella campione contagocce), Colore di primo piano,Colore di sfondo, Bianco, Nero o Altri (per 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 di compressione delle immagini con colori piatti e dettagli netti, come grafica al tratto, logo 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 formati PNG-8 e GIF supportano i colori a 8 bit e consentono quindi di visualizzare fino a 256 colori. Il processo che consente di determinare quali colori usare è detto indicizzazione; le immagini in formato GIF e PNG-8 vengono talvolta chiamate “immagini in scala di colore”. Per convertire un’immagine in scala di colore, viene generata una tavola di consultazione dei colori in cui vengono registrati e indicizzati i colori utilizzati nell’immagine. Se un colore usato nell’immagine originale non è compreso nella tavola di ricerca del colore, viene selezionato il colore più simile o viene simulato il colore non presente usando i colori disponibili.

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

Riduce le dimensioni dei file eliminando i dati non essenziali. Maggiore è l’impostazione Perdita, maggiori sono i dati eliminati. Spesso potete applicare un valore di Perdita compreso tra 5% e 10%, e a volte fino al 50%, senza deteriorare l’immagine. La dimensione del file può essere ridotta del 5%-40% per mezzo dell’opzione Perdita.

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

Consente di specificare un metodo per la creazione della tavola di ricerca del colore e il numero di colori in essa contenuti. 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. Mediante questa tavola di colori in genere vengono prodotte immagini con maggiore integrità di colore. Selettiva è l’opzione predefinita.

Adattata Crea una tavola colore personalizzata tramite il campionamento dei colori dello spettro predominante nell’immagine. Ad esempio, un’immagine con i soli colori blu e verde produce una tavola colore formata principalmente da toni di blu e verde. La maggior parte delle immagini contiene colori concentrati in particolari aree 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 l’assenza di dithering dovuta all’uso di un browser quando l’immagine è visualizzata a colori a 8 bit (questa tavola è detta anche sicura per il Web). Questa palette è chiamata anche palette dei colori sicuri per il Web. La palette Web può creare file di dimensioni maggiori ed è consigliata solo se considerate particolarmente importante evitare il dithering dei 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 termine dithering si riferisce al metodo di simulazione di colori non disponibili nel sistema di visualizzazione del computer. Alte percentuali di dithering danno l’impressione di una maggiore definizione cromatica e di un migliore dettaglio dell’immagine, ma aumentano le dimensioni del file. Per una compressione ottimale, utilizzate la percentuale di dithering minima necessaria a fornire il livello di dettaglio cromatico richiesto. Le immagini prevalentemente con colori in tinta unita possono essere riprodotte bene senza dithering. Nelle immagini a toni continui (soprattutto con sfumature), il dithering può evitare la formazione di striature di colore.

Potete selezionare uno dei metodi di dithering seguenti:

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 mantenere trasparenti alcuni pixel e fondere quelli semitrasparenti con un colore, selezionate Trasparenza e un colore alone.

• Per riempire i pixel completamente trasparenti con un colore e fondere i pixel parzialmente trasparenti con lo stesso colore, selezionate un colore dell’alone 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 alone C. Trasparenza selezionata senza alone D. Trasparenza deselezionata con un colore alone

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. Con questo algoritmo, specificate una percentuale per la quantità di dithering applicata all’immagine.

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

• Dithering di trasparenza di disturbo applica un pattern casuale simile al dithering Diffusione ma senza estenderlo ai pixel adiacenti. Con l’algoritmo Disturbo non appare alcuna giunta.

Consente di visualizzare nel browser una versione a bassa risoluzione dell’immagine durante lo scaricamento dell’intera immagine. Questo accorgimento può far sembrare più breve il tempo di scaricamento e segnala agli utenti che lo scaricamento è in corso. Questa opzione aumenta tuttavia le dimensioni del file.

Specifica un livello di tolleranza per la conversione dei colori negli equivalenti più simili della palette Web, allo scopo di evitare il dithering dei colori nei browser. Più alto è il valore, maggiore sarà il numero di colori sostituiti.

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.

Usate le opzioni Trasparenza e Alone nella finestra di dialogo Salva per Web e dispositivi per specificare come ottimizzare i pixel trasparenti in immagini GIF e PNG.

• (GIF e PNG-8) Per mantenere trasparenti alcuni pixel e fondere quelli semitrasparenti con un colore, selezionate Trasparenza e un colore alone.
• Per riempire i pixel completamente trasparenti con un colore e fondere i pixel parzialmente trasparenti con lo stesso colore, selezionate un colore dell’alone e deselezionate Trasparenza.
• (GIF e PNG-8) Per rendere completamente trasparenti tutti i pixel con trasparenza superiore al 50% e opachi tutti quelli con trasparenza inferiore al 50%, selezionate Trasparenza e scegliete Nessuno dal menu Alone.
• (PNG-24) Per salvare un’immagine con trasparenza su più livelli (fino a 256), selezionate Trasparenza. L’opzione Alone è disattivata poiché la trasparenza su più livelli consente a un’immagine di fondersi 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 nella tavola colore sono diversi tra una sezione e l’altra (per evitare che questo accada, collegate le sezioni). Se selezionate più sezioni con tavole colore diverse, la tavola colore risulta vuota e la relativa barra di stato riporta “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 mantiene, in genere, la qualità dell’immagine, riducendo le dimensioni del file immagine.

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

Ordinare una tavola colore

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

• Non ordinare, per ripristinare il criterio di ordinamento originale.
• Ordina per tonalità, per ordinare in base alla posizione del colore sulla ruota dei colori standard (specificata come angolo da 0° a 360°). Ai colori neutri viene assegnata la tonalità 0 e sono posizionati con i rossi.
• Ordina per luminanza, per ordinare in base alla luminosità del colore.
• Ordina per utilizzo, per ordinare in base alla frequenza con cui il colore si presenta nell’immagine.

Aggiungere un nuovo colore alla tavola colore

Potete aggiungere i colori esclusi durante la creazione della tavola colore. L’aggiunta di un colore a una tavola dinamica sostituisce il colore più prossimo al nuovo colore. L’aggiunta di un colore a una tavola fissa o Personale aggiunge un colore alla tavola.

Selezionare i colori nella tavola colore

I colori selezionati sono evidenziati da un bordo bianco nella Menu a comparsa.

• Per selezionare un colore, fate clic sul riquadro corrispondente nella Tavola colore.
• Per selezionare più colori nella tavola colore, premete Maiusc e fate clic su un altro colore. Vengono selezionati tutti i colori nelle righe 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.

Convertire un colore

Potete cambiare un colore selezionato nella tavola colore con un altro valore cromatico RGB. Quando rigenerate l’immagine ottimizzata, il colore selezionato viene cambiato con il nuovo colore ovunque appaia nell’immagine.

Convertire i colori negli equivalenti più simili della palette Web

Per proteggere i colori dal dithering del browser, potete sostituire i colori dell’immagine con i colori equivalenti più simili nella palette Web. In questo modo i colori non vengono sottoposti a dithering se visualizzati nei browser di 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 dell’immagine, potete eliminare determinati colori dalla tavola colore. Quando eliminate un colore, le aree dell’immagine ottimizzata che contenevano quel colore vengono riprodotte con il colore più vicino nella palette.

Quando eliminate un colore, la palette dei colori diviene Personale. Altrimenti, con le palette Adattata, Percettiva e Selettiva, il colore eliminato verrebbe nuovamente aggiunto durante l’ottimizzazione dell’immagine. La palette Personale, invece, non cambia quando riottimizzate l’immagine.

Salvare una tavola colore

Potete salvare le tavole colore dalle immagini ottimizzate e usarle con altre immagini o caricare tavole colore create in altre applicazioni. Quando caricate una nuova tavola colore in un’immagine, i colori dell’immagine ottimizzata vengono modificati secondo i colori della nuova tavola colore.

Caricare una tavola colore

Opzioni di ottimizzazione per PNG-24

Il formato PNG-24 è adatto per la compressione di immagini a tono continuo, ma produce file di dimensioni molto maggiori rispetto al formato JPEG. Tuttavia, il formato PNG-24 può mantenere in un’immagine fino a 256 livelli di trasparenza.

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

Consente di visualizzare nel browser una versione a bassa risoluzione dell’immagine durante lo scaricamento dell’intera immagine. Questo accorgimento può far sembrare più breve il tempo di scaricamento e segnala agli utenti che lo scaricamento è in corso. Questa opzione aumenta tuttavia le dimensioni del file.