Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

le immagini

20 aprile 2011, Scritto da , category HTML

immagine html

Per inserire un’immagine si utilizza il meta tag <img> e si specifica il percorso del file. Es:

<img src=“immagini/logo.gif“>

inserisce un’immagine presente nella sotto cartella “immagini”.

Attributi del tag img

  • src: specifica il path (percorso). Può essere assoluto o relativo e segue la struttura del file system di Linux.
  • alt: serve per descrivere un testo alternativo che viene visualizzato qualora l’immagine sia erroneamente collegata o sia stata rimossa dal server. E’ molto importante anche per l’accessibilità in quanto consente ai software tipo screen reader, di leggere e ripetere ad un non vedente la descrizione dell’immagine. Il contenuto dell’attributo alt non viene visualizzato se l’immagine è correttamente visibile
  • border: serve per aggiungere / rimuovere un bordo all’immagine. I valori vanno da 0 (= no bordo) a salire. Generalmente assume la colorazione del nodo html che incorpora l’immagine
  • title: serve per mostrare un testo descrittivo che viene mostrato sopra l’immagine in una etichetta solitamente gialla oppure nella barra di status del browser
  • width / height: servono per specificare la larghezza (in pixel) e l’altezza dell’immagine. In caso le dimensioni specificate siano differenti dal formato originale, il browser scalerà l’immagine. Il risultato di tale operazione generalmente comporta ad un rendering dell’immagine non ottimale. Nel caso non si specifichino questi due valori, l’immagine verrà incorporata con le sue dimensioni reali.
  • align: serve per allineare l’immagine a sinistra, centro o destra rispetto al testo
  • hspace / vspace: servono per inserire spaziature verticali o orizzontali (in pixel) tra l’immagine ed il testo che la circonda
  • usemapmap: permette che parti diverse dell’immagine diventino zone cliccabili da poter associare a link differenti. Viene tradizionalmente utilizzata per creare delle regioni cliccabili all’interno di cartine/mappe geografiche

Esempio:

<img src=“immagini/logo.gif“ width="200" height="200" hspace="5" vspace="5" border="2" alt="logo azienda" title="clicca per tornare alla homepage" align="left">

I formati supportati per le pagine HTML sono:

  • BMP (bitmap graphics): ha la caratteristica di essere molto dettagliata, con profondità di colore e risoluzione fedele all’originale ma sono molto “ingombranti” in termini di peso in kilobyte
  • TIFF (Tagged Image File Format): formato simile a BMP ma di proprietà della Aldus (poi Adobe)
  • GIF (Graphics Interchange Format): immagini contenenti fino a 256 colori. Poco ottimizzato ma buona risoluzione. Consente le trasparenze e consente le animazioni.
  • JPG (Joint Photographer’s Expert Group): è un formato molto “compatto” grazie ad un algoritmo di compressione molto potente. Rende  le immagini facilmente trasportabili ed ottime per l’utilizzo in pagine web. Occupa poca memoria, è veloce da scaricare ed archiviare, ha una profondità di colore molto elevata (16 milioni di colori) ma una nitidezza dell’immagine meno buona delle gif
  • PNG (Portable Network Graphics): tipo di immagine che ha le caratteristiche di leggerezza e trasparenza delle gif, unite ad una profondità di colore simile alle jpeg. Inizialmente era poco diffuso perché non correttamente renderizzato dai vecchie versioni del browser Internet Explorer. Ora è molto diffuso.

Come evitare errori comuni nell’inserimento delle immagini

E’ fondamentale controllare sempre attentamente le lettere che compongono il path (directory + nome dell’immagine) evitando di non riportare fedelmente le maiuscole e le minuscole.

Per chi sviluppa in ambiente Microsoft Windows non si noterà la differenza se scriviamo Logo.gif invece di logo.gif perché il file system di Windows è case unsensitive ma nel momento in cui andremo a mettere online la pagina, su un server, il file system -tipicamente Unix like– considererà Logo.gif un’immagine diversa da logo.gif.

E’ fondamentale prestare attenzione ad aver scritto correttamente il path (percorso) di inclusione dell’immagine all’interno dell’attributo src. Comunemente può capitare che, per inserire logo.gif che sta dentro la cartella immagini, si scriva (per distrazione o per aver usato un editor visuale)

<img src="c:\immagini\Logo.gif">

Se la risorsa è locale, cioè risiede nel nostro disco rigido (tipicamente c:\miosito\ per sistemi Windows) l’immagine non potrà essere visualizzata in remoto in quanto il browser andrà a cercare l’immagine in un c:\miosito che è privo di significato (in ambiente Unix/Linux il disco rigido non viene etichettato come c: d: etc).

Attenzione anche al separatore di cartelle: mentre in ambiente Windows si usa il backslash \ , in ambiente UnixLinux si usa lo slash / . Le immagini, una volta caricate sul server, seguiranno quest’ultimo tipo di scrittura.

Da prestare molta attenzione anche alla corretta scrittura dei path. Un’immagine che si trova in una sotto cartella, chiamata img, verrà linkata con

src="img/immagine"

mentre una che si trova in una cartella superiore a dove si trova il file html che stiamo editando, dovrà essere referenziata con l’utilizzo dei “../” tipo:

<img src="../img/foto.gif">

Per includere un’immagine si può utilizzare il path relativo (come scritto sopra), cioè relativo alla pagina che stiamo editando, o assoluto, cioè privo di riferimenti alla pagina editata. In questo secondo caso si userà:

<img src="http://www.miosito/img/foto.gif">

con tanto di http:// ed il nome del sito.

L’approccio migliore, secondo la mia esperienza, è di usare il path relativo partendo, però, dalla root del sito. Tornando all’esempio precedente, pertanto, scriverei così:

<img src="/img/logo.gif">

Questo approccio mi consentirà il vantaggio che, qualora decidessi di spostare la pagina html che sto editando, le immagini incluse nel documento continueranno ad essere referenziate correttamente

Un consiglio per tutti: evitate di usare nomi di cartelle ed immagini (ma anche di file) contenenti lo spazio ” ” come separatore di parole, tipo: src=”img/mia foto.jpeg”. Utilizzate anzi  separatori come il trattino (o segno meno) “-“, il “trattino basso” (underscore) “_” o il punto “.”

Un altro consiglio: utilizzate nomi di cartelle, file ed immagini che siano facili da ricordare e che seguano sempre la stessa convenzione in fatto di maiuscole, minuscole e logica.