Ausgeblendete Bilder nicht laden

Es gibt immer wieder den Anwendungsfall Bilder auszublenden. Wenn das Ausblenden mit display: none erfolgt gibt es den großen Nachteil, dass das Bild trotzdem vom Browser heruntergeladen wird.

Die folgende Idee kam mir beim Lesen des Artikels How CSS display:none Affects Images on Page Load. Dort werden zwei Lösungen für dieses Problem aufgezeigt:

1. Bilder sollen erst dann im DOM auftauchen, wenn sie auch wirklich benötigt werden. Es gibt Frameworks und mit Sicherheit auch Javascript Bibliotheken, die das auf eine einfache Art und Weise erreichen lassen.
2. Die Bilder als Hintergrundbilder verwenden.

Mit keiner der beiden Lösungsansätzen bin ich aber zufrieden. Wenn nicht bereits Frameworks im Einsatz sind die das Nachladen von Bildern ermöglichen, erscheint es mir als wenig sinnvoll Frameworks dafür einzubinden oder Bibliotheken hinzuzufügen. Beides bringt eine Datenmenge mit sich, die im Zweifel höher ist als die Bilder die nicht geladen werden.

Das Problem mit den Hintergrundbildern ist die fehlende Semantik. Hintergrundbilder haben keinen alt Tag und können nicht sehenden Benutzern nicht einfach zugänglich gemacht werden.

Die Lösung

Mit der Annahme, dass je nach Bildschirmauflösung Bilder angezeigt oder ausgeblendet werden, kann man sich das picture Tag zunutze machen. Für die Bereiche, in denen das Bild ausgeblendet wird (auch mit display:none), wird eine source hinzugefügt, die mittels einer Media Query ein 1×1 transparentes png Bild lädt. Dadurch wird anstatt des großen nur ein winziges Bild geladen. Wird das 1×1 Bild immer wieder für diesen Anwendungsfall verwendet, wird es trotzdem nur einmal heruntergeladen.

Beispiel

Es soll ein Bild bis 600 Pixel breite angezeigt werden, anschließend keins bis 1024 Pixel. Ab dann wird ein anderes, hochauflösendes Bild verwendet.

See the Pen
Hide Image by wesselbaum (@wesselbaum)
on CodePen.