Come incorporare un'immagine in codice HTML
Con pochi frammenti di codice HTML puoi inserire un'immagine in qualsiasi pagina web, email o documento HTML/XML. Non si "converte" un'immagine in codice HTML: si salva l'immagine in locale o a un indirizzo web specifico, poi la si richiama nel documento HTML. Puoi anche specificare le dimensioni in pixel (larghezza e altezza). Ecco come fare.
Passaggio 1: Scegliere l'immagine
Può essere qualsiasi immagine, di qualsiasi dimensione.
Passaggio 2: Salvare l'immagine in locale o online
Salvala sul computer o su un server web. Se vuoi che altri la vedano online, caricala su un server: il tuo spazio web, oppure servizi come Google Photos, Imgur, ecc. Prendi nota dell'URL dove è salvata.
Passaggio 3: Inserire l'immagine nel documento HTML
Apri il documento HTML. Usa il tag <img> con l'URL esatto dell'immagine:
<img src="https://esempio.com/immagine.jpg" />
Quando l'utente apre il documento nel browser, l'immagine apparirà.
Passaggio 4: Regolare la larghezza
Specifica la larghezza desiderata in pixel usando l'attributo width:
<img src="https://esempio.com/immagine.jpg" width="400" />
L'immagine verrà ridimensionata a 400 pixel di larghezza (mantiene le proporzioni se non specifichi l'altezza).
Passaggio 5: Regolare l'altezza
Analogamente, usa l'attributo height per l'altezza in pixel:
<img src="https://esempio.com/immagine.jpg" height="300" />
Passaggio 6: Combinare larghezza e altezza
Puoi usare entrambi gli attributi insieme:
<img src="https://esempio.com/immagine.jpg" width="400" height="300" />
Attenzione: se le proporzioni non corrispondono all'originale, l'immagine risulterà distorta. Meglio specificare solo uno dei due valori.
Passaggio 7: Trasformare l'immagine in link
Avvolgi il tag <img> in un tag <a> (anchor):
<a href="https://sito-di-destinazione.com"><img src="https://esempio.com/immagine.jpg" /></a>
Cliccando l'immagine si aprirà il link specificato.
Consiglio aggiuntivo
Aggiungi sempre l'attributo alt per accessibilità e SEO: <img src="..." alt="Descrizione dell'immagine" />.