Griglia di pixel, ognuno con il proprio colore; ingrandita oltre la sua risoluzione perde nitidezza.

Immagine descritta con istruzioni matematiche, punti, linee, curve, invece che con pixel; resta nitida a ogni dimensione.

Formato bitmap introdotto da CompuServe nel 1987, con compressione lossless a 8 bit di colore.

Standard di compressione lossy per fotografie, creato nel 1992 dal Joint Photographic Experts Group.

Formato bitmap lossless, progettato per sostituire GIF, con più colori e trasparenza.

Formato vettoriale basato su XML, diventato Raccomandazione W3C nel 2001; descrive le immagini come comandi di disegno.

Riduce il peso del file eliminando una parte delle informazioni dell'immagine; è la strada di JPEG.

Immagine vettoriale e bitmap: differenze, formati e compressione

In 30 secondi lettura lampo

Un'immagine bitmap è una griglia di pixel, ognuno con il proprio colore, e ingrandirla oltre la sua risoluzione la rende sfocata o a scalini. Un'immagine vettoriale non memorizza pixel ma istruzioni matematiche, punti, linee, curve, che il computer ridisegna ogni volta: per questo resta nitida a qualunque dimensione. GIF, JPEG e PNG sono formati bitmap, mentre SVG è il formato vettoriale più diffuso sul web. La compressione riduce il peso dei file in due modi diversi, quella lossy scarta parte dei dati per rimpicciolire il file, quella lossless lo ricostruisce identico all'originale.

Punti Chiave

Un'immagine bitmap (o raster) è composta da una griglia di pixel: scalata oltre la sua risoluzione perde nitidezza.
Un'immagine vettoriale descrive le forme con formule matematiche, punti e curve, e resta nitida a ogni dimensione.
GIF, JPEG e PNG sono formati bitmap; SVG è il principale formato vettoriale.
La compressione lossy, come quella di JPEG, elimina parte dei dati per ottenere file più leggeri; quella lossless, come PNG e GIF, li ricostruisce senza perdite.
Le fotografie, con le loro sfumature di colore, si trattano meglio in bitmap; loghi, icone e illustrazioni si trattano meglio in vettoriale.
GIF nasce nel 1987, lo standard JPEG nel 1992, SVG diventa una Raccomandazione ufficiale del W3C nel 2001.

I numeri chiave

1987 Anno in cui CompuServe introduce il formato GIF, con compressione lossless a 8 bit di colore. Fonte: MDN Web Docs
1992 Anno di creazione dello standard JPEG (ISO/IEC 10918) da parte del Joint Photographic Experts Group. Fonte: JPEG.org
2001 Anno in cui SVG 1.0 diventa una Raccomandazione ufficiale del W3C. Fonte: W3C

L'Approfondimento

Ogni immagine che appare su uno schermo è, alla base, un file, e i file di immagini si scrivono in due modi profondamente diversi. La differenza non sta in quanto sono nitide, ma in come descrivono l’immagine: a pixel, oppure a formule matematiche.

La griglia di pixel

Un’immagine bitmap (detta anche raster) è una griglia di singoli punti, i pixel, e ognuno ha il proprio colore. Ogni pixel, alla base, è un numero scritto in codice binario: tre valori che indicano quanto rosso, verde e blu contiene quel punto. Quando una bitmap viene ingrandita oltre la sua risoluzione originale, i suoi bordi diventano a scalini: il file non ha altre informazioni da aggiungere, i pixel esistenti vengono semplicemente allargati.

Le istruzioni matematiche

Un’immagine vettoriale non contiene pixel: contiene istruzioni. Punti collegati da linee e curve, chiamati percorsi, che il computer interpreta e ridisegna ogni volta che l’immagine viene mostrata. Poiché quei percorsi sono numeri e non punti fissi, il vettoriale resta nitido a qualunque dimensione, dal francobollo al cartellone pubblicitario.

Esempio pratico: un logo aziendale salvato in vettoriale può essere usato su un biglietto da visita e, senza toccare il file, stampato su un manifesto largo tre metri: le linee restano nette in entrambi i casi, perché vengono ricalcolate a ogni dimensione.

GIF, JPEG e PNG: tre formati bitmap

