Zum Inhalt

Ausgeblendete Bilder nicht laden

Gallerie
Photo by Eric Park on Unsplash

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.

2 Kommentare zu “Ausgeblendete Bilder nicht laden

  1. fweber sagt:

    Ich denke loading=”lazy” sollte den selben Effekt haben und funktioniert auch mit normalen img-Tags

    1. mmAleksej Wesselbaum sagt:

      Eine sehr interessante Lösung, falls man wirklich nur ein Bild für alle Auflösungen braucht.
      Ich habe einen Codepen dazu schnell zusammengeschrieben: https://codepen.io/wesselbaum/pen/XWMroam

      Beim Testen sollte man darauf achten, das wenn das Bild einmal geladen worden ist wird es auch im Lazyloading als erneut heruntergeladen angezeigt. Um korrekte Ergebnisse zu erzielen, sollte die Seite mit STRG+SHIFT+r neugeladen werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.