Guida di HTML (base)

Immagini per il Web

Con il capitolo precedente abbiamo esaurito la parte di HTML vera e propria che riguarda le immagini. Nonostante questo, non abbiamo ancora finito di parlare delle immagini nel web.

Infatti, se prima ci siamo concentrati sul file HTML, in questo capitolo poniamo l'attenzione sull'altra faccia della medaglia: il file immagine.

Qui i più critici obbietteranno: "Ma perchè in una guida di HTML a un certo punto ci mettiamo a parlare di tutt'altro?". La risposta è semplice: HTML serve a creare siti web, ed ogni sito internet (o quasi) oggi fa un uso massiccio di foto e grafica. Qualsiasi web designer deve sapere come "lavorare" le immagini, in modo da renderle adatte al sito che sta creando e, in generale, ad essere trasmesse in rete; un sito può avere anche un HTML impeccabile, ma se usa immagini non adatte al web può risultare lento a caricarsi (e quindi spiacevole da navigare), o brutto da vedere.

Il nostro discorso sulle immagini servirà a questo: ottenere il massimo risultato con il minore spazio possibile (immagini leggere rendono più veloce la navigazione), scegliendo i giusti formati e i migliori metodi di compressione.

Formati di immagine

Partiamo da una domanda: avete mai pensato a quanta informazione c'è in un'immagine? Mi spiego meglio, quando apriamo un file che contiene una fotografia, ad un primo sguardo uno si concentra sul soggetto della foto (un volto, un paesaggio, un disegno, ecc...). Se però guardiamo la foto con "occhio informatico", ci accorgiamo che l'intera immagine è composta da tanti quadratini, i pixel, così piccoli che quasi facciamo fatica a distinguerli. Dal punto di vista di un computer, il numero e il colore di tutti questi quadratini è la quantità di informazione che l'immagine trasporta.

Una foto medio-grande è composta da oltre un milione di questi pixel, ognuno dei quali può assumere oltre sedici milioni di colori differenti: tanta roba!

Se per una persona può sembrare assurdo, dal punto di vista del computer il modo più naturale per memorizzare un'immagine è semplicemente salvare il colore di tutti i pixel, uno per uno. Leggendo il file immagine, i singoli pixel sullo schermo saranno "colorati" a seconda di quanto è scritto nel file immagine.

Questo approccio è stato il primo ad essere usato, ed è detto bitmap. Bitmap è un formato di file, perchè specifica un modo di scrivere informazioni (in questo caso immagini) in un file. I file bitmap hanno estensione .bmp

Possiamo facilmente intuire che i files bitmap abbiano generalmente dimensioni enormi: dover memorizzare il colore di ciascuno dei tantissimi pixel che compongono l'immagine richiede inevitabilmente molto spazio sul disco. Per questo motivo il formato bitmap è assolutamente inadatto da inserire in una pagina web: quando bisogna far viaggiare dei dati attraverso Internet è essenziale che questi dati occupino il minor spazio possibile!

Fortunatamente nel corso dell'evoluzione telematica sono state trovate diverse soluzioni a questo problema; queste soluzioni consistono in diversi formati di file, che consentono di memorizzare informazioni sulle immagini senza descrivere ogni songolo pixel (risparmiando quindi parecchio spazio). I tipici formati di files per il web sono .gif, .jpg e .png

I metodi attraverso attraverso cui questi formati riescono a comprimere le immagini sono molto interessanti, ma purtroppo non è questo il luogo di analizzarli.

Diamo invece un'occhiata a questi diversi formati: ciascuno è adatto per un particolare scopo, ed è importante capire quale. Nei successivi sottoparagrafi confronteremo i vari formati, facendo riferimento a questa immagine:

Immagine in formato bitmap
Immagine di dimensione 353x241 px (pixel). In formato bitmap quest'immagine pesa 332,4 KB

Suggerimento: nei sottoparagrafi successivi, usa le combinazioni di tasti CTRL++ (premi contemporaneamente il tasto CTRL e il tasto +) e CTRL+- per ingrandire la pagina e guardare "da vicino" le immagini compresse.

GIF

Il formato GIF (Graphic Interchange Format), pronunciato con la g dolce (come nella parola formaggio), è uno dei più vecchi formati di immagine: fu introdotto infatti nel 1987, dalla compagnia americana CompuServe, che ancora oggi ne detiene il brevetto.

Immagine in formato GIF
Queste due immagini sono compresse utilizzando il formato GIF. La prima pesa 25,4 KB, la seconda, evidentemente più compressa, 12,4 KB. Come si può vedere il formato GIF è un formato lossy, ovvero causa perdita di informazione.

