Diese Seite wurde von der Cloud Translation API übersetzt.

CSS-Hintergrundbilder mit Medienabfragen optimieren

Demián Renzulli

Viele Websites fordern umfangreiche Ressourcen wie Bilder an, die nicht für bestimmte Bildschirme optimiert sind, und senden große CSS-Dateien mit Stilen, die von einigen Geräten nie verwendet werden. Medienabfragen sind eine beliebte Technik, um maßgeschneiderte Stylesheets und Assets an verschiedene Bildschirme zu liefern, um die an Nutzer übertragene Datenmenge zu reduzieren und die Seitenladeleistung zu verbessern. In dieser Anleitung erfahren Sie, wie Sie mit Medienabfragen nur so große Bilder senden, wie sie sein müssen. Diese Methode wird allgemein als responsive Bilder bezeichnet.

Voraussetzungen

In diesem Leitfaden wird davon ausgegangen, dass Sie mit den Chrome-Entwicklertools vertraut sind. Du kannst auch die Entwicklertools eines anderen Browsers verwenden. Dafür musst du nur die Screenshots der Chrome-Entwicklertools in diesem Leitfaden den relevanten Funktionen im Browser deiner Wahl zuordnen.

Responsive Hintergrundbilder

Analysieren Sie zuerst den Netzwerkverkehr der nicht optimierten Demo:

Öffnen Sie die nicht optimierte Demo in einem neuen Chrome-Tab.
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Lade die Seite neu.

Sie sehen, dass nur das Bild background-desktop.jpg mit einer Größe von 1.006 KB angefordert wird:

Netzwerk-Trace der Entwicklertools für das nicht optimierte Hintergrundbild

Wenn Sie die Größe des Browserfensters ändern, werden im Netzwerkprotokoll keine neuen Anfragen von der Seite angezeigt. Das bedeutet, dass für alle Bildschirmgrößen derselbe Bildhintergrund verwendet wird.

Die Stile, mit denen das Hintergrundbild gesteuert wird, finden Sie in style.css:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

Bedeutung der einzelnen Attribute:

background-position: center center: Bild vertikal und horizontal zentrieren.
background-repeat: no-repeat: Das Bild wird nur einmal angezeigt.
background-attachment: fixed: Scrollen Sie nicht durch das Hintergrundbild.
background-size: cover: Die Größe des Bildes wird so angepasst, dass es den gesamten Container abdeckt.
background-image: url(images/background-desktop.jpg): Die URL des Bildes.

Durch die Kombination dieser Stile wird der Browser angewiesen, das Hintergrundbild an verschiedene Bildschirmhöhen und -breiten anzupassen. Dies ist der erste Schritt auf dem Weg zu einem responsiven Hintergrund.

Die Verwendung eines einzigen Hintergrundbilds für alle Bildschirmgrößen unterliegt einigen Einschränkungen:

Unabhängig von der Bildschirmgröße wird die gleiche Anzahl an Byte gesendet, selbst wenn auf einigen Geräten wie Smartphones ein kleinerer und hellerer Bildhintergrund genauso gut aussehen würde. In der Regel sollte ein möglichst kleines Bild gesendet werden, das auf dem Bildschirm des Nutzers noch gut aussieht, um die Leistung zu verbessern und Nutzerdaten zu sparen.
Auf kleineren Geräten wird das Bild so gestreckt oder ausgeschnitten, dass es den gesamten Bildschirm einnimmt. Dadurch werden möglicherweise relevante Teile des Hintergrunds für Nutzer verborgen.

Im nächsten Abschnitt erfahren Sie, wie Sie eine Optimierung anwenden, um je nach Gerät des Nutzers unterschiedliche Hintergrundbilder zu laden.

Medienabfragen verwenden

Medienabfragen sind eine gängige Methode, um Stylesheets zu deklarieren, die nur für bestimmte Medien- oder Gerätetypen gelten. Sie werden mithilfe von @media-Regeln implementiert, mit denen Sie eine Reihe von Haltepunkten definieren können, in denen bestimmte Stile definiert werden. Wenn die in der @media-Regel definierten Bedingungen erfüllt sind (z. B. eine bestimmte Bildschirmbreite), wird die im Haltepunkt definierte Gruppe von Stilen angewendet.

