Anleitung: Unterschiedliche Bilder für Light- und Dark-Mode mit CSS

Moderne Webseiten bieten oft einen Dark Mode an, um die Augen der Benutzer bei schlechten Lichtverhältnissen zu schonen. Während CSS-Variablen für die Anpassung von Farben ideal sind, erfordern Bilder manchmal eine speziellere Behandlung. Ein für den hellen Modus optimiertes Bild kann im dunklen Modus deplatziert wirken oder schwer zu erkennen sein.

Diese Anleitung zeigt, wie Sie mit dem HTML <picture>-Element und der CSS-Media-Query prefers-color-scheme für jeden Modus eine passende Bildvariante ausliefern können.

Die Lösung: Das <picture>-Element

Das <picture>-Element ermöglicht es, mehrere Bildquellen (<source>) für ein einziges Bild (<img>) zu definieren. Der Browser wählt dann basierend auf den angegebenen Medienbedingungen die am besten geeignete Quelle aus. Das <img>-Element dient als Fallback für Browser, die <picture> nicht unterstützen, und stellt die eigentliche Bildressource dar.

Implementierung

Um unterschiedliche Bilder für den Light- und Dark-Mode anzuzeigen, kombinieren wir <picture> mit der prefers-color-scheme-Media-Query.

Beispiel: Angenommen, wir haben zwei Varianten eines Logos:

• logo-dark.png: Ein helles Logo für den dunklen Modus.
• logo-light.png: Ein dunkles Logo für den hellen Modus (Standard).

<picture>
  <!-- 
    Dieses <source>-Element wird vom Browser ausgewählt,
    wenn der Benutzer den Dark Mode in seinem Betriebssystem oder Browser aktiviert hat.
  -->
  <source srcset="/pfad/zum/logo-dark.png" media="(prefers-color-scheme: dark)">
  
  <!-- 
    Das <img>-Element ist der Standard-Fallback.
    Es wird angezeigt, wenn keine der <source>-Bedingungen zutrifft (z.B. im Light Mode)
    oder wenn der Browser <picture> nicht unterstützt.
    Der 'alt'-Text ist für die Barrierefreiheit unerlässlich.
  -->
  <img src="/pfad/zum/logo-light.png" alt="Beschreibung des Logos">
</picture>

Funktionsweise

1. Der Browser prüft die media-Attribute der <source>-Elemente in der Reihenfolge, in der sie im Code stehen.
2. Das erste <source>-Element, dessen media-Bedingung zutrifft, wird ausgewählt, und das entsprechende Bild aus srcset wird geladen.
3. Wenn keine der media-Bedingungen zutrifft, wird das Bild aus dem src-Attribut des <img>-Elements als Standard verwendet.

Fazit

Die Verwendung des <picture>-Elements in Kombination mit prefers-color-scheme ist eine einfache und semantisch korrekte Methode, um das visuelle Erlebnis im Dark Mode zu optimieren. Dieser Ansatz, bekannt als "Art Direction", stellt sicher, dass Ihre Bilder in jedem Kontext optimal zur Geltung kommen, ohne auf CSS-Hacks oder JavaScript zurückgreifen zu müssen.