Secondo MDN Web Docs, nel 1987 CompuServe introdusse il formato GIF per offrire un formato compresso che tutti gli utenti del proprio servizio online potessero usare: GIF comprime le immagini senza perdite (lossless), usando l’algoritmo LZW su una tavolozza di 256 colori (8 bit). Quegli anni erano anche quelli in cui i personal computer entravano nelle case: per il contesto, vedi la storia del computer.

Il Joint Photographic Experts Group dichiara di aver creato lo standard JPEG (ISO/IEC 10918) nel 1992, con una revisione nel 1994. JPEG comprime con perdita (lossy), basandosi su una tecnica chiamata trasformata discreta del coseno, ed è il formato lossy più diffuso per le fotografie.

PNG, secondo MDN Web Docs, usa una compressione senza perdite e supporta più colori del GIF, oltre alla trasparenza completa. Il sito storico del progetto libpng racconta che PNG fu progettato per sostituire il più vecchio GIF e, in parte, il più complesso formato TIFF: nessuna delle due fonti consultate riporta però un anno preciso di nascita in una frase esplicita, per cui qui basta dire che PNG comparve a metà degli anni Novanta, senza appoggiarsi a una data che nessuna fonte dichiara direttamente.

Formato	Tipo di compressione	Anno
GIF	Lossless, 8 bit di colore	1987
JPEG	Lossy, trasformata discreta del coseno	1992
PNG	Lossless, più colori e trasparenza	metà anni Novanta (senza anno certo in fonte)

SVG, il formato vettoriale del web

SVG è un formato basato su XML che, secondo MDN Web Docs, descrive un’immagine come un insieme di comandi di disegno: forme, linee, colori, filtri. Il W3C pubblicò una prima bozza (Candidate Recommendation) nell’agosto 2000, poi la Raccomandazione ufficiale SVG 1.0 nel settembre 2001, seguita da SVG 1.1 nel gennaio 2003. MDN Web Docs segnala anche il limite del formato: SVG è la scelta ideale quando un’immagine può essere rappresentata come una serie di comandi di disegno, soprattutto se la dimensione finale non è nota in anticipo, ma non è pensato per immagini strettamente fotografiche.

Lossy e lossless: cosa succede quando si comprime un file

La compressione riduce il peso di un file immagine, ma lo fa in due modi opposti. La compressione lossy scarta parte dei dati dell’immagine per ottenere un file molto più piccolo: è la scelta di JPEG. La compressione lossless, invece, riorganizza i dati in modo più efficiente ma li ricostruisce in modo identico all’originale quando il file viene riaperto: è la scelta di GIF e PNG.

Il procedimento che decide come raggruppare o scartare quei dati è un algoritmo, applicato in modo sistematico a ogni file.

Quando scegliere bitmap, quando vettoriale

Materiali didattici come quelli della City University of New York indicano una regola pratica: usare il formato vettoriale per testo, linee e illustrazioni, e riservare il bitmap alle fotografie o alle immagini con ombreggiature complesse e non uniformi.

Tipo di contenuto	Formato consigliato	Perché
Fotografie	Bitmap (JPEG)	Sfumature di colore continue, difficili da ridurre a forme
Loghi e icone	Vettoriale (SVG)	Contorni netti, deve restare nitido a ogni dimensione
Illustrazioni con linee	Vettoriale (SVG)	Composte da percorsi, si scalano senza perdere qualità
Screenshot e immagini già raster	Bitmap (PNG)	Compressione lossless, nessuna perdita di dettaglio

Presentazione

Slide pronte da scaricare e fare tue in PowerPoint o Google Slides, con le note del relatore. Scegli il taglio Lampo o quello Completo.

Slide 2 della presentazione su Immagine vettoriale e bitmap: Che cos'è, per un computer, un'immagine?

Slide 3 della presentazione su Immagine vettoriale e bitmap: Il percorso

Slide 4 della presentazione su Immagine vettoriale e bitmap: Capitolo 01: Il mondo dei pixel

Slide 5 della presentazione su Immagine vettoriale e bitmap: L'immagine bitmap

Slide 6 della presentazione su Immagine vettoriale e bitmap: Capitolo 02: Le istruzioni matematiche

Slide 7 della presentazione su Immagine vettoriale e bitmap: Come si descrive un'immagine

Slide 8 della presentazione su Immagine vettoriale e bitmap: Capitolo 03: I formati principali

