Immagini animate, lucidi e sfondi

I siti web utilizzano molti tipi di immagine diversi, in formati sia raster che vettoriali. Gli sviluppatori hanno quindi a disposizione molte opzioni, ma devono scegliere il formato migliore per ogni caso di utilizzo.

In questo articolo esaminiamo i più comuni casi di utilizzo delle immagini e offriamo alcuni consigli e considerazioni per ognuno di essi.

Animazioni

Un'animazione è qualsiasi immagine composta da più di un fotogramma in grado di rappresentare un qualche tipo di movimento.

Vari formati supportano l'animazione (GIF, PNG e WebP), ma grazie al suo supporto completo nei browser la maggior parte dei siti usa GIF (nota: limitato a 256 colori con trasparenza a 1 bit).

Trasparenze

La trasparenza è utile quando non si sa su che colore di sfondo verrà visualizzata l'immagine. Con la trasparenza binaria, uno dei colori della tavolozza indicizzata è contrassegnato come colore trasparente. Una tecnica più avanzata è la trasparenza mediante canale alfa, in cui le informazioni sulla trasparenza sono memorizzate in un canale separato, chiamato "alfa".

I requisiti di trasparenza più semplici possono essere soddisfatti utilizzando il formato GIF con la sua trasparenza binaria. PNG, WebP, JPEG 2000 e JPEG XR offrono possibilità più ampie mediante l'uso dei canali alfa.

Sfumature di sfondo

Utilizzando le dichiarazioni CSS, lo sfondo di un elemento può essere impostato come colore uniforme o come sfumatura. Tipicamente le sfumature sono costituite da un colore che sfuma verso un altro, ma in CSS è possibile controllare ogni aspetto di questo processo, dalla direzione ai colori (il cui numero è illimitato) e ai punti in cui si verificano i cambiamenti di colore.

L'uso di sfumature dichiarate in CSS al posto di file di immagine veri e propri consente di migliorare il controllo e le performance.

Logo

I logo possono essere puramente grafici (simboli/icone) o basati sul nome dell'organizzazione (un logotipo o wordmark).

I formati vettoriali (ad es. SVG) offrono la qualità migliore per i logo (bordi uniformi, ridimensionamento senza perdita di qualità, dimensioni dei file ridotte), ma è possibile utilizzare un formato di file raster (tipicamente PNG) ad alta risoluzione.

Clip Art

Le collezioni di immagini o illustrazioni clip art possono essere importate in un documento o in un altro programma. La grafica può essere di tipo raster o vettoriale.

Il formato GIF è molto adatto alle immagini a tinte uniformi (come le vignette o la clip art). Inoltre, le immagini GIF possono essere disposte su una pagina web con uno sfondo trasparente per facilitare la sovrapposizione.

Immagini intermedie

Le immagini intermedie (o "mezzanine") tipicamente hanno una risoluzione minima di 300 dpi (punti per pollice) e sono più comunemente associate alle fotografie.

Il formato JPEG ad alta risoluzione è diventato di uso comune per le immagini intermedie (originali) su web, poiché bilancia qualità e dimensioni mediante una compressione con perdite. Per ottenere la massima qualità con compressione senza perdite, la scelta più adatta può essere il formato PNG. Il modo migliore per consentire l'uso di immagini su più supporti diversi, ad esempio web e stampa, è utilizzare il formato TIFF (Tagged Image File Format) per gli originali. Sarà poi necessario convertire i file TIFF in formati adatti all'uso sul web.

Immagini reattive

Un'immagine reattiva si adatta per rispondere a condizioni ambientali diverse: gli adattamenti possono includere fra gli altri modifiche delle dimensioni, del ritaglio o perfino della fonte dell'immagine. L'uso di immagini reattive può contribuire a migliorare le web performance, consentendo di inviare file più piccoli agli utenti mobili con connessioni più lente.

JPEG è un formato molto adatto quando si desidera la compatibilità con più tipi di browser. Quando si visualizzano immagini su browser compatibili, WebP (Chrome e Opera), JPEG 2000 (Safari) e JPEG XR (Internet Explorer e Edge) sono ottime scelte.

Sprite

Gli sprite sono utilizzati nel web design allo scopo di migliorare le performance combinando numerose piccole immagini o icone in una singola immagine più grande, chiamata "foglio di sprite" o "set di tessere".

Gli sprite vengono anche utilizzati per le icone, nel qual caso GIF o PNG possono essere le scelte migliori, ma a volte viene usato il formato JPEG.

Per consentire di visualizzare le immagini vengono spesso usati i fogli di stile CSS (Cascading Style Sheets), ma gli sprite sono normalmente PNG o JPEG.

Icone

Le icone possono essere utilizzate come pulsanti o indicatori visivi in un sito web. Come nel caso degli sprite, descritti sopra, spesso i set di icone sono raggruppati in un singolo file. Sono disponibili molte opzioni per questo tipo di immagine, a seconda dell'uso, ma il formato SVG offre le migliori performance; è possibile utilizzare anche font di icone, se vengono gestite correttamente al momento di caricare la pagina. Oltre a questi, è anche possibile utilizzare i normali formati come GIF e PNG. Quando si carica un set di icone (sotto forma di font o di sprite), è importante calcolare il costo del caricamento delle icone non utilizzate.

Angoli arrotondati o elementi di layout

L'uso di immagini per correggere stili, altezze o larghezze sullo schermo, o per utilizzare effetti come gli angoli arrotondati, rimane purtroppo molto comune in numerosissimi siti web. In poche parole, è meglio evitare di usare immagini a questo scopo; è preferibile usare CSS.

Gli angoli arrotondati sono supportati essenzialmente in tutti i browser e consentono di applicare alcune impostazioni più avanzate, come mostrato di seguito.

Sommario

Scegliere il formato ottimale per il vostro caso di utilizzo è essenziale per massimizzare l'impatto delle vostre immagini. Ricordate che ogni formato presenta vantaggi e svantaggi: la decisione finale dovrà probabilmente trovare un compromesso tra queste considerazioni.

Scoprite di più sulla gestione di vari casi di utilizzo delle immagini online con Akamai Image Manager.