Ottimizzare le immagini per il web

Strategie (non artistiche) per ottimizzare l'immagine per internet

Si riportano alcune considerazioni e strategie utilizzate per l'ottimizzazione delle immagini per il web. Questi concetti sono implementati in questo sito e sono strumenti integrati nel cms.

Lo scopo di questi strumenti è di essere semplici, veloci, usabili, oggettivamente efficaci e utili. Non vi è invece alcun contenuto artistico nel loro utilizzo.

1. Partire da buone immagini

La qualità delle immagini di partenza è fondamentale. Immagini di partenza poco interessanti, tecnicamente carenti, non leggibili, povere come contenuti o noiose non vanno utilizzate proprio, sarebbero solo fastidiose.

Le immagini è quindi bene che siano pertinenti, tecnicamente accettabili, magari originali! Nelle immagini è talvolta tollerato (se non apprezzato) anche qualcosa di bizzarro se crea curiosità ed è contestuale.

2. Dimensioni e inquadratura

Le dimensioni in pixel devono essere rapportate al soggetto. Un disegno semplice può avere dimensioni piccole e rimanere leggibile (per es. una icona). Una immagine complessa è bene che sia sufficientemente grande per capire cosa essa rappresenta altrimenti risulta sgradevole in quanto incomprensibile.

L'inquadratura dell'immagine è importante per due motivi.

1. Il quadro di ritaglio ci permette di eliminare parti che non sono utili a quanto stiamo rappresentando, quindi diamo massimo peso e ciò che vogliamo comunicare.
2. Se l'immagine verrà indicizzata da Google certe proporzioni sono penalizzanti... per esempio immagini con orientamento verticale o immagini con proporzioni panoramiche saranno meno evidenti nei risultati della ricerca rispetto alla "ideale" immagine quadrata.

Per quanto detto è inoltre inaccettabile che l'immagine non sia ruotata in modo corretto.

3. Elaborazioni sulle fotografie

I quattro strumenti illustrati qui sotto:

• correzione di gamma,
• correzione di istogrammi (equalizzazione),
• modifica saturazione,
• maschera di contrasto

sono utilizzati spesso anche dalle nostre macchine fotografiche digitali per migliorare automaticamente le immagini. Permettono con poca esperienza e tempi rapidi di migliorare sensibilmente la visualizzazione delle immagini sul web, soprattutto di fotografie.

Regolare luminosità e contrasto non soddisfa

Sono strumenti intuitivi, che tutti conosciamo ma spesso peggiorativi per le immagini anzichè migliorativi.

• Infatti lo strumento classico di regolazione della luminosità sposta semplicemente il punto di bianco o il punto di nero ottenendo come effetto collaterale di "bruciare" l'immagine sui toni chiari se schiariamo o su quelli scuri se scuriamo.
• Lo strumento di regolazione del contrasto "apre" la curva della luminosità a partire dalle luci medie (50% di bianco), indipendentemente da dove sia realmente necessario aumentare il contrasto.

Alternative: gamma e equalizzazione

Un ottimo algoritmo per modificare la luminosità di una immagine è quello di regolazione della curva "gamma". Modificando la curva gamma modifichiamo la luminosità mantenendo fissi il punto di bianco e il punto di nero, quindi senza bruciare l'immagine. La regolazione gamma è ampiamente utilizzata anche per tarare la luminosità delle immagini nei monitor. Approfondisci qui.

Per migliorare il contrasto possiamo utilizzare l'algoritmo di "equalizzazione" dell'immagine che a partire da una analisi sugli istogrammi (cioè sulla distribuzione dei colori) è in grado di modificare l'immagine distribuendo in modo ottimale la luminosità. (per saperne di più)

Il risultato dell'equalizzazione sull'immagine è quasi sempre di migliorarne la leggibilità in termini di contrasti; di contro, talvolta, enfatizza errori o artefatti dovuti alla compressione dell'immagine originale.

