Il <picture>tag HTML5 ti aiuterà a risolvere l'origine dell'immagine corretta in base alla larghezza dello schermo
Apparentemente il comportamento dei browser non è cambiato molto negli ultimi 5 anni e molti scaricheranno comunque le immagini nascoste, anche se su di esse fosse display: noneimpostata una proprietà.
Anche se esiste una soluzione alternativa alle query multimediali , potrebbe essere utile solo quando l'immagine è stata impostata come sfondo nel CSS.
Mentre pensavo che ci fosse solo una soluzione JS al problema ( caricamento lento , riempimento di immagini , ecc.), Mi è sembrato che ci sia una bella soluzione HTML pura che viene fuori dalla scatola con HTML5.
E questo è il <picture>tag.
Ecco come lo descrive MDN :
L' elemento HTML<picture> è un contenitore utilizzato per specificare più <source>elementi per uno specifico <img>contenuto in esso. Il browser sceglierà la fonte più adatta in base al layout corrente della pagina (i vincoli del riquadro in cui apparirà l'immagine) e il dispositivo su cui verrà visualizzato (ad esempio un dispositivo normale o hiDPI.)
Ed ecco come usarlo:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
La logica dietro
Il browser carica l'origine del imgtag, solo se nessuna delle regole multimediali si applica. Quando l' <picture>elemento non è supportato dal browser, tornerà nuovamente a mostrare il imgtag.
Normalmente si inserisce l'immagine più piccola come sorgente del file <img>e quindi non si caricano le immagini pesanti per schermi più grandi. Viceversa, se si applica una regola multimediale, la fonte del <img>non verrà scaricata, ma scaricherà il contenuto dell'URL del <source>tag corrispondente .
L'unico inconveniente qui è che se l'elemento non è supportato dal browser, caricherà solo l'immagine piccola. D'altra parte, nel 2017 dovremmo pensare e programmare nel primo approccio mobile .
E prima che qualcuno fosse troppo uscito, ecco l' attuale supporto del browser per <picture>:
Browser desktop
Browser per dispositivi mobili
Ulteriori informazioni sul supporto del browser sono disponibili su Posso usare .
La cosa buona è che la frase di html5please è usarla con un fallback . E personalmente intendo prendere il loro consiglio.
Maggiori informazioni sul tag sono disponibili nelle specifiche del W3C . C'è un disclaimer lì, che trovo importante menzionare:
L' pictureelemento è in qualche modo diverso dall'aspetto simile videoe dagli audioelementi. Mentre tutti contengono sourceelementi, l' srcattributo dell'elemento source non ha significato quando l'elemento è nidificato all'interno di un pictureelemento e l'algoritmo di selezione delle risorse è diverso. Inoltre, l' pictureelemento stesso non mostra nulla; fornisce semplicemente un contesto per il suo imgelemento contenuto che gli consente di scegliere tra più URL.
Quindi, ciò che dice è che ti aiuta a migliorare le prestazioni solo quando si carica un'immagine, fornendo un contesto ad essa.
E puoi ancora usare un po 'di magia CSS per nascondere l'immagine su piccoli dispositivi:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Pertanto, il browser non visualizzerà l'immagine reale e scaricherà solo l' 1x1immagine pixel (che può essere memorizzata nella cache se la si utilizza più di una volta). Tieni presente, tuttavia, che se il <picture>tag non è supportato dal browser, anche sugli schermi descktop l'immagine reale non verrà visualizzata (quindi avrai sicuramente bisogno di un backup polyfill lì).