GIF è da preferire quando...

  • L'immagine è fatta di pochi colori semplici; si osservi infatti che nell'esempio qua sopra il fumetto XD, fatto di pochi colori omogenei tra loro, appare identico all'immagine originale bitmap, al contrario dello sfondo che appare evidentemente degradato.
  • L'immagine è un'animazione; esatto, GIF permette di creare immagini in movimento, e questa è una caratteristica abbastanza unica tra i formati di immagine.
  • L'immagine ha uno sfondo trasparente; immaginiamo di avere una pagina web con un bello sfondo blu, su cui andiamo ad inserire l'immagine fuga.png (vedi paragrafi precedenti); quest'immagine ha uno sfondo bianco, e questo produrrebbe un risultato molto poco elegante nella nostra pagina web. GIF permette di risolvere il problema creando immagini in cui la figura in primo piano è visibile, mentre lo sfondo è trasparente.

GIF è da evitare quando...

  • L'immagine contiene sfumature di colore complesse; come abbiamo potuto notare, GIF ha un rendimento molto basso con le fotografie.
  • Si vuole trasmettere un'immagine alla massima qualità possibile; GIF è un formato lossy, ovvero comporta una perdita di qualità delle immagini, in ogni caso. Questa perdita può essere più o meno visibile, ma certamente è sempre presente (salvo casi particolari, che non staremo a discutere).

Nonostante GIF sia un formato ancora molto diffuso in rete, oggi risultati migliori, a parità di immagine, possono essere ottenuti con il formato PNG (vedi sottoparagrafi successivi).

JPEG

Un altro formato "storico" del web è JPEG (Joint Photographic Expert Group); creato nei primi anni '90, JPEG è formato immagine attualmente più diffuso su Internet.

Immagine in formato JPEG, qualità 50% Immagine in formato JPEG, qualità 10%
Queste due immagini sono compresse utilizzando il formato JPEG. La prima è compressa a qualità 50%, e pesa 10,8 KB; la seconda è compressa a qualità 10%, e pesa 4,0 KB. Anche JPEG è un formato lossy.

JPEG è da preferire quando...

  • L'immagine contiene sfumature di colore complesse: JPEG ha un rendimento elevatissimo sulle fotografie, permettendo di ridurne di molto la dimensione, senza grosse perdite di qualità.

JPEG è da evitare quando...

  • L'immagine è formata da figure semplici e colori omogenei; in questi casi sono da preferire i formati PNG e GIF, che hanno una resa molto migliore su questi tipi di immagine.
  • Si vuole mantenere la qualità originale dell'immagine. JPEG è un formato lossy, e questo significa che, in qualsiasi caso, l'immagine perderà informazione (e quindi qualità) dopo la compressione. Questo effetto può essere minimizzato scegliendo un buon valore di qualità (immagini JPEG con qualità attorno al 90% occupano poco spazio e offrono una degradazione minima), ma non può mai essere eliminato del tutto.

Prima di passare a PNG è doveroso dire che lo stesso gruppo che, una decina di anni fa, definì lo standard JPEG sta promuovendo un nuovo standard, JPEG2000 che migliora ulteriormente il rendimento di JPEG. Questo standard è ancora scarsamente utilizzato, perchè la maggior parte dei browser web non lo supporta.

PNG

Il formato PNG (Portable Network Graphics) è relativamente recente: fu creato nel 1995, quando CompuServe decise di far pagare i propri diritti d'autore sul formato GIF. PNG è un formato libero, ovvero è stato creato per essere messo a disposizione della comunità informatica, fuori da ogni logica di mercato.

Immagine in formato PNG, in modalità lossless Immagine in formato PNG, indicizzata a 64 colori Immagine in formato PNG, indicizzata a 56 colori
Queste tre immagini sono compresse utilizzando il formato PNG. La prima (a sinistra) è compressa in modalità lossless (ovvero senza perdita di qualità) e pesa 101,1 KB. La seconda è indicizzata a 64 colori (come il primo esempio in GIF), e pesa 21,5 KB; l'ultima è indicizzata a 56 colori (come il secondo esempio in GIF) e pesa 10,6 KB.

PNG è da preferire quando...

  • L'immagine è formata da pochi colori omogenei; in questo caso PNG equivale a GIF, ed effettivamente PNG è nato proprio con lo scopo di sostituire il vecchio formato commerciale GIF.
  • Si vuole mantenere la qualità originale dell'immagine. PNG, a differenza di GIF, permette infatti di ridurre la dimensione di un'immagine senza perdere informazioni sul suo contenuto. Questo significa che l'immagine PNG sarà identica, in ogni singolo pixel, all'originale bitmap. Questo discorso ovviamente non vale se si indicizza l'immagine (vedi esempi qua sopra).
  • Si vogliono creare immagini semitrasparenti. Un'altra caratteristica unica di PNG è la semitrasparenza, ovvero è possibile avere zone dell'immagine che non sono nè completamente opache nè completamente trasparenti, in modo da ottenere una sorta di "effetto fantasma".

