Questo articolo descrive le varie opzioni per l’esportazione di immagini e animati.

Formati per la grafica Web

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.

web_optimization
Impostazioni di ottimizzazione A. Menu Formato file B. Menu Qualità compressione C. Menu Ottimizza

Qualità

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.

Ottimizzato

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.

Progressivo

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.

Nota:

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

Sfocatura

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.

Incorpora profilo colore (Photoshop) o Profilo ICC (Illustrator)

Mantiene i profili colore nel file ottimizzato. I profili colore sono usati da alcuni browser per la correzione del colore.

Alone

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. Consultate Personalizzare la tavola colore per immagini GIF e PNG-8.

GIF_preset
Opzioni GIF

Perdita (solo GIF)

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.

Nota:

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

Algoritmo di riduzione del colore e Colori

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.

Nota:

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.

Algoritmo di dithering e Dithering

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.

swb_gif_dither
Immagine GIF con dithering dello 0% (a sinistra) e 100% (a destra)

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.

Trasparenza e Alone

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).

Nota:

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

swb_transparency_matte
Esempi di trasparenza e alone

A. Immagine originale B. Trasparenza selezionata con un colore alone C. Trasparenza selezionata senza alone D. Trasparenza deselezionata con un colore alone

Dithering della trasparenza

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.

swb_pattern_dither
Esempio di Dithering di trasparenza di pattern (a sinistra) e sua applicazione su una pagina Web (a destra)

Interlaccia

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.

Blocco Web

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.

Nota:

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).

Nota:

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.

  1. Se nella tavola colore sono attualmente selezionati dei colori, scegliete Deseleziona tutti i colori nel menu della palette Tavola colore per deselezionare tutti i colori.

  2. Scegliete un colore effettuando una delle seguenti operazioni:

    • Fate clic sulla casella Colore contagocce nella finestra di dialogo Salva per Web e dispositivi e scegliete un colore dal selettore.

    • Selezionate lo strumento contagocce nella finestra di dialogo Salva per Web e dispositivi, quindi fate clic sull’immagine.

  3. Effettuate una delle seguenti operazioni:

    • Fate clic sull’opzione Nuovo colore nella tavola colore.

    • Selezionate Nuovo colore dal menu della palette Tavola colore.

    • Per passare alla tavola colore di una palette Personale, tenete premuto Ctrl (Windows) o Comando (Mac OS) quando aggiungete il nuovo colore.

      Il nuovo colore appare nella tavola colore. Nell’angolo inferiore destro un quadratino bianco indica che il colore è bloccato. Se la tavola colore è dinamica, il colore originale appare in alto a sinistra e il nuovo colore in basso a destra.

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.

  1. Fate doppio clic sul colore nella Tavola colore per visualizzare il selettore del colore predefinito.

  2. Selezionate un colore.

    Il colore originale appare in alto a sinistra del campione di colore, il nuovo colore in basso a destra. Il quadratino in basso a destra del campione di colore indica che il colore è bloccato. Se convertite il colore in uno sicuro per il Web, un piccolo rombo bianco appare al centro del campione.

  3. Per ripristinare il colore originale, effettuate una delle seguenti operazioni:

    • Fate doppio clic sul campione per il colore convertito. Il colore originale è selezionato nel selettore colore. Fate clic su OK per ripristinare il colore.

    • Per ripristinare tutti i colori originali di una tavola colore (compresi i colori convertiti per il Web), scegliete Annulla scorrimento di tutti i colori dal menu della palette Tavola colore.

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.

  1. Selezionate uno o più colori nell’immagine ottimizzata o nella tavola colore.

  2. Effettuate una delle seguenti operazioni:

    • Fate clic sul pulsante Conversione colori per Web nella palette Tavola colore.

    • Scegliete Esegui/annulla spostamento colori selezionati in/da palette Web dal menu della palette Tavola colore. Il colore originale appare in alto a sinistra del campione di colore, il nuovo colore in basso a destra. Il piccolo rombo bianco  al centro del campione di colore indica che il colore è sicuro per il Web; il quadratino in basso a destra indica che il colore è bloccato.

  3. Per impostare la tolleranza della conversione, specificate un valore per Blocco Web. Più alto è il valore, maggiore sarà il numero di colori sostituiti.

  4. Per ripristinare i colori convertiti per il Web, effettuate una delle seguenti operazioni:

    • Selezionate un colore convertito per il Web nella tavola colore e fate clic sul pulsante Conversione colori per Web nella palette Tavola colore.

    • Per ripristinare tutti i colori convertiti nella tavola colore, scegliete Ripristina tutti i colori dal menu della palette Tavola colore.

