Passa al contenuto principale

Aggiungere un'immagine in HTML: una guida alla formattazione delle foto per il web

Se vuoi aumentare il tuo tasso di conversione, devi prestare molta cura al layout del tuo sito web. La stragrande maggioranza delle persone utilizza internet per cercare prodotti e servizi: questo rende il World Wide Web un ambiente molto competitivo. Per convertire i visitatori del tuo sito, devi farlo risaltare. È qui che la SEO on-page può essere utile. Uno dei modi più efficaci per ottimizzare il tuo sito web è aggiungere immagini, comprese le immagini in HTML.

HTML significa Hypertext Markup Language. Si tratta di un sistema standardizzato di marcatura per i file di testo. Contiene informazioni relative a grafica, colori e font. Ecco perché è così importante aggiungere immagini alle tue pagine web. Se vuoi imparare come aggiungere immagini in HTML, ci sono diversi passaggi da seguire.

Qui di seguito potrai conoscere meglio il procedimento necessario per incorporare un'immagine in HTML. Potrai quindi utilizzare le tue immagini per migliorare il posizionamento nei risultati di ricerca e attirare più visitatori sul tuo sito web. L'aggiunta di un'immagine in HTML è essenziale tanto per le piccole che le medie e grandi imprese.

Inserimento di immagini in pagine web con l’HTML

Riguardo al processo di aggiunta di un'immagine in HTML al tuo sito web, è necessario che tu capisca bene perché è importante. Aggiungere immagini sul sito può renderne le pagine più attraenti e leggibili. Se hai intenzione di creare un sito web, assicurati che sia il più interessante possibile.

Immagini, video e altri elementi grafici sono un ottimo modo per spezzare la monotonia. Si dice che un'immagine valga più di mille parole, e questo è certamente vero quando si tratta di immagini su un sito web. Puoi persino taggare le immagini con determinate parole chiave e frasi che possono aiutarti a migliorare il posizionamento nei risultati di ricerca, rendendo più facile per i motori di ricerca capire di cosa tratta il tuo sito web.

Naturalmente, i web crawler non hanno occhi. Non possono semplicemente guardare il tuo sito web o le immagini che mostra e capire cosa sta succedendo. Sta al codice HTML dire ai motori di ricerca di cosa tratta l'immagine, favorendo l’appropriata indicizzazione del tuo sito web.

Se vuoi inserire immagini nel tuo sito web usando l’HTML, devi usare il codice giusto. Alcuni dei tag che potrebbe essere necessario utilizzare includono <img> e <body>. Parleremo di questa importante sintassi qui sotto.

Come aggiungere un'immagine di sfondo in HTML

Se desideri aggiungere un’immagine di sfondo utilizzando l’HTML, puoi usare l’attributo immagine di sfondo inserendolo all’interno del tag <body> menzionato sopra. Ecco un esempio di codice:

<body background =”image.png”>

In questa stringa di codice, l’effettivo nome di file della tua immagine PNG va inserito al posto del termine "image". Ci vorrà un po' di pratica per scrivere correttamente il codice e potrebbe essere necessario giocare con i gradienti di colore affinché l'immagine appaia come la desideri. Dovresti sempre testare il codice HTML guardando l'immagine prima di passare all'attività successiva.

Spiegazione della sintassi dell'immagine in HTML

HTML tag attributes

Nella sintassi delle immagini in HTML vi sono diverse componenti che devi comprendere, per far sì che le tue immagini vengano visualizzate correttamente. I tag HTML da conoscere sono:

  • <img>: questo è il tag immagine che si usa per inserire un’immagine in una pagina. Tecnicamente, l'immagine non viene incollata sul sito. Le immagini sono piuttosto collegate via link alle pagine web. Questo tag crea uno spazio contenitore dove l'immagine di riferimento verrà visualizzata in seguito. Poiché è considerato un elemento vuoto, non esiste un tag di chiusura.
  • Src: questo termine specifica il percorso del file immagine. Quando una pagina web viene caricata, il browser recupererà l’immagine da un server e la inserirà nella pagina. Se questo attributo non è corretto, il browser non sarà in grado di trovare l'immagine o caricarla correttamente.
  • Alt: questo attributo è responsabile del testo alternativo per la foto. In questo attributo il file immagine va descritto accuratamente e il testo verrà visualizzato se l’immagine non viene caricata.

Questi sono alcuni dei termini più importanti che utilizzerai per far apparire le immagini sul tuo sito web.

Attributo img src (source) in HTML

Come accennato in precedenza, l'attributo src indica l'origine del file immagine. È di vitale importanza perché specifica da dove proviene l'immagine. L'origine dell'immagine è fondamentale per definire il suo percorso. Se questo valore non è corretto o il browser non è in grado di recuperare l'immagine, questa non verrà caricata correttamente. Assicurati di testare sempre l'attributo src per verificare che sia corretto, prima di completare la codifica.

Attributo alt in HTML

L'attributo alt è usato per il testo alternativo di un'immagine e deve darne una descrizione accurata. Se un'immagine non viene caricata dal browser, meglio evitare di avere uno spazio vuoto sullo schermo. Il testo alternativo verrà visualizzato dove avrebbe dovuto apparire l'immagine. Per intenderci, se un elemento immagine non riesce a essere caricato a causa di una connessione lenta, in sua vece verrà visualizzato il testo alternativo. Il testo alternativo può anche apparire durante il caricamento di un'immagine, fornendo ai visitatori del sito una descrizione mentre aspettano. Ecco perché è necessario che il testo sia descrittivo.

Explanation of alt attribute

L’attributo alt è importante anche per la SEO on-page. Un motore di ricerca non può effettivamente vedere l'immagine. Per classificarla adeguatamente, si baserà piuttosto sulla descrizione dell'immagine. Se il testo alternativo contiene parole chiave e frasi significative, potrà anche facilitare l'indicizzazione della pagina web da parte dei motori di ricerca. Ne conseguirà un miglior posizionamento nei risultati di ricerca.

Inoltre, il testo alternativo ha una funzione importante per l'accessibilità. Aggiungendo una breve descrizione nel codice HTML dell'immagine, gli screen reader potranno facilmente leggere il testo agli utenti. Dunque le persone ipovedenti potranno ricevere aiuto dalla maggior parte dei browser per comprendere il contenuto che offri.

La dimensione delle immagini in HTML

Vorrai forse sapere come intervenire in HTML sulla dimensione delle immagini. Ci sono diverse combinazioni di codice che puoi usare, ma la migliore è l'attributo “style”, piuttosto che gli attributi “width and height” (larghezza e altezza). Se decidi di utilizzare l'attributo "style", larghezza e altezza dell’immagine andranno specificate immediatamente a seguire. Un esempio di stringa di codice potrebbe essere questo:

  • Style=“width:300px;height:400px.”

In alternativa, puoi utilizzare gli attributi width e height per modificare le dimensioni dell'immagine. In questo modo:

  • Width=“300”
  • Height=“400”

Per quanto entrambe le opzioni siano valide, l'utilizzo dell'attributo style è preferibile, perché impedisce ai fogli di stile di modificare la dimensione delle immagini.

Altri modi per formattare le immagini in HTML

Esistono molti altri modi per formattare le immagini HTML. Tra questi:

  • Link image: È possibile utilizzare il tag <a> per aggiungere un collegamento alla foto. Quindi, è possibile avere l’URL dell’immagine e includere anche le dimensioni.
  • W3 image: da usare se vuoi utilizzare immagini W3. Viene utilizzato per visualizzare un'immagine semplice senza bordo.
  • Floating image: è possibile utilizzare le proprietà CSS per far fluttuare l'immagine a sinistra o a destra, cambiandone l'aspetto.
  • Image map: se desideri creare collegamenti ipertestuali a specifiche parti dell'immagine in aree diverse, devi utilizzare l’attributo image map. Ad esempio, potresti voler linkare i Paesi su una mappa a determinate pagine.

Suggerimenti per l'inserimento di immagini sul tuo sito web

Per ottenere il massimo dalle immagini che aggiungi al tuo sito web, devi tenere presente alcuni suggerimenti. Tra questi:

Tips for adding images to your website
  • Non pubblicare immagini protette da copyright. Esistono molti siti web dove puoi trovare immagini gratuite. Se trovi un'immagine online, controlla se è protetta da copyright prima di utilizzarla.
  • Assicurati che le immagini siano di alta qualità. Devi usare immagini di alta qualità se vuoi mostrare il tuo brand in modo efficace. L'uso di una foto sfocata darà un’impressione d’incuria riguardo al tuo sito web e questo potrebbe allontanare chi lo visita.
  • Ottimizza le immagini per la SEO. Oltre ad aggiungere l’attributo alt alle tue immagini, considera anche la velocità di caricamento. Devi assicurarti di comprimere le tue immagini prima di caricarle sul sito. Se la dimensione del file è troppo grande, il caricamento di un'immagine potrebbe richiedere troppo tempo e questo potrebbe far aumentare la frequenza di rimbalzo.
  • Usa foto pertinenti. Indipendentemente dal genere di immagini che carichi sul tuo sito web, assicurati che siano pertinenti al tuo brand.

Se tieni a mente questi suggerimenti, potrai ottenere il massimo dalle immagini che inserisci nel tuo sito. L'aggiunta di un'immagine in HTML diventa più facile man mano che ti eserciti.

Per concludere: aggiunta di immagini in HTML

Se desideri incorporare immagini in HTML, i punti precedenti sono tra i più importanti da ricordare. Anche se il processo di scrittura del codice per inserire un'immagine in HTML presenta qualche complessità, vi sono modi per semplificarlo.

Ecco dove puoi sfruttare gli strumenti di creazione web di Mailchimp. Il nostro web builder è facile da usare e gratuito: puoi creare un sito web di ecommerce professionale in pochi minuti senza spendere una fortuna. Inoltre, avrai accesso a dati preziosi che possono fornire informazioni su come i visitatori interagiscono con il tuo sito. Abbinando il web builder alla nostra suite di strumenti di marketing potrai facilmente posizionare il tuo sito, generare più traffico e avere successo.

Condividi questo articolo