Come Inserire Immagini in HTML

Pubblicare una o più immagini sul proprio sito web o profilo di un social network è un ottimo modo per ravvivarlo e renderlo più piacevole. Il codice HTML da utilizzare per inserire un'immagine all'interno di una pagina web è molto semplice e spesso è una delle prime cose che si imparano quando si inizia a studiare l'HTML.

Parte 1

Parte 1 di 2:

Inserire un'Immagine

Scarica PDF

1
Carica l'immagine da usare online. Esistono numerosi servizi di hosting gratuiti che puoi usare come archivio online per le tue immagini, per esempio Picasa Web Albums, Imgur, Flickr o Photobucket. Leggi attentamente i termini relativi all'utilizzo del servizio che hai selezionato. Alcuni riducono automaticamente la qualità delle immagini per diminuire lo spazio occupato su disco, oppure le rimuovono nel caso in cui dovessero generare troppo traffico (questo accade per preservare la banda del servizio di hosting).
- Alcuni servizi di hosting dedicati ai blog permettono di caricare le proprie immagini utilizzando direttamente l'interfaccia di amministrazione del blog.
- Se hai scelto un servizio di hosting a pagamento per il tuo sito web, sarai in grado di caricare le tue immagini direttamente su quest'ultimo utilizzando un client FTP. In questo caso è bene creare una cartella denominata "Immagini" per organizzare al meglio i file relativi al sito.^{[1]XFonte di ricerca}
- Se hai la necessità di usare un'immagine pubblicata su un altro sito web, dovrai chiedere il permesso al relativo proprietario. Se ti concede il permesso di usarla, scaricala in locale sul computer, quindi caricala sul servizio di hosting che hai scelto di utilizzare.
2
Modifica il codice HTML. Apri il file HTML relativo alla pagina dove vuoi inserire l'immagine in esame.
- Se stai cercando di pubblicare un'immagine all'interno di un forum, puoi inserire il codice direttamente nel post. Molti forum utilizzano un proprio sistema personalizzato per gestire i contenuti anziché il codice HTML. In questo caso, se non riesci a pubblicare l'immagine di tuo interesse, chiedi aiuto agli altri utenti che frequentano il forum.
3
Inizia inserendo il tag HTML "img". Individua il punto all'interno del tag "body" del codice HTML in cui desideri inserire l'immagine in esame, quindi digita il codice <img>. Si tratta di un tag HTML "vuoto", il che significa che non prevede l'utilizzo del relativo tag di chiusura. Tutte le informazioni relative all'immagine da pubblicare andranno inserite all'interno delle parentesi angolari del tag "img".
- <img>
4
Individua l'URL completo dell'immagine da utilizzare. Accedi alla pagina web dove hai caricato l'immagine in oggetto. Selezionala con il tasto destro del mouse (se stai usando un Mac, cliccala tenendo premuto il tasto "Ctrl"), quindi seleziona l'opzione "Copia l'indirizzo dell'immagine" dal menu contestuale che apparirà. In alternativa puoi visualizzare l'immagine in una pagina dedicata scegliendo l'opzione "Visualizza immagine" e copiare l'URL visibile all'interno della barra degli indirizzi del browser.
- Se hai caricato l'immagine all'interno della cartella dedicata a questo tipo di contenuti memorizzata sul servizio di hosting che ospita anche il sito web su cui la pubblicherai, allora dovrai inserire il relativo link rispettando il seguente formato "/[cartella_immagini]/nome_file" (per esempio /images/pippo.jpg). Se il link indicato non dovesse funzionare, significa che l'immagine molto probabilmente è contenuta all'interno di una sottocartella. Per ovviare al problema, spostala nella directory principale.
5
Colloca l'URL dell'immagine all'interno dell'attributo "src". Come già saprai, gli attributi fanno riferimento a un tag HTML e ne modificano l'aspetto e il funzionamento e vanno inseriti all'interno di quest'ultimo. L'attributo src è la contrazione del termine inglese "source" e serve a indicare al browser internet dove reperire l'immagine da assegnare al tag "img". Digita il codice src=" " e incolla l'URL dell'immagine da usare all'interno delle virgolette. Ecco un esempio che ti aiuterà a capire meglio:
- <img src="http://www.serviziodihosting.com/pippo.jpg">
6
Aggiungi l'attributo "alt". Tecnicamente il codice HTML creato nel passaggio precedente ha tutto quello che serve per visualizzare l'immagine scelta nel punto desiderato, ma è meglio utilizzare anche l'attributo alt per ottenere i risultati migliori. Quest'ultimo indica al browser internet il testo che deve essere visualizzato nel momento in cui l'immagine non fosse disponibile. La funzione più importante di questo attributo, però, è quella di indicare ai motori di ricerca a cosa fa riferimento l'immagine e permettere ai lettori automatici di descriverla agli utenti non vedenti.^{[2]XFonte di ricerca} Usa il codice mostrato di seguito modificando il testo inserito fra virgolette:
- <img src="http://www.serviziodihosting.com/pippo.jpg" alt="How.com.vn Italiano: inserisci qui la descrizione dell'immagine">
- Se l'immagine non è inerente al contenuto presente nella pagina web, includi comunque l'attributo "alt" ma senza aggiungere del testo (alt="How.com.vn Italiano: ").^{[3]XFonte di ricerca}
Salva il file che contiene la struttura HTML del tuo sito web. A questo punto visita la pagina web appena modificata, oppure aggiornala se è già visibile all'interno di una scheda del browser. L'immagine che hai inserito dovrebbe apparire nel punto specificato. Se la dimensione non ti soddisfa o non sei felice del risultato ottenuto, prosegui nella lettura dell'articolo.
Pubblicità

