Quando si elabora della grafica per il web, sia essa un'intera interfaccia o delle semplici immagini da inserire nelle varie pagine, una delle cose più importanti è riuscire a ridurre il più possibile le dimensioni (in modo da ottenere dei tempi di download inferiori) mantenendo la qualità a livelli accettabili.
L'approccio è diverso se il formato scelto per le immagini è JPG o GIF, ma in entrambi i casi, Fireworks consente di ottimizzare al meglio le nostre produzioni. Inq questo articolo esamineremo i metodi di ottimizzazione per i due formati più noti di grafica sul web: JPEG e GIF
La compressione JPEG selettiva
Si tratta di una nuova funzionalità dell'ultima versione di Fireworks che permette di comprimere in modo diverso parti distinte della stessa immagine. Per esempio mantenendo livelli di compressione elevati per la parti di particolare interesse (o con molti dettagli) e riducendoli per zone meno importanti (sfondi o aree di colore omogeneo) è possibile ridurre le dimensioni complessive dell'immagine.
Il metodo è molto semplice: occorre prima di tutto selezionare l'area a cui si vuole applicare un livello di compressione inferiore usando gli strumenti Perimetro di Selezione che ci vengono messi a disposizione dal programma.
La selezione deve poi essere trasformata in maschera con il comando Elabora > JPEG Selettivo > Salva selezione come maschera JPEG. L'area individuata diventerà visibile assumendo una colorazione rosata.
Nota: in ogni documento può essere presente una sola maschera JPEG e quindi la selezione di tutte le aree deve essere effettuata in una sola volta. La maschera può essere modificata con il comando Elabora > JPEG Selettiva > Ripristina maschera JPEG come selezione.
Aprire il pannello Ottimizza e cliccare sul pulsante corrispondente a Qualità selettiva: comparirà questa finestra di dialogo
Attivare (se non è già attiva) l'opzione Attiva Qualità selettiva e nella casella impostare il livello di compressione scelto per l'area selezionata.
In questa finestra, oltre alla possibilità di cambiare il colore con cui viene rappresentata la maschera, è possibile selezionare le due opzioni Conserva qualità testo e Conserva qualità pulsante: se attivate tutti gli elementi di testo e/o i simboli dei pulsanti verranno esportati con un livello di compressione maggiore rispetto a quello impostato per l'area selezionata. Chiaramente attivare queste opzioni comporta un leggero aumento delle dimensioni del file.
Per capire meglio questa funzionalità confrontate le immagini riportate nella tabella seguente. La scritta HTML.it è stata aggiunta con l'editor di testo di Fireworks. Lo sfondo è stato selezionato usando lo strumento Bacchetta magica (la pressione del tasto MAIUSC attiva la modalità additiva per gli strumenti di selezione) ed è stato impostato un valore di compressione decisamente molto basso in modo da rendere evidenti i vari risultati.
|
Immagine esportata senza l'uso della compressione JPEG Selettiva.
Peso dell'immagine: 19,2 kb |
 |
Immagine esportata applicando la compressione JPEG selettiva allo sfondo
Valore di compressione: 30 Conserva qualità testo disattivata Peso dell'immagine: 15,9 kb |
 |
Immagine esportata applicando la compressione JPEG selettiva allo sfondo
Valore di compressione: 30 Conserva qualità testo attivata Peso dell'immagine: 16,9 kb |
Quando si impostano i valori di compressione nel pannello Ottimizza il risultato non è visibile direttamente in Fireworks, occorre quindi esaminare l'immagine ricorrendo all'anteprima nel browser (F12).
L'opzione Attenuazione consente di ammorbidire le linee frastagliate che si ottengono comprimendo le immagini, più alto è il valore che si imposta e maggiore sarà la sfocatura nell'immagine esportata. Solitamente un valore pari a 3 permette di ridurre le dimensioni dell'immagine mantenendone la qualità a livelli accettabili.
Ottimizzazione del formato GIF
Il formato GIF (profondità di colore di 8 bit) memorizza i colori usati nell'immagine in una tavolozza di colori. Quando si sceglie questo formato nel pannello Ottimizza è possibile scegliere una particolare tavolozza di colori e ottimizzarla. Le tavolozza che Fireworks ci mette a disposizione sono:
- Adattata - si tratta di una tavolozza personalizzata che contiene tutti e soli i colori effettivamente presenti nell'immagine. Solitamente permette di ottenere file di dimensioni ridotte e una qualità elevata.
- Adattata Web - è una tavolozza analoga alla precedente nella quale però i colori vengono convertiti in colori web-safe.
- Web 216 - è costituita da solo 216 colori che però sono quelli comuni alla piattaforma Windows e a quella Macintosh e quindi è in grado di produrre risultati uniformi qualunque sia il sistema operativo o il browser usato dall'utente.
- Esatta - è analoga alla tavolozza Adattata ma può essere usata solo per immagini che contengono meno di 256 colori (in caso contrario viene automaticamente convertita nella Adattata).
- Sistema Windows/Macintosh - ogni tavolozza contiene i 256 colori standard della rispettiva piattaforma.
- Scala di grigi - contiene fino a 256 tonalità di grigio.
- Bianco e nero - contiene, ovviamente due soli colori, il bianco e il nero.
- Uniforme - è una tavolozza basata sui valori RGB dei pixel.
- Personalizzata - è una qualunque tavolozza modificata a piacere o che può essere importata da una qualsiasi immagine di tipo GIF.
Una volta scelta la tavolozza più opportuna dal menu a comparsa Colori del pannello Ottimizza è possibile ottenere un'ulteriore riduzione delle dimensioni del file impostando il numero massimo di colori riprodotti nell'immagine esportata.
Attenzione: scendendo al di sotto dei colori effettivamente usati l'immagine perde di qualità.