Slide 9 della presentazione su Immagine vettoriale e bitmap: GIF · JPEG · PNG

Slide 10 della presentazione su Immagine vettoriale e bitmap: SVG diventa uno standard

Slide 11 della presentazione su Immagine vettoriale e bitmap: Capitolo 04: La compressione

Slide 12 della presentazione su Immagine vettoriale e bitmap: Cosa succede al file

Slide 13 della presentazione su Immagine vettoriale e bitmap: Molti pensano che PNG sia nato per sostituire JPEG.

Slide 14 della presentazione su Immagine vettoriale e bitmap: Un'immagine vettoriale ingrandita del triplo perde nitidezza?

Slide 15 della presentazione su Immagine vettoriale e bitmap: Per saperne di più

Lampo10 slideIl filo essenziale, per presentarlo in classe Completa15 slideTutti i capitoli e gli approfondimenti

Falsi miti

✗ Mito Ingrandire o convertire in SVG una fotografia la rende nitida come un disegno vettoriale.

✓ Realtà In realtà una fotografia ha sfumature di colore troppo complesse per essere descritta come un insieme di forme geometriche: le fonti didattiche indicano il bitmap come formato adatto proprio a foto e immagini con ombreggiature complesse, mentre il vettoriale resta pensato per linee, testo e illustrazioni.
✗ Mito Comprimere un'immagine significa sempre perdere qualità.

✓ Realtà In realtà esistono due strade diverse: la compressione lossless, usata da PNG e GIF, riduce il peso del file ricostruendo l'immagine identica all'originale, senza scartare informazioni; solo la compressione lossy, per esempio quella di JPEG, scarta una parte dei dati.
✗ Mito PNG è nato per sostituire JPEG.

✓ Realtà In realtà, secondo il sito storico del progetto libpng, PNG fu progettato per sostituire il più vecchio formato GIF e, in parte, il formato TIFF: resta un formato lossless pensato per grafica e trasparenze, con uno scopo diverso dalla compressione fotografica di JPEG.

Mappa concettuale

Trascina lo sfondo per muoverti e i nodi per riposizionarli; usa − e + per chiudere e aprire i rami.

Quiz: mettiti alla prova

Rispondi alle domande per verificare quanto hai imparato: riceverai subito la correzione e una breve spiegazione.

Voto 0/10 0/5

1 Cosa distingue davvero un'immagine bitmap da una vettoriale?

2 Perché un'immagine vettoriale ingrandita non perde nitidezza?

3 Quale formato nasce nel 1987 con una compressione lossless a 8 bit di colore?

4 Qual è la differenza tra compressione lossy e lossless?

5 Vero o falso, SVG descrive un'immagine come una griglia di pixel colorati.

Flashcards

Tocca la carta per girarla e verifica se ricordi la risposta, poi passa alla successiva.

1 / 8

Spiegalo con parole tue

Il test definitivo: se sai spiegarlo con parole semplici, lo hai capito davvero. Scrivi la tua spiegazione, poi confrontala col Recap.

La tua spiegazione resta salvata solo su questo dispositivo.

Domande e risposte

Qual è la differenza tra un'immagine bitmap e una vettoriale?

La bitmap memorizza il colore di ogni singolo pixel in una griglia; la vettoriale memorizza istruzioni matematiche, punti e curve, che il computer usa per ridisegnare le forme a ogni dimensione. Per questo la vettoriale resta nitida quando viene ingrandita, mentre la bitmap perde definizione.

Perché le fotografie si salvano in JPEG e non in SVG?

Una fotografia ha sfumature di colore continue e complesse, difficili da descrivere come un insieme di forme geometriche. SVG è pensato per linee, testo e illustrazioni con contorni netti, mentre JPEG è lo standard lossy pensato apposta per le immagini fotografiche.

Cosa vuol dire che una compressione è lossless?

Vuol dire che il file compresso, una volta riaperto, riproduce l'immagine originale in modo identico, senza scartare nessuna informazione. PNG e GIF usano compressione lossless; JPEG, invece, usa una compressione lossy che scarta parte dei dati.

In che anno è nato il formato SVG?

SVG 1.0 è diventato una Raccomandazione ufficiale del W3C nel 2001, dopo una bozza (Candidate Recommendation) circolata dal 2000; una versione successiva, SVG 1.1, è diventata Raccomandazione nel 2003.