Das HTML5- <picture>Tag hilft Ihnen dabei, die richtige Bildquelle abhängig von der Bildschirmbreite aufzulösen
Anscheinend hat sich das Verhalten des Browsers in den letzten 5 Jahren nicht wesentlich geändert, und viele haben die versteckten Bilder immer noch heruntergeladen, selbst wenn eine display: noneEigenschaft für sie festgelegt wurde.
Obwohl es eine Problemumgehung für Medienabfragen gibt , kann dies nur nützlich sein, wenn das Bild im CSS als Hintergrund festgelegt wurde.
Während ich dachte, dass es nur eine JS-Lösung für das Problem gibt ( verzögertes Laden , Ausfüllen von Bildern usw.), schien es eine nette reine HTML-Lösung zu geben, die mit HTML5 sofort einsatzbereit ist.
Und das ist der <picture>Tag.
Hier ist , wie MDN es beschreibt:
Das HTML- <picture>Element ist ein Container, mit dem mehrere <source>Elemente für ein bestimmtes Element angegeben werden <img>. Der Browser wählt die am besten geeignete Quelle entsprechend dem aktuellen Layout der Seite (die Einschränkungen des Felds, in dem das Bild angezeigt wird) und dem Gerät, auf dem es angezeigt wird (z. B. ein normales oder HiDPI-Gerät).
Und so geht's:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Die Logik dahinter
Der Browser lädt die Quelle des imgTags nur, wenn keine der Medienregeln gilt. Wenn das <picture>Element vom Browser nicht unterstützt wird, wird das imgTag erneut angezeigt .
Normalerweise würden Sie das kleinste Bild als Quelle für das verwenden <img>und daher die schweren Bilder für größere Bildschirme nicht laden. Umgekehrt wird, wenn eine Medienregel gilt, die Quelle des <img>nicht heruntergeladen, sondern der Inhalt der URL des entsprechenden <source>Tags.
Die einzige Gefahr besteht darin, dass das Element nur das kleine Bild lädt, wenn es vom Browser nicht unterstützt wird. Auf der anderen Seite sollten wir 2017 im mobilen ersten Ansatz denken und codieren .
Und bevor jemand zu aufgeregt wurde, finden Sie hier die aktuelle Browserunterstützung für <picture>:
Desktop-Browser
Mobile Browser
Weitere Informationen zur Browserunterstützung finden Sie unter Kann ich verwenden ?
Das Gute ist, dass der Satz von html5please darin besteht, ihn mit einem Fallback zu verwenden . Und ich persönlich beabsichtige, ihren Rat anzunehmen.
Weitere Informationen zum Tag finden Sie in der W3C-Spezifikation . Dort gibt es einen Haftungsausschluss, den ich wichtig zu erwähnen finde:
Das pictureElement unterscheidet sich etwas von dem ähnlich aussehenden videound den audioElementen. Während alle sourceElemente enthalten , hat das srcAttribut des Quellelements keine Bedeutung, wenn das Element in einem pictureElement verschachtelt ist und der Ressourcenauswahlalgorithmus unterschiedlich ist. Auch das pictureElement selbst zeigt nichts an; Es bietet lediglich einen Kontext für das enthaltene imgElement, mit dem es aus mehreren URLs auswählen kann.
Es heißt also, dass Sie die Leistung beim Laden eines Bildes nur verbessern können, indem Sie einen Kontext dafür bereitstellen.
Und Sie können immer noch CSS-Magie verwenden, um das Bild auf kleinen Geräten auszublenden:
<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>
So wird der Browser nicht angezeigt , das aktuelle Bild und wird nur auf das Download - 1x1Pixelbild (die im Cache gespeichert werden kann , wenn Sie es mehr als einmal). <picture>Beachten Sie jedoch, dass das tatsächliche Bild auch auf Descktop-Bildschirmen nicht angezeigt wird, wenn das Tag vom Browser nicht unterstützt wird (daher benötigen Sie dort auf jeden Fall ein Polyfill-Backup).
