Was ist eine gültige, effiziente und moderne Möglichkeit, Bilder nicht auf Mobilgeräten zu laden?

Question

Ich bin schon mehrfach darauf gestoßen und habe es immer mit einer Kombination aus CSS und JS gelöst, aber mit zunehmender Unterstützung für reaktionsschnelle Bilder habe ich nach einer eloquenteren Lösung gesucht. Ich versuche einfach zu nicht laden Sie ein Bild auf Handy, während die Semantik (also keine CSS background-image), unter Ausnutzung der Browser-Pre-Loading (also keine JS Lazy Loading).

Wie kann ich das erreichen?

Answer 1

tl; dr

Verwenden des srcset Attribut mit einem Bildkandidatenzeichenfolge, die eine URL von about:blank und eine Breite von Deskriptors 1w hat und setzen das sizes Attribut des Ausweich <source-size-value> zu 0vw. Fügen Sie dann CSS-Regeln hinzu, um das Bild für kleinere Ansichtsfenster auszublenden. Schließlich wickeln Sie es in eine <picture> mit <source> s für absolute Kontrolle.

---

srcset

Es scheint mir, dass diese ansprechende Bilder und ein wenig mit CSS gelöst werden können.

Betrachten Sie das folgende ansprechende Bild:

Trotz gibt es keine Ausweich <source-size-value> in sizes sein wird foo-375.png noch geladen. So scheint es, dass wir eine Bildkandidatenkette finden müssen, die keine zusätzlichen HTTP-Anfragen sendet.

Ich suchte SO nach Tipps, wie im Wesentlichen eine Null-Bild-Kandidaten-Zeichenfolge festlegen. Ich fand mehrere Methoden, von denen alle wie so umgesetzt werden kann:

<img 
    src="foo-585.png" 
    alt="foo" 
    srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
> 

Beachten Sie, dass eine neue Bild Kandidatenkette mit einer Breite Beschreiber von 1w und Ausweich <source-size-value> von 0vw hinzugefügt werden. In diesem Beispiel ist [URL] ein Platzhalter für eine der URLs im Folgenden beschrieben:

Leer Fragment

One answer rät ein leeres Fragment (#) als valid Option. Leider zeigen meine Tests an, dass diese Methode wiederholt HTTP-Anfragen an die aktuelle URL sendet. Nicht gut.

Tiny Daten URL

Another answer empfiehlt The Tiniest GIF Ever in einer Base64-codierten Daten URL:

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= 

Anfangs dachte ich, dass für die gzip-Komprimierung auf seine eigene mit sehr wenig Gelegenheit, auf 58 Bytes, es ist der Ansicht, dass das Speichern des GIF als externe Ressource mit einer kürzeren URL effizienter ist als mehrere Daten-URLs, aber ich habe mich geirrt; gzip isst mehrere Instanzen dieser Daten-URL zum Frühstück.

Aber, wie one comment weist darauf hin, Daten-URLs sind slow on mobile.

Kein Schema, kein Host, Port 0

Yet another answer schlägt eine URL ohne Schema verwenden, ohne Host und Port 0 (//:0). Dies scheint zu funktionieren, aber es gibt concerns über Firewall-Warnungen. CSS ist auch erforderlich, um das gestörte Bildstyling zu verbergen.

about:blank

Das gleiche Kommentator about:blank vorgeschlagen verwenden, die tatsächlich scheint gut zu funktionieren, aber wie die letzte Methode, tut CSS erfordert das gebrochene Bild Styling zu verbergen:

img { 
    display: none; 
} 

@media (min-width: 768px) { 
    img { 
     display: inline-block; 
    } 
} 

Für mich Dies scheint die beste Option zu sein, da sie gültig und effizient ist und keine Warnungen für den Benutzer anzeigt. Diese wenigen CSS-Zeilen scheinen mir sehr nützlich zu sein.

<picture>

Da die Kommentare haben darauf hingewiesen, srcset ist nicht garantiert. Wenn der Browser aus irgendeinem Grund gegen Ihren about:blank Image-Kandidaten entscheidet, dann fällt die Lösung auseinander. Um dies zu beheben, wickeln Sie Ihre <img> in <picture> Element und fügen Sie die entsprechenden <source> s:

<picture> 
    <source 
     media="(min-width: 768px)" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    > 
    <source srcset="about:blank"> 
    <img 
     src="foo-585.png" 
     alt="foo" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
     sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
    > 
</picture>