Parte 2

Parte 2 di 2:

Ottimizzare la Visualizzazione dell'Immagine

Scarica PDF

1
Modifica la dimensione finale dell'immagine. Per ottenere i risultati migliori ridimensiona l'immagine usando un software gratuito, quindi carica sul sito o sul servizio di hosting la nuova versione. Gli attributi width e height del codice HTML servono a indicare al browser come ridimensionare un'immagine. Tuttavia alcuni browser potrebbero generare un risultato imprevedibile – e in rari casi generare un errore nella visualizzazione dell'immagine.^{[4]XFonte di ricerca} Se hai la necessità di eseguire una modifica rapida ed efficace, utilizza il seguente codice:
- <img src="http://esempio.com/imgesempio.png" alt="How.com.vn Italiano: visualizza questa immagine" width=200 height=200> (I valori degli attributi width e height sono espressi in pixel).^{[5]XFonte di ricerca}^{[6]XFonte di ricerca}
- In alternativa, usa questo codice <img src="http://esempio.com/imgesempio.png" width=100% height=10%> (in questo caso i valori degli attributi width e height rappresentano una percentuale delle dimensioni della pagina web o dell'elemento in cui è inserita l'immagine).
- Nel caso in cui usassi un solo attributo (width o height), il browser internet dovrebbe preservare automaticamente il rapporto esistente fra altezza e larghezza dell'immagine per mantenere le proporzioni corrette.
2
Aggiungi un "tooltip". L'attributo title può essere usato per aggiungere un commento o un'informazione addizionale all'immagine che ne aiuti a capire la funzione. Per esempio puoi citare l'artista che l'ha creata. Nella maggior parte dei casi il testo dell'attributo title viene visualizzato quando l'utente sposta il cursore del mouse sull'immagine e lo mantiene fermo per qualche secondo.
- <img src="http://esempio.com/imgesempio.png" title="Scattata da J. Godfrey">
3
Usa l'immagine come collegamento ipertestuale. Per fare in modo che l'immagine funga anche da link HTML, dovrai inserirla all'interno dei tag <a></a>. Ecco un codice di esempio:
- <a href="http://www.url_del_link.com"><img src="http://url_immagine.com/immagine.gif"></a>
Pubblicità

Consigli

Per sicurezza, conserva sempre una copia di backup delle immagini che pubblichi all'interno del tuo sito web.
Il formato GIF è più funzionale per le immagini relative a loghi o cartoni, mentre il formato JPEG è ideale per immagini più complesse, per esempio nel caso di fotografie.
Assicurati che gli URL delle singole immagini includano anche l'estensione del file (per esempio ".jpg", ".gif", eccetera).
Nella maggior parte dei casi occorre utilizzare immagini di qualità, ma con una dimensione ridotta, quindi cerca di usare solo i seguenti formati: GIF, JPEG, JPG o PNG.^{[7]XFonte di ricerca} Le immagini create in altri formati potrebbero non essere visualizzate correttamente sui browser internet più usati e diffusi.

Avvertenze

Non utilizzare la tecnica denominata "hotlinking", che prevede di inserire nel proprio sito web le immagini pubblicate su un'altra sorgente, normalmente sotto forma di link a un altro sito web. In questo modo verrà consumata la banda riservata a quest'ultimo, ma senza generare traffico verso le sue pagine web. Oltre a essere una tecnica scorretta, se le immagini vengono rimosse dal sito principale scompariranno automaticamente anche dal tuo. Inoltre se il proprietario del sito di cui stai utilizzando le immagini dovesse accorgersi del tuo comportamento scorretto, potrebbe modificarle di proposito cambiando di fatto anche l'aspetto delle tue pagine web.^{[8]XFonte di ricerca}