Inserisci immagini con HTML - come funziona

Se vuoi inserire un'immagine sul tuo sito web con HTML, usa il tag img. Leggi qui come funziona esattamente e cosa devi fare attenzione.

Come inserire immagini con HTML: le basi

Con il giorno può inserire immagini.
La fonte dell'immagine è indicata all'interno del tag: inserisce il file "testbild.webp" dalla sottocartella "immagini" sul sito Web.
Sono anche possibili fonti esterne tramite URL: integra il logo CHIP dai nostri server.

Numerosi attributi possono essere aggiunti nel tag img:

Utilizzare "larghezza" e "altezza" per determinare la dimensione dell'immagine sul sito Web: l'immagine viene visualizzato quadrato con una lunghezza laterale di 100 pixel.
Con "alt" si definisce un testo alternativo che viene visualizzato se non è possibile caricare la rispettiva immagine. È necessario impostare sempre questo attributo quando si inseriscono immagini con HTML.
L'attributo "bordo" specifica lo spessore della cornice in pixel. Una foto con ha una cornice relativamente spessa con cinque pixel.
Utilizzare "allinea" per allineare l'immagine. I valori per questo attributo sono "bottom", "top", "middle", "left", "right" e "center".
Con "hspace" e "vspace" è possibile (orizzontalmente e verticalmente) impostare una distanza dall'immagine.

Esistono vari formati di immagine che è possibile includere nel codice HTML.

JPG: le immagini in formato JPG sono più comunemente utilizzate per le pagine Web. Questo formato rappresenta 16, 7 milioni di colori e un JPG può essere compresso molto bene. Il file di immagine può quindi essere reso molto piccolo, il che consente un tempo di caricamento rapido.
PNG: il formato PNG può anche visualizzare 16, 7 milioni di colori e può essere compresso. Il vantaggio rispetto al formato JPG è che la compressione è possibile senza perdite.
Le aree definite in formato PNG possono anche essere visualizzate in modo trasparente. Tuttavia, i browser molto vecchi presentano problemi nella visualizzazione dei lucidi.
GIF: se si desidera inserire immagini in movimento con HTML, il formato GIF è adatto. In questo formato vengono visualizzati solo 256 colori e la compressione avviene automaticamente senza alcuna opzione di impostazione.
Il formato GIF è più adatto per piccoli grafici animati o loghi. Per garantire che i loghi si inseriscano armoniosamente in una pagina, i lucidi possono essere utilizzati in formato GIF come un PNG.