PNG è da evitare quando...

  • Si vuole ridurre di molto la dimensione di una fotografia, e si è disposti ad accettare la piccola perdita di qualità implicata da JPEG.

Parallelamente a PNG esiste anche un formato MNG, per la distribuzione in rete di piccole animazioni.

Lavorare con le immagini: GIMP

È stato bello parlare dei formati di immagine, ma di fatto non abbiamo detto nulla su come convertire un'immagine da un formato all'altro, o su come creare un'immagine da zero (di questo in realtà non parleremo, perchè non è un argomento che rientra in questa guida).

Fotomontaggio realizzato con un programma di grafica
Questa immagine è stata creata con un programma di grafica, unendo 16 foto deverse. Fonte: Wikimedia Commons, autore: Mmxx, licenza: CC-BY-SA 3.0

Per fare queste cose (e molto altro) esistono programmi di grafica fatti apposta e... no, non mi sto riferendo a Paint per Windows.

Tra i software proprietari sono senz'altro da ricordare i seguenti, per storia, potenza e diffusione:

I software proprietari però non sono le uniche soluzioni al problema della computer grafica. Il mondo del software libero mette a disposizione un potente strumento di fotoritocco: GIMP.

GIMP è disponibile per tutti i principali sistemi operativi, e si può scaricare dal sito ufficiale (www.gimp.org). Se stai usando un sistema GNU/Linux dai un'occhiata tra i menu: probabilmente GIMP è già installato! (e se non lo è puoi installarlo in pochi clic dal tuo gestore dei pacchetti)

GIMP (GNU Image Manipulation Program) è il programma "ufficiale" del sistema GNU per lavorare con le immagini. Si tratta senz'altro del programma di grafica più completo disponibile come software libero: diamo solo una rapida occhiata per vedere che faccia ha.


Interfaccia principale del programma GIMP.

