Tag

, , ,

I formati ammessi nel Web sono sostanzialmente tre:

Formato Descrizione
GIF (Graphic Interchange Format): le immagini GIF hanno una tavolozza che non supera i 256 colori, per questo vengono utilizzate spesso per grafici o icone.
È possibile ottimizzare il peso questo tipo di file riducendo ancora il numero di colori. Oltre a questo GIF ci consente di impostare trasparenze nelle immagini e di creare piccoli banner, questo formato consente infatti di rappresentare anche semplici animazioni (GIF animate)
JPG (o JPEG) È l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica
PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è invece proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser). PNG permette sia di rappresentare immagini di qualità fotografica (PNG24), sia di ottimizzare colori in modo simile a GIF (PNG8 – 256 colori)

La sintassi per inserire una immagine è:

1
2
<img src="http://miosito.it/miaImmagine.gif"
     alt="testo" />

Esaminiamo il significato delle keyword principali:

Keyword Descrizione
img Abbreviazione di “image” (immagine), è il nome del tag per inserire le immagini
src Sta per “source” (origine), è il percorso (URL) in cui il browser troverà il file da mostrare
alt È il “testo alternativo”, ovvero il testo che appare se, per qualche motivo, il browser non riesce a mostrare l’immagine. Possiamo anche omettere questo attributo, ma risulta utile per l’accessibilità e per i motori di ricerca

Il tag <img /> è un tag senza un contenuto, per questo non ha un elemento</img> di chiusura: lo chiudiamo utilizzando lo slash (“/”) prima della parentesi angolare.Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro.L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto.