Differenze tra gli attributi src, srcset e data-src nel tag <img>

TLTR

Gli attributi src e data-src non hanno nulla in comune, tranne che sono entrambi consentiti da HTML5 CR ed entrambi contengono le lettere src. Tutto il resto è diverso.

L’attributo src è definito nelle specifiche HTML e ha un significato funzionale: identifica l’URL dell’immagine da caricare nel tag img.

Srcset è un attributo immagine di HTML5. Questo attributo viene utilizzato per definire un elenco di file di origine delle immagini, insieme alle informazioni sul dimensionamento. Fornire risoluzioni alternative permette al browser di selezionare l’opzione più appropriata in base al device e quindi velocizzare il caricamento della pagina. Quando viene impostato l’attributo srcset, i file src verranno utilizzati come immagine di “fallback” o “predefinita”. Se l’immagine srcset non viene caricata o se il browser non supporta srcset, verrà invece selezionato il file src. Quindi è molto importante includere sempre l’attributo src nelle tue immagini.

L’attributo data-src è solo uno degli infiniti set di attributi data- *, che non hanno un significato definito ma possono essere usati per includere dati invisibili in un elemento, per l’uso in script o stili.

Per maggiori informazioni: Documentazione MDN sugli attributi data-xxxx

Il tag src

L’attributo src identifica un’immagine tramite un URL. L’immagine definita dall’URL viene recuperata dal browser e inserita nel documento al caricamento della pagina.

Esistono tre diversi tipi di URL che possono essere utilizzati nell’attributo src:

URL assoluti

<img src="https://www.esempio.it/img/logo.jpg">

Inserire l’URL assoluto nell’attributo src è l’unico modo per collegarsi ad un’immagine esterna, ovvero ospitata su un altro sito web.

Una nota sulla pratica ldell’hotlinking

Includere un’immagine da un altro sito web è generalmente chiamato hotlinking. Non tutte le immagini ospitate su URL esterni sono hotlink. Hotlink sono quelle immagini già presenti in altre pagine web e che vengono rubate da altri siti web. Il webmaster in pratica usa l’immagine di un altro sito web e relativa banda del server per inserirla in una diversa pagina web (o un forum).

URL relativi

<img src="/img/logo.jpg">

Un URL relativo non include il nome del dominio ed è relativo alla pagina corrente o al dominio corrente. Se inizi l’URL senza una barra (/), sarà relativo alla pagina corrente. Se inizi con una barra, sarà relativa al dominio.

Dovendo usare URL relativi, è quasi sempre meglio utilizzare URL di origine relativi al dominio, non alla pagina. Non si romperanno se il contenuto della pagina viene spostato o copiato.

Dal punto di vista SEO consiglio di usare link assoluti. Tuttavia, ci sono casi in cui avere immagini con URL relativi può essere utile. Infatti, durante una migrazione con cambio di dominio non è necessario sostituire gli URL delle immagini.

Data:image base64

È possibile codificare il contenuto di un’immagine in una stringa URI. Quindi si utilizza la stringa come se fosse un URL il browser la interpreta semplicemente come se fosse un file.

<img src="data:image/png;base64,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" />

È necessario uno speciale programma di codifica per trasformare immagini o altri file in DATA URIs. Quello sopra è stato creato con questo strumento.

i DATA URIs non sono generalmente un’ottima soluzione. Le immagini più grandi e dettagliate generano stringhe follemente lunghe e in realtà non si caricano più velocemente dei file esterni. Riducono le richieste HTTP al server, che potrebbero interessarti (o meno). Possono anche essere utili in situazioni in cui le immagini esterne potrebbero non essere caricate, ad esempio nelle e-mail o nei documenti da leggere offline.

Srcset

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

Esaminiamo uno scenario tipico. Un tipico sito Web può contenere un’immagine di intestazione e alcune immagini di contenuto sotto l’intestazione. L’immagine dell’intestazione si estenderà probabilmente su tutta la larghezza dell’intestazione e l’immagine del contenuto si adatterà da qualche parte all’interno della colonna del contenuto.

Data-src

In HTML le immagini utilizzano l’attributo src nei tag immagine per fornire la posizione da caricare. Invece data-src si utilizza per fornire informazioni aggiuntive che possono essere utilizzate da JavaScript per migliorare l’esperienza degli utenti. Per i tag data-src e src possiamo concludere come segue:

• Per caricare e visualizzare una particolare immagine usa src.
• Per aggiungere un pezzo di metadati che può contenere un URL, utilizza data-src o qualsiasi dato-xxx che preferisci.
• Gli attributi data- * vengono utilizzati per memorizzare dati personalizzati privati nella pagina o nell’applicazione.
• Gli attributi data- * ci danno la possibilità di incorporare attributi di dati personalizzati su tutti gli elementi HTML.
• I dati possono quindi essere utilizzati da JavaScript per creare un’esperienza utente più coinvolgente.