Mit den folgenden Schritten können Sie Medienabfragen auf die Website anwenden, sodass je nach der maximalen Breite des Geräts, das die Seite anfordert, unterschiedliche Bilder verwendet werden.

Entfernen Sie in style.css die Zeile mit der URL des Hintergrundbilds:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

Erstellen Sie als Nächstes einen Haltepunkt für jede Bildschirmbreite, basierend auf den üblichen Abmessungen in Pixeln, die Smartphone-, Tablet- und Desktop-Bildschirme in der Regel haben:

Für Mobilgeräte:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

Für Tablets:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

Für Desktop-Geräte:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

Öffnen Sie die optimierte Version von style.css in Ihrem Browser, um die Änderungen zu sehen.

Messung für unterschiedliche Geräte

Visualisieren Sie als Nächstes die resultierende Website in verschiedenen Bildschirmgrößen und in simulierten Mobilgeräten:

Öffnen Sie die optimierte Website in einem neuen Chrome-Tab.
Verkleinern Sie den Darstellungsbereich (weniger als 480px).
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Lade die Seite neu. Sie sehen, wie das Bild background-mobile.jpg angefordert wurde.
Vergrößern Sie den Darstellungsbereich. Wenn es breiter als 480px ist, sehen Sie, wie background-tablet.jpg angefordert wird. Wenn es breiter als 1025px ist, sehen Sie, wie background-desktop.jpg angefordert wird.

Wenn sich die Breite des Browserbildschirms ändert, werden neue Bilder angefordert.

Besonders wenn die Breite unter dem Wert liegt, der im Haltepunkt für Mobilgeräte (480 Pixel) definiert ist, wird das folgende Netzwerkprotokoll angezeigt:

Netzwerk-Trace der Entwicklertools für das optimierte Hintergrundbild.

Der neue mobile Hintergrund ist 67% kleiner als der Desktop-Hintergrund.

Auswirkungen auf Largest Contentful Paint (LCP)

Elemente mit CSS-Hintergrundbildern kommen für den Largest Contentful Paint (LCP) infrage. CSS-Hintergrundbilder werden jedoch vom Browser-Vorablade-Scanner nicht gefunden. Wenn Sie nicht aufpassen, kann sich der LCP Ihrer Website verzögern.

Als Erstes sollten Sie sich überlegen, ob Ihr LCP-Kandidatenbild für eine responsive Darstellung in einem <img>-Element mit den Attributen srcset und sizes funktionieren könnte. Der Scanner zum Vorabladen erkennt <img>-Elemente und sendet Anfragen für sie, während der Parser das Rendering blockiert.

Wenn Sie ein CSS-Hintergrundbild nicht verwenden können oder möchten, können Sie responsive Bilder vorab laden, damit das richtige Bild für die richtige Größe des Darstellungsbereichs vorab geladen wird. Die <link>-Elemente media, imagesrcset und imagesizes weisen den Browser darauf hin, dass ein bestimmter Ressourcenhinweis nur unter bestimmten Bedingungen für den Darstellungsbereich gilt. So vermeiden Sie mehrfaches Vorabladen, wenn Sie nur die eine Ressource laden möchten, die für den aktuellen Darstellungsbereich geeignet ist.

Zusammenfassung

In diesem Leitfaden haben Sie gelernt, wie Sie mit Medienabfragen Hintergrundbilder anfordern, die auf bestimmte Bildschirmgrößen zugeschnitten sind, und beim Zugriff auf die Website auf kleineren Geräten wie Smartphones Byte sparen. Sie haben die Regel @media verwendet, um einen responsiven Hintergrund zu implementieren. Diese Methode wird von allen Browsern unterstützt. Eine neue CSS-Funktion, image-set(), kann für denselben Zweck mit weniger Codezeilen verwendet werden. Zum Zeitpunkt der Veröffentlichung dieses Artikels wird diese Funktion nicht in allen Browsern unterstützt. Sie können jedoch beobachten, wie sich die Akzeptanz entwickelt, da sie eine interessante Alternative zu dieser Technik darstellen kann.