Un modo utile per utilizzare l'equalizzazione è perciò quello di fare una media ponderata tra l'immagine originale e quella con istogramma della luminosità equalizzato, decidendo così il livello di equalizzazione / psedo-contrasto.

Per preservare correttamente i colori è importante che l'equalizzazione avvenga sul canale della luminosità (brightness in uno spazio HSB) e non sui singoli canali RGB.

Saturazione

Per saturazione si intende la "vividezza" del colore, ovvero quanto un colore si allontana dal grigio (considerato neutro) e tende ad essere evidente in termini di tonalità. In termini matematici è un po' più complesso, l'argomento è diffusamente documentato sul web.

Lo strumento per modificare la saturazione è sicuramente utile in due situazioni:

1. per rendere le immagini a toni di grigi, spesso lo si fa per esempio sulle fotografie allegate a curriculum. In questo caso si porta la saturazione a 0% o li vicino.
2. aumentare un po' la saturazione può rendere l'immagine più accattivante, esaltandone i colori, creando una atmosfera più solare, primaverile. Se si ha a disposizione lo strumento saturazione si potrà ad esempio specificare 120% per aumentare senza esagerare la brillantezza dei toni.

Maschera di contrasto (antisfocatura / contrasta bordi)

La maschera di contrasto è uno strumento efficace per aumentare la nitidezza percepita. Questa operazione rafforza il contrasto nei bordi delle figure all'interno dell'immagine. Se non si esagera, il risultato è il più delle volte migliorativo, presentando una immagine che viene percepita più "a fuoco" rispetto alla stessa senza che vi sia stato applicato questo effetto.

4. Velocità di caricamento

Corretta gestione della cache

E' di fondamentale importanza che gli headers HTTP che accompagnano l'immagine siano corretti per garantire il corretto caching delle immagini (memorizzazione sul proprio pc e riuso). Questo lo si verifica ad esempio con lo strumento Firebug-PageSpeed (estensione di Firefox) come suggerito anche dalle guide di Google.

Evitare sprechi e comprimere

La velocità di download delle immagini è in funzione della loro dimensione in Kb, pertanto si utilizzano queste tre strategie per contenere la dimensione offrendo una accettabile qualità:

• evitare sprechi di dimensione: la dimensione delle immagini in pixel deve essere la stessa dimensione utilizzata nella pagina;
• usare formati compressi come JPEG o PNG. Nel caso di compressione JPEG tarare la compressione in funzione del grado di dettaglio necessario all'immagine finale.
• eliminare ciò che è inutile, per esempio le intestazioni exif dei file JPEG che contengono informazioni sulla macchina fotografica, autore, coordinate gps etc.

5. Implementazione con Imagick

Per l'implementazione di tutte queste idee si è utilizzato ImageMagick attraverso la sua interfaccia PHP Imagick. ImageMagick è veloce, affidabile, ha poche richieste in termini di memoria ed è supportato anche da diversi Host economici.

Il formato JPG interallacciato appare essere più efficace per quanto riguarda l'efficacia della compressione.

Le librerie GD eliminano automaticamente ogni informazione exif dalle immagini JPG mentre in ImageMagick esiste un comando specifico per ottenere questo.

In generale la maggiore complessità risulta essere nel creare l'interfaccia HTML/Javascript/Ajax per realizzare un editor visuale delle immagini integrato col CMS.

Senza Imagick

In alternativa è possibile usare le librarie grafiche GD presenti in quasi tutte le installazioni di PHP che però non supportano tutte le operazioni sopra descritte, in particolar modo saturazione, equalizzazione e maschera di contrasto.

Nel caso non si disponga di ImageMagick si guardi anche il software open-source PHPthumb che estende le funzionalità di GD con implementazioni direttamente in PHP di diverse operazioni.

---

Home > Design > OTTIMIZZARE LE IMMAGINI