Immagine originale di esempio
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.
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.
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.
Per quanto detto è inoltre inaccettabile che l'immagine non sia ruotata in modo corretto.
Immagine originale senza modifiche. Seppure sia una buona immagine di partenza appare meno "brillante" rispetto a quella elaborata.
Immagine elaborata da Image Magick (gamma: 0.95, equalizzazione: 30%, saturazione: 120%, maschera di contrasto debole)
I quattro strumenti illustrati qui sotto:
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.
Sono strumenti intuitivi, che tutti conosciamo ma spesso peggiorativi per le immagini anzichè migliorativi.
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 = 0%
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:
contrasta bordi (con la maschera di contrasto)
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.
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.
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à:
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.
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.
Editor delle immagini utilizzato (WebTools 2).
HTML + Javascript + PHP + ImageMagick (realizzato da Federico Donelli)