phpBB-Italia.it

Questo argomento ti insegnerà ad aggiungere immagini alle tue pagine.
Cominciamo con la presentazione dei due principali tipi di immagini per pagine web: jpg e gif.

Quindi procederemo spiegandoti i vari modi di inserire e personalizzare le immagini, soffermandoci sui diversi allineamenti che si possono scegliere.

I computer immagazzinano le immagini in diverse maniere.

Alcuni metodi si basano sulla massima compressione possibile dell'immagine.

Uno dei maggiori problemi circa l'uso delle immagini nei siti web consiste nel fatto che scaricare le immagini richiede molto più tempo rispetto al testo.

Per ridurre il più possibile il tempo necessario a scaricare, vengono usati dei formati di compressione di immagini. I due migliori usati sul web sono:
Questo significa che:

Titoli, bottoni, divisori, clipart e altre semplici immagini funzionano meglio in GIF.

Fotografie e immagini complesse normalmente funzionano meglio in JPG.

Se vuoi usare un'immagine che è in formato diverso da JPG o GIF, devi scaricare l'immagine in un programma di grafica e salvarla sia come JPG che come GIF.

Il tag usato per inserire un'immagine si chiama img.

Ecco il codice HTML usato per inserire l'immagine in questa pagina web:
Se l'immagine viene inserita nello stesso folder della pagina HTML, si può tralasciare il riferimento al dominio e passare direttamente a inserire l'immagine con questo codice:
Puoi cambiare le dimensioni di un'immagine usando gli attributi width e height (larghezza e altezza).

In generale, non è consigliabile ridurre le dimensioni delle immagini usando questi comandi, in quanto l'immagine viene trasferita in internet nella sua misura originale, indipendentemente dalla riduzione che si è operata su di essa. Questo rallenterebbe lo scaricamento della tua pagina web.

Questo significa che se hai un'immagine più grande di quanto la vorresti, per inserirla in dimensioni ridotte sulla tua pagina, dovrai ridurla in un programma di grafica, invece di ridurne semplicemente le dimensioni sulla pagina usando gli attributi width e height.

Al contrario, a volte, può essere vantaggioso ingrandire le immagini usando questa tecnica.

Ecco due comandi della stessa identica immagine - con differenti opzioni per larghezza (width) e altezza (height).
oppure

Se non vengono specificate le opzioni di larghezza e altezza, il browser automaticamente userà le dimensioni reali dell'immagine.

Comunque, dovresti sempre specificare le opzioni di larghezza e altezza, anche quando usi un'immagine nelle sue dimensioni reali!

Il motivo è che se queste opzioni vengono tralasciate, il browser non può costruire la pagina finché l'immagine non è completamente scaricata.

Questo vuol dire che il visitatore non può leggere il testo intorno all'immagine mentre l'immagine stessa viene scaricata - e questo dà come risultato l'impressione di una pagina "lenta".

Questo è ancora più evidente se l'immagine è all'interno di una tavola.
In tal caso, l'intera tavola appare solo quando l'immagine è completamente scaricata.

Puoi aggiungere un bordo all'immagine usando l'opzione border come puoi vedere nell'esempio qui sotto:

Nota:
I browser Netscape mostreranno il bordo soltanto se l'immagine è un link
L'aggiunta di un bordo all'immagine serve anche per aiutare il visitatore a capire immediatamente che l'immagine in questione è un link. Comunque, la rete è piena di immagini - link che non hanno bordi, così normalmente i visitatori fanno scorrere il mouse sulle immagini per vedere se queste sono anche link.

Comunque - se hai un'immagine che crea spesso dubbi, dovresti considerare l'ipotesi di aggiungerle un bordo - o forse faresti addirittura meglio a cambiare del tutto l'immagine - perché se questa non mostra chiaramente di essere un link, vuol dire che non è efficace.

Puoi aggiungere un testo alternativo a un'immagine usando l'opzione alt
Bisognerebbe sempre aggiungere testi alternativi alle immagini, in modo che gli utenti possano farsi un'idea dell'immagine prima che questa venga scaricata.

Questo è particolarmente importante se l'immagine è un link.

Ci sono poche cose che irritano di più di voler lasciare la pagina corrente - e allo stesso tempo essere obbligati ad aspettare che un'immagine venga completamente scaricata prima di poterlo fare.

Viene allora quasi spontaneo adoperare i semplici comandi del browser e abbandonare l'intero sito.

Puoi facilmente aggiungere spazio sopra e sotto le tue immagini con l'attributo
Vspace .

In modo simile puoi aggiungere spazio a destra e a sinistra dell'immagine usando l'attributo Hspace .
Queste opzioni ti permettono di aggiungere spazio intorno alla tua immagine. Purtroppo ti obbligano ad aggiungere la stessa quantità di spazio a ogni lato dell'immagine (sopra e sotto - o destra e sinistra).

Il modo per aggirare il problema, se si vuole aggiungere spazio solo ad un lato dell'immagine, è di usare un'immagine gif trasparente di 1x1 pixel.
Se, per esempio, vuoi uno spazio di 10 pixel sul lato destro dell'immagine, puoi usare l'immagine trasparente (pixel.gif) in questo modo:
L'immagine gif trasparente di 1x1 pixel viene semplicemente "tirata" fino a raggiungere la dimensione desiderata.

Il "trucchetto" dell' 1x1 pixel è probabilmente uno degli stratagemmi più usati sull'intera rete per risolvere problemi.

I motivi sono ovvi: funziona su tutti i browsers e assicura una assoluta precisione di pixel nel progetto.

Si possono allineare le immagini in conformità con il testo che le circonda, usando i seguenti allineamenti:

default allinea l'immagine usando gli attributi di default del Web browser. E' come baseline.

left allinea l'immagine al margine sinistro e avvolge il testo che segue l'immagine.

right allinea l'immagine al margine destro e avvolge il testo che precede l'immagine.

top allinea la parte superiore dell'immagine con il testo intorno.

texttop allinea la parte superiore dell'immagine con la parte superiore del testo situato più in alto sulla linea.

middle allinea la parte mediana dell'immagine con il testo intorno.

absmiddle alinea l'immagine con il centro della linea corrente.

baseline allinea l'immagine con il baseline della linea corrente.

bottom allinea la parte inferiore dell'immagine con il testo intorno.

absbottom allinea l'immagine con la parte inferiore della linea corrente.

center allinea il centro dell'immagine con il testo intorno.

In aggiunta agli allineamenti verticali trattati nella pagina precedente, ci sono anche i possibili allineamenti orizzontali dell'immagine.

Per fare questo, basta aggiungere align="left" o align="right" al tag <img> .

Esempio:
fonte:echoecho