Mappare i colori sulla trasparenza

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

  1. Selezionate uno o più colori nell’immagine ottimizzata o nella tavola colore.

  2. Effettuate una delle seguenti operazioni:

    • Fate clic sul pulsante Mappa trasparenza  nella palette Tavola colore.

    • Dal menu della palette Tavola colore, scegliete “Attiva e disattiva la mappatura dei colori selezionati su trasparenza”.

      La griglia di trasparenza  appare in ogni colore mappato. Il quadratino in basso a destra del campione di colore indica che il colore è bloccato.

  3. Per ripristinare la trasparenza sul colore originale, effettuate una delle seguenti operazioni:

    • Selezionate i colori da ripristinare, quindi fate clic sul pulsante Mappa trasparenza  o scegliete “Attiva e disattiva la mappatura dei colori selezionati su trasparenza” nel menu della palette Tavola colore.

    • Per ripristinare tutti i colori mappati, scegliete Dissocia tutti i colori trasparenti.

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.

Nota:

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

  1. Selezionate uno o più colori nella palette Tavola colore.

  2. Bloccate il colore effettuando una delle seguenti operazioni:

    • Fate clic sul pulsante Blocca .

    • Scegliete Blocca/sblocca colori selezionati nel menu della palette Tavola colore.

    Nell’angolo inferiore destro di ogni colore bloccato, appare un quadratino bianco .

  3. Sbloccate il colore effettuando una delle seguenti operazioni:

    • Fate clic sul pulsante Blocca .

    • Scegliete Blocca/Sblocca colori selezionati nel menu della palette Tavola colore.

    Il quadratino bianco scompare dal campione di colore.

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.

  1. Selezionate uno o più colori nella palette Tavola colore.

  2. Eliminate il colore effettuando una delle seguenti operazioni:

    • Fate clic sull’icona Elimina.

    • Scegliete Elimina colore nel menu della palette Tavola colore.

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.

  1. Selezionate Salva tavola colore dal menu della palette Tavola colore.

  2. Specificate un nome per la tavola colore e la posizione in cui salvarla. Per impostazione predefinita, al file della tavola colore viene assegnata l’estensione .act (Adobe Menu a comparsa).

    Per accedere alla tavola colore quando selezionate le opzioni di ottimizzazione per un’immagine GIF o PNG, salvate la tavola nella cartella Colori ottimizzati nella cartella di applicazione Photoshop.

  3. Fate clic su Salva.

    Nota:

    quando ricaricate la tavola, tutti i colori convertiti appaiono come campioni e sono sbloccati.

Caricare una tavola colore

  1. Nel menu della palette Tavola colore, tavola colore dal menu della palette Tavola colore.

  2. Individuate il file contenente la tavola colore da caricare: un file .act (Adobe Color Table), .aco (Adobe Color Swatch) o GIF (per caricare la tavola colore incorporata nel file).

  3. Fate clic su Apri.

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.

Trasparenza e Alone

Determina il livello di ottimizzazione dei pixel trasparenti in un’immagine. Consultate Ottimizzare la trasparenza nelle immagini GIF e PNG.

PNG_24
Opzioni PNG-24

Interlaccia

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.

Altri argomenti presenti nell’Aiuto

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online