-
.
Immagini: utilizzo e formato
Fin dalla creazione del web le immagini sono state, e continuano ad essere, una delle componenti essenziali che non può assolutamente mancare in un sito web.
In molti casi le immagini utilizzate offrono agli utenti un chiaro valore aggiunto al sito visitato o al lavoro (locandina, banner pubblicitario, ecc) visualizzato. Per questo è importante conoscerne i formati da utilizzare e saper scegliere quello più adatto in ogni occasione. Quello che andremo a fare in questa guida è quindi esaminare i più importanti formati che esistono e quale utilizzo dovremmo farne.
Quali formati esistono?
Sono innumerevoli i formati immagine che esistono per grafiche bidimensionali e foto, e questi si dividono sostanzialmente in due tipi: bitmap e vettoriale.
Prima di continuare quindi, vediamo cosa significa.
- Bitmap
Questo tipo di immagini, dette anche "raster" sono costituite da una griglia di pixel (link esterno). La fedeltà dell'immagine riprodotta è direttamente proporzionata al numero dei suoi pixel che ne definiscono maggiormente il dettaglio con il suo aumentare.
In termini poveri, ci si riferisce alla risoluzione di un'immagine quando si parla dei pixel che contiene:- alta risoluzione/alto contenuto di px = maggior dettaglio;
- bassa risoluzione/basso contenuto di pixel = minore dettaglio.
SPOILER (clicca per visualizzare)
**
I pregi maggiori di queste immagini sono:
1) la capacità di rappresentare qualsiasi tipologia di immagine con assoluta fedeltà;
2) permettere la manipolazione cromatica e di contenuto che può arrivare al singolo pixel.
Per contro, più è alto il numero dei pixel di un'immagine e maggiore sarà la grandezza del file! Inoltre, un numero maggiore di pixel comporta più dispendio di energia (in termini di concentrazione) qualora si debba intervenire in una zona delimitata dell'immagine (come un contorno).
- Vettoriale.
A differenza delle immagini bitmap costituite da pixel, il vettoriale è costituito da oggetti.
Il manuale "Adobe Illustrator CS5. Guida pratica" * (link in fondo per chi fosse interessato) definisce così queste immagini:CITAZIONE[...] non sono altro che concretizzazioni di un gruppo di coordinate e formule analitiche. [...] Una linea o una forma vettoriale non è legata a dimensioni definite e la precisione del dettaglio rimarrà invariata a qualsiasi risoluzione, su qualsiasi dispositivo e a qualsiasi percentuale di ingrandimento.
In parole povere, il formato vettoriale permette di ridimensionare un'immagine a qualsiasi percentuale e rimanere perfettamente invariata.SPOILER (clicca per visualizzare)
**
Oltre ciò, un formato vettoriale permette di ottenere file di dimensioni estremamente ridotte rispetto ai file bitmap. Tuttavia, non permette di raggiungerne lo stesso livello di dettaglio.
Panoramica dei formati più importanti
Con ciò che abbiamo appena esaminato possiamo quindi iniziare a conoscere (in maniera sintetica) i formati che più ci interessano. In particolare ne vedremo 4 che dovrebbero far parte della vita di ciascun aspirante grafico, o comunque interessato a questo vasto mondo.
- JPG
Le immagini JPG sono progettate per gestire tavolozze di colori di grandi dimensioni senza aumentare in modo esorbitante le dimensioni del file. Questo li rende perfetti per foto e immagini con molte sfumature. D'altra parte, i JPG non consentono pixel trasparenti e avranno sempre uno sfondo, come nell'immagine (se guardi bene è bianco!).
Utilizzo consigliato: salvataggio e pubblicazione di foto.
- PNG
Sono ottimi per tutto ciò che non è una foto o animato. Per le foto, un file PNG della stessa qualità (percepita dall'occhio umano) sarebbe generalmente più grande di un file JPG equivalente. Tuttavia, trattano perfettamente l'opacità e non hanno limiti di tavolozza dei colori. Questo li rende perfetti per icone, diagrammi tecnici, loghi, ecc.
A differenza dei formati JPG, questi possono contenere la trasparenza e rappresentare un soggetto senza alcuno sfondo.
Utilizzo consigliato: salvataggio e pubblicazione di foto e grafiche di dimensioni ridotte (loghi, icone, grafici a barre, e così via), grafiche con trasparenze, foto senza perdita di informazioni
- GIF
Le GIF sono l'opzione ideale per le animazioni semplici, ma sono molto limitate in termini di tavolozza dei colori.
I pixel trasparenti sono un'opzione binaria per le GIF, il che significa che non puoi avere pixel semi-opachi (ombreggiature, luci, ecc). Ciò può rendere difficile ottenere alti livelli di dettaglio su uno sfondo trasparente. Per questo motivo, di solito è meglio usare immagini PNG se non si ha bisogno di animazione.
- SVG
A differenza dei formati di immagine basati sui pixel (come sorpa), è un formato basato su un vettore, il che significa che può scalare qualsiasi dimensione senza perdita di qualità. Questa proprietà rende le immagini SVG uno strumento meraviglioso per un design reattivo, o responsive. Sono utili praticamente per tutti gli stessi casi d'uso dei PNG e dovrebbero essere usati ogni qual volta sia possibile.
Il sito Ionos, ne specifica alcuni vantaggi:CITAZIONE- Tramite CSS si può mettere mano a tuttigli attributi di presentazione come colori, font, ecc.
- Gli script possono attingere ai contenuti tramite DOM (Document Object Model).
- Le grafiche SVG sono in linguaggio macchina.
- Il rispettivo codice è contrassegnato e adattabile come file separato oppure direttamente all’interno del documento HTML.
- Vi si possono aggiungere animazioni in diverse modalità (SMIL, JavaScript, CSS).
JPG
(bitmap)PNG
(bitmap)GIF
(bitmap)SVG
(vettore)Dimensione del file Molto piccola Piccola Grande Dipende Animazione No No Si Si Adatto per Foto Piccole immagini e grafiche Animazioni Grafiche di ogni tipo Riferimenti presenti all'interno della guida
* Libro citato e consigliato: Adobe Illustrator CS5. Guida pratica. I portatili
** Immagini di riferimento tratta da: LabelDoo.
Immagini: Utilizzo e formato |
