{"id":164031,"date":"2024-08-02T09:00:00","date_gmt":"2024-08-02T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/immagini-html-tag-img-best-practice\/"},"modified":"2024-08-02T09:00:00","modified_gmt":"2024-08-02T07:00:00","slug":"immagini-html-tag-img-best-practice","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/immagini-html-tag-img-best-practice\/","title":{"rendered":"Immagini in HTML: Il Tag img e le Best Practice per il Web"},"content":{"rendered":"

Le immagini<\/strong> sono un elemento fondamentale di qualsiasi sito web moderno. Attirano l’attenzione, comunicano concetti complessi in modo immediato e migliorano l’esperienza utente complessiva. In HTML, il tag <img><\/code> \u00e8 lo strumento principale per inserire immagini nelle pagine web. Tuttavia, utilizzarlo correttamente richiede attenzione a numerosi aspetti: dall’accessibilit\u00e0 alla performance, dalla SEO alla responsivit\u00e0.<\/p>\n

Il Tag img: Sintassi e Attributi Essenziali<\/h2>\n

Il tag <img><\/code> \u00e8 un elemento auto-chiudente<\/strong> (void element), il che significa che non ha un tag di chiusura. Richiede obbligatoriamente due attributi: src<\/code> e alt<\/code>.<\/p>\n

L’attributo src<\/code> (source) specifica il percorso dell’immagine<\/strong>. Pu\u00f2 essere un URL assoluto (https:\/\/esempio.com\/foto.jpg<\/code>), un percorso relativo (immagini\/foto.jpg<\/code>) o anche un data URI per immagini inline codificate in Base64. La scelta tra URL assoluto e relativo segue le stesse logiche dei link HTML<\/a>.<\/p>\n

L’attributo alt<\/code> (alternative text) fornisce una descrizione testuale<\/strong> dell’immagine. Questo testo viene visualizzato quando l’immagine non pu\u00f2 essere caricata, viene letto dagli screen reader per gli utenti con disabilit\u00e0 visive e viene utilizzato dai motori di ricerca per comprendere il contenuto dell’immagine. La sintassi base \u00e8: <img src=\"foto.jpg\" alt=\"Descrizione dell'immagine\"><\/code>.<\/p>\n

Gli attributi width<\/code> e height<\/code> specificano le dimensioni<\/strong> dell’immagine in pixel. Anche se le dimensioni vengono spesso gestite via CSS, specificarle direttamente nell’HTML ha un vantaggio importante: permette al browser di riservare lo spazio<\/strong> necessario durante il caricamento della pagina, evitando il fastidioso effetto di layout shift (lo spostamento degli elementi quando l’immagine viene finalmente caricata). Questo ha un impatto diretto sul punteggio CLS<\/strong> (Cumulative Layout Shift), uno dei Core Web Vitals di Google.<\/p>\n

Scrivere Alt Text Efficaci<\/h2>\n

La qualit\u00e0 dell’alt text<\/strong> ha un impatto significativo sull’accessibilit\u00e0 e sul SEO. Un buon alt text deve essere descrittivo, conciso e contestuale<\/strong>. Ecco le linee guida fondamentali:<\/p>\n