HTML immagini

Mentre il testo si compongono la maggior parte dei contenuti di un sito web, a volte le immagini possono dire più di mille parole o aggiungere che spezia in più per la progettazione del sito. Per fortuna è molto facile da implementare le immagini in HTML.

Image tag

Per caricare le immagini in un documento HTML è possibile utilizzare il tag di immagine <img src="..." width="" height="" alt="..." /> . Si noti che si tratta di un self-closing tag in modo da non dimenticare lo spazio e la slash alla fine. Simile a href del link HTML l'attributo src (source) contiene l'indirizzo assoluto o relativo di un file di immagine.

La larghezza e l'altezza opzionale attributi impostare la dimensione dell'immagine in pixel e può essere impostato ai valori esattamente lo stesso come fonte immagine o ad un valore più grande o più piccolo per ridimensionare l'immagine. Anche se questi attributi non sono richiesti si dovrebbe sempre cercare di usarli, altrimenti il browser dovrà calcolare la dimensione delle immagini durante il caricamento della pagina, che può causare il contenuto di muoversi.

L'attributo alt (testo alternativo) descrive il contenuto dell'immagine e viene visualizzata nel caso in cui l'immagine non viene caricata. Si noti che alt è obbligatorio per tutti i tag di immagine in modo da essere Valid XHTML 1.0 Strict. Se non si vuole fornire un testo alternativo può essere semplicemente copiato alt="" . Se possibile si deve sempre fornire una descrizione delle immagini dato che aiuterà le persone con disabilità con screen reader o motori di ricerca come Google per sapere che cosa la vostra immagine è di circa.

HTML image

Uscita

Image link

Accanto al link di testo è inoltre possibile utilizzare i collegamenti di immagini o una combinazione di entrambi.

Link HTML image

Uscita

Formati immagine

Anche se questo è più adatto in particolare per una grafica web tutorial, è sempre bene conoscere i vari tipi di formati di immagine è possibile utilizzare. Maggior parte dei browser sostenere i seguenti 3 tipi di immagini:

GIF

GIF può contenere al massimo 256 colori (anche chiamato una tavolozza di colori) di tutti i milioni di colori il computer può visualizzare. Sono da usare per i non-grafica realistica, come pulsanti, disegni e loghi.

Avere solo i colori limitata rende questi file di immagine relativamente di piccole dimensioni del file che è sempre una buona cosa. E 'anche possibile specificare i pixel trasparenti, il che significa che invece di un altro colore sarà redatto lasciare lo show sfondo.

Essi hanno inoltre il supporto di animazione per la memorizzazione di più GIF cornici e riprodurli come una sequenza. Non è così ampiamente usato più, però, ora che Flash è più o meno mainstream.

JPEG

Supporto JPEG 16,7 milioni di colori e sono quindi più adatti per le fotografie realistiche. La qualità dell'immagine può variare da grande a molto scarsa a seconda delle impostazioni di compressione. Cercare di trovare un equilibrio tra le dimensioni del file e file di grande qualità, come farà il tuo sito web per caricare lentamente.

PNG

PNG è un formato un po 'più recente nel panorama web design e si pensa di sostituire GIF (se ben compresso, un file PNG in palette devono essere sempre più piccolo in dimensioni del file rispetto alla sua controparte GIF). Essi sostengono tavolozze di colori, come GIF e 16,7 milioni di colori come il JPEG, anche se a differenza di JPEG, PNG utilizzare la compressione senza perdita di dati che, pur mantenendo il 100% della qualità originale dell'immagine.

La caratteristica forse più interessante è il loro sostegno per la trasparenza alfa. Ogni pixel può avere la propria trasparenza che vanno da 0 a 100% (a differenza del GIF, dove un pixel è trasparente o opaco), che consente di effetti interessanti, come l'anti-aliasing (bordi lisci nei confronti di qualsiasi colore di sfondo). E 'supportato in tutti i moderni browser (Firefox, Opera, Safari, IE7). Purtroppo IE6 non riconosce in modo nativo la trasparenza alfa, anche se esistono alcune soluzioni accettabili.