Come vediamo dall'immagine, GIMP è provvisto di tre pannelli principali:

  • Strumenti: il programma mette disposizione tanti strumenti (il pennello per disegnare a mano libera, il secchiello per riemire intere aree di colore, lo strumento testo per inserire delle scritte, e via dicendo...), indispensabili per compiere le operazioni di base nella creazione e modifica delle immagini.
  • Opzioni strumento: ciascuno strumento può essere personalizzato in diversi modi; nell'esempio il pannello di opzioni fa riferimento al secchiello: chi indovina come è stato ottenuto quello sfondo verde a strisce?
  • Livelli: questa è una novità (in Paint di Windows non c'è!). GIMP, come tutti i grandi programmi di grafica, lavora per livelli. Nella pratica, è come se la nostra immagine fosse composta da tanti fogli di acetato trasparenti, messi uno sopra l'altro, ognuno con qualcosa di diverso; nell'esempio possiamo capire bene che il livello più "basso" contiene lo sfondo a strisce, e sopra questo sfondo si trovano tutte le componenti della scritta: l'ombra, il testo vero e proprio, il bordo scuro del testo e i riflessi.

Scegliendo File > Salva con nome... salviamo le immagini che creiamo; dalla finestra "Salva con nome" possiamo scegliere il formato che desideriamo; i formati supportati sono davvero tanti: se guardiamo bene troviamo anche quelli di cui abbiamo parlato poco fa.

Salva con nome
La schermata "Salva con nome".

Nel prossimo paragrafo vedremo qualche esempio di come convertire le immagini, in modo da rendere adatte alla Rete.

GIMP at work: convertiamo le immagini

Vediamo di mettere in pratica un po' della teoria di cui abbiamo parlato fino ad ora, esaminando con qualche esempio i casi più frequenti che ci capitano quando costruiamo un sito web.

Foto giganti

Supponiamo di voler condividere sul nostro sito una foto personale, che magari abbiamo scattato con la nostra fotocamera digitale. Questo è il tipico caso in cui ci troviamo tra le mani una foto gigante, molto grande nelle dimensioni, e molto pesante come file.

Questo è ottimo dal punto di vista del fotografo: maggiore è la grandezza dell'immagine, maggiore sarà la sua qualità quando la andremo a visualizzare o a stampare su carta. Non va bene invece dal punto di vista del webmaster: se inseriamo una foto molto pesante la pagina sarà lenta a caricare, rendendo fastidiosa la navigazione sulle nostre pagine. E poi non ha senso pubblicare immagini alla massima qualità possibile, se queste servono solo ad essere guardate rapidamente.

Prendiamo ad esempio il file D2X_6160.JPG (Tasto destro > Salva con nome per scaricare l'immagine sul tuo computer), recuperato dalla pagina web http://www.puntomusica91.it/saleprova.html. Questo file è stato preso direttamente dalla macchina fotografica digitale, e pesa 5,4 Megabytes: assolutamente inaccettabile per una pagina web!

Osserviamo che abbiamo sottomano un file JPEG: vuol dire la nostra fotocamera ha già eseguito una prima compressione dell'immagine. Per fortuna: infatti se l'immagine fosse in formato Bitmap occuperebbe la bellezza di 35 MB! La nostra "missione" sarà ridurre questa dimensione, portandola al di sotto dei 100 KB. Ce la faremo?

Cominciamo aprendo l'immagine con GIMP: possiamo farlo utilizzando il menu File > Apri, all'interno della finestra principale del programma.

La nostra foto, aperta in GIMP
Il menu "File > Apri" di GIMP (a sinistra); la foto aperta (a destra) non sembra grandissima, ma occhio all'ingrandimento (nel cerchio blu in basso): è solo il 20% dell'immagine originale!

A questo punto per portare a termine la nostra missione useremo due strategie:

  • Rimpicciolire l'immagine. Chi ha provato a impostare l'ingrandimento al 100% (vedi figura qui sopra, a destra) si sarà accorto che questa fotografia è davvero grande. Per l'esattezza misura 4288x2848 pixel. Di solito la larghezza di una foto sul web non supera i 500 o 600 pixel.
  • Comprimere l'immagine. Ricordate che JPEG permette di scegliere il livello di compressione? La nostra fotografia è già in formato JPEG, ma possiamo comprimerla di più se aumentiamo questo livello.

GIMP ha una funzione apposta per ridimensionare le immagini, e la si può raggiungere dal menu Immagine > Scala immagine:

La finestra per scalare le immagini Immagine scalata
Il comando "Scala" si trova sotto il menu "Immagine" (a sinistra); Dalla finestra "Scala immagine" possiamo scegliere una nuova dimensione per la foto (al centro); l'immagine scalata sembra molto piccola: regoliamo l'ingrandimento per vederla alle giuste dimensioni (a destra).

Nella finestra Scala immagine, selezioniamo il valore corrente di "Larghezza" (4288) e sostituiamolo con 600. Se premiamo il tasto invio vediamo che l'altezza cambia automaticamente, in proporzione alla nuova altezza che abbiamo scelto. Con il pulsante "Scala" ridimensioneremo l'immagine; a questo punto conviene impostare uno zoom al 100% (vedi figura qua sopra, a destra) per vedere l'immagine nelle sue dimensioni reali.

Non resta che salvare la foto (File > Salva con nome), questo ci permetterà di aumentare il livello di compressione:

90% è un buon livello di compressione
Scegliamo un nuovo nome per l'immagine compressa, dall'estensione .jpg GIMP capirà che deve utilizzare il formato JPEG (a sinistra); il livello di qualità scelto è 90% (a destra).

Se scegliamo un nome con estensione .jpg, GIMP capirà che dovrà salvare un file JPEG, e ci chiederà che livello di qualità usare: minore è la qualità dell'immagine, meno pesante sarà il file, maggiore è la qualità maggiore il peso.

Nella maggior parte dei casi 90% è un ottimo compromesso, per ridurre il peso con solo una piccola perdita di qualità. Nel nostro caso il file finale occuperà solo 63,2 Kilobytes: missione compiuta! Suggerimento: quando salvi una JPEG in GIMP seleziona sempre la casella "Mostra l'anteprima nella finestra immagine": spostando le finestre che coprono l'immagine potrai vedere il cambiamento di qualità in tempo reale, mano a mano che muovi il cursore!

Disegni

Nel paragrafo precedente abbiamo "fatto magie" con JPEG, ma non dobbiamo fare l'errore di pensare che questo formato risolva tutti i problemi di grafica per il web.

Prendiamo infatti ad esempio questa immagine:

Mr. Burns
Mr. Burns, il malvagio multimilionario dei Simpsons; l'immagine originale bitmap peserebbe 144 KB.

Questo disegno è un ottimo esempio di immagine fatta da colori omogenei. In questo caso utilizzare JPEG è una pessima idea:


Particolare dell'immagine originale (a sinistra), indicizzata a 32 colori con PNG (al centro) e compressa con JPEG, qualità 90% (a destra). Guardandole "da vicino" è evidente che JPEG in questa situazione non regge il confronto con PNG. E pensare che, utilizzando JPEG l'immagine viene a pesare 16,3 KB, mentre quella indicizzata con PNG (al centro) pesa solo 6,6 KB!

Come abbiamo visto nei paragrafi precedenti, la migliore soluzione a questa situazione è utilizzare il formato GIF o PNG. Adesso vedremo come indicizzare l'immagine e salvarla in PNG.

Indicizzare un'immagine significa grossomodo ridurre il numero dei suoi colori. Ogni pixel di un'immagine tradizionale, infatti, può assumere oltre 16 milioni di colori diversi. Con l'indicizzazione "stringiamo il campo", limitando il numero massimo di colori disponibili, e riducendo quindi la dimensione dell'immagine.

Per prima cosa apriamo l'immagine, proprio come abbiamo fatto nel sottoparagrafo precedente, "Foto giganti". Selezioniamo quindi la voce Indicizzata, dal menu Immagini > Modalità:

Immagine > Modalità > Indicizzata
Conversione dell'immagine a indicizzata.

Una schermata di nome Conversione a indicizzato ci mostrerà delle opzioni: scriviamo "32" nella casella Numero massimo di colori e clicchiamo sul pulsante "Conversione"; la nostra immagine ora è indicizzata a 32 colori.

Non resta che salvarla. Per farlo procediamo come abbiamo fatto nel sottoparagrafo precedente (File > Salva con nome), ma avendo cura di utilizzare l'estensione .png, anzichè .jpg per il file che andremo a creare.

Immagini vecchie e nuove

Spendo solo poche parole, per un'osservazione che invece è molto importante.

Comprimere le immagini sul web è importante, perchè inserire oggetti troppo pesanti potrebbe ostacolare la navigazione dei nostri visitatori più "svantaggiati" (linea poco veloce, navigazione da telefonino, ecc...). Non dobbiamo dimenticare però due cose:

  • Oggi la grande maggioranza delle connessioni ad internet è a banda larga: per molti utenti non è un problema visualizzare disegni e fotografie in alta risoluzione, a qualità piena.
    • L'ideale sarebbe permettere ai navigatori "veloci" di visualizzare le immagini alla massima qualità possibile.
  • "Informatica" è la scienza dell'informazione: qualsiasi informatico storce il naso quando si tratta di perdere informazioni sui files, come facciamo quando comprimiamo le immagini riducendone la qualità.

Una soluzione al primo punto la vedremo nel prossimo capitolo, parlando di thumbnails, mentre per il secondo resta soltanto una raccomandazione: quando comprimiamo un'immagine non la sostituiamo mai all'immagine originale, ma la salviamo com un altro nome, distinguendo le immagini a bassa qualità dalle "immagini originali"; le prime le pubblicheremo su Internet, le seconde le conserveremo sul nostro disco rigido, nel caso in futuro volessimo lavorarci su ancora (è sempre buona norma lavorare solo sulle immagini originali, per evitare perdite di qualità "a catena", da una compressione all'altra).

In breve...

In questo capitolo abbiamo visto che...

  • Un buon web designer deve avere un minimo di cultura sui formati di immagine: il modo con cui le comprimiamo incide sulla velocità di caricamento delle nostre pagine.
  • Un'immagine nature, in formato Bitmap, memorizza il colore di ogni singolo pixel, e occupa quindi molto spazio.
  • Esistono dei formati di file che permettono di comprimere le immagini, generalmente perdendo un po' di qualità su di esse.
    • GIF è un vecchio formato basato su indicizzazione, adatto a comprimere immagini formate da colori omogenei.
    • JPEG è il più comune formato di immagine per il web, è adatto a comprimere fotografie e altre immagini che contengono sfumature di colore complesse. I risultati ottenuti sono generalmente molto buoni, sia come qualità che come dimensione del file. Gli "artefatti di compressione" (distorsioni rispetto all'originale) sono invece più evidenti se l'immagine è composta da colori omogenei.
    • PNG è un formato libero, relativamente recente, che può essere usato in due modi:
      • Indicizzando l'immagine, proprio come GIF, ma ottenendo generalmente risultati migliori.
      • In modo lossless, riducendo la dimensione del file senza tuttavia perdere qualità.
  • La compressione è un procedimento che riduce la qualità delle immagini: salviamo sempre i files originali da qualche parte, in modo da poterli riprendere se dovessimo ancora lavorarci su.
    • Se ri-comprimiamo immagini già compresse ne peggioriamo ulteriormente la qualità.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag