Responsive Bilder

Dieses Codelab ist Teil des Schulungsprogramms „Progressive Web-Apps entwickeln“, die vom Google Developers-Schulungsteam entwickelt wurden. Dieser Kurs eignet sich am besten für Sie, wenn Sie nacheinander die Codelabs durcharbeiten.

Umfassende Informationen zum Kurs finden Sie unter Progressive Web-Apps entwickeln.

Einführung

In diesem Lab erfahren Sie, wie Sie Bilder auf Ihrer Webseite auf allen Geräten ansprechend gestalten.

Lerninhalte

  • Bilder responsiv machen, sodass sie die richtige Größe für mehrere Formfaktoren haben
  • Wie srcset und sizes verwendet werden, um das richtige Bild für die Breite des Darstellungsbereichs einzublenden
  • picture und source in Kombination mit Medienabfragen verwenden, damit die Bilder auf der Seite automatisch angepasst werden, wenn die Größe des Fensters angepasst wird

Wichtige Informationen

  • Grundlegender HTML- und CSS-Code

Voraussetzungen

  • Texteditor
  • Computer mit Terminal-/Shell-Zugriff

Laden Sie das pwa-training-labs-Repository aus GitHub herunter oder klonen Sie es. Installieren Sie gegebenenfalls die LTS-Version von Node.js.

Wenn Sie keinen bevorzugten lokalen Entwicklungsserver haben, installieren Sie das http-server-Paket von Node.js:

npm install http-server -g

Wechseln Sie in das Verzeichnis responsive-images-lab/app/ und starten Sie den Server:

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

Sie können den Server jederzeit mit Ctrl-c beenden.

Öffnen Sie Ihren Browser und rufen Sie localhost:8080/ auf.

Hinweis:Heben Sie die Registrierung von Service Workern auf und löschen Sie alle Caches des Service Worker für localhost, damit sie das Lab nicht beeinträchtigen. In den Chrome-Entwicklertools können Sie das tun, indem Sie auf dem Tab Anwendung im Abschnitt Speicherinhalt löschen auf Websitedaten löschen klicken.

Wenn du einen Texteditor verwendest, mit dem du ein Projekt öffnen kannst, öffne den Ordner responsive-images-lab/app/. Das erleichtert die Organisation. Andernfalls öffnest du den Ordner im Dateisystem deines Computers. In diesem Ordner erstellen Sie das Lab app/.

In diesem Ordner finden Sie Folgendes:

  • images Ordner enthält Beispielbilder mit jeweils mehreren Versionen und unterschiedlichen Auflösungen
  • index.html ist die Haupt-HTML-Seite für unsere Beispielwebsite/-anwendung
  • styles/main.css ist die Kaskade des Stylesheets für die Beispielwebsite

Bevor du Bilder responsiv machst, solltest du dich vergewissern, dass sie nicht über den Bildschirm hinausreichen.

Ersetzen Sie TODO 2 in styles/main.css durch den folgenden Code:

img {
  max-width: 100%;
}

Speichern Sie den Code und aktualisieren Sie die Seite in Ihrem Browser. Ändern Sie die Größe des Fensters. Die Bildbreite sollte vollständig innerhalb des Fensters bleiben.

Erklärung

Der Wert in max-width steht für einen Prozentsatz des entsprechenden Elements, in diesem Fall article.

Hinweis: Sie können max-width auch als Breite des Darstellungsbereichs mit vw-Einheiten angeben, z. B. 100vw. In diesem Fall verwenden wir einen Prozentsatz, um die Breite der Bilder beizubehalten.

Ziel ist es, dass der Browser die Version des Bildes mit der kleinsten Größe abruft, die größer als die endgültige Anzeigegröße des Bildes ist. Mit srcset können Sie eine Reihe von Bildern in verschiedenen Auflösungen auflisten, die vom Browser ausgewählt werden, wenn Sie das Bild abrufen. Die Auswahl des Browsers hängt von den Abmessungen des Darstellungsbereichs, der Bildgröße bezogen auf den Darstellungsbereich, der Pixeldichte des Geräts des Nutzers und der Quelldatei ab.

src-Set einem Bild hinzufügen

Um TODO 3.1 in index.html auszuführen, fügen Sie dem img-Element, das das SFO-Bild enthält, das folgende srcset-Attribut hinzu:

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Öffnen Sie die Entwicklertools des Browsers und sehen Sie sich die Netzwerkanfragen an. Aktualisieren Sie die Seite in verschiedenen Fenstergrößen. Der Browser ruft images/sfo-1600_large.jpg unabhängig von der Fenstergröße ab.

Erklärung

Im Ordner images/ gibt es mehrere Versionen des SFO-Bilds mit jeweils unterschiedlichen Auflösungen. Diese werden im Attribut srcset aufgeführt, damit der Browser die gewünschte Datei auswählen kann. Der Browser kann die Dateigröße vor dem Laden jedoch nicht bestimmen. Daher wählt er immer das erste Bild in der Liste aus.

Breites Schlagwort zum srcset hinzufügen

Um die richtige Bildgröße anhand der Breite des Darstellungsbereichs zu laden, müssen Sie dem Browser mitteilen, wie groß die einzelnen Dateien sind, bevor sie abgerufen werden.

Wenn Sie TODO 3.2 in index.html fertigstellen möchten, fügen Sie dem SFO-Element img eine Beschreibung hinzu:

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Aktualisieren Sie die Seite in verschiedenen Fenstergrößen und prüfen Sie die Netzwerkanfragen, um zu sehen, welche Version des Bildes für die jeweilige Größe abgerufen wird. Auf einem 1x-Display ruft der Browser sfo-500_small.jpg ab, wenn das Fenster schmaler als 500 px ist, sfo-800_medium.jpg, wenn es kleiner als 800 px ist, und so weiter.

Hinweis: Wenn eine größere Version eines Bildes im Cache des Browsers (HTTP) verfügbar ist, wird dieses Bild eventuell von einigen Browsern geladen, auch wenn es nicht das von srcset angegebene Bild ist. Das liegt daran, dass im Browser bereits ein Bild mit höherer Auflösung gespeichert ist. Um das Lab für dieses Lab zu deaktivieren, deaktivieren Sie den HTTP-Cache in den Entwicklertools.

Hinweis:Wenn die Entwicklertools geöffnet sind, sehen Sie in Chrome die Abmessungen des Browserfensters, während sie an die Größe angepasst werden (siehe Abbildung unten). Dieses Feature ist in diesem Codelab sehr nützlich.

Chrome-Abmessungen.png

Erklärung

Wir fügen jeder Datei im srcset einen Deskriptor für die Breite hinzu. Dadurch wird dem Browser die Breite des Bildes in Pixeln mitgeteilt, bevor das Bild abgerufen wird. Der Browser kann dann anhand dieser Breite festlegen, welches Bild abgerufen werden soll. Das Bild wird mit der kleinsten Breite abgerufen, die noch größer als die Breite des Darstellungsbereichs ist.

Hinweis: Sie können auch eine Pixeldichte anstelle einer Breite angeben. Sie können jedoch nicht sowohl Pixeldichte als auch Breite im selben srcset-Attribut angeben. Wie das geht, erfahren Sie in einem späteren Abschnitt.

Bild in der Hälfte der Breite des Darstellungsbereichs anzeigen (50 vw)

Ersetzen Sie TODO 4.1 in styles/main.css durch folgenden Code:

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Aktualisieren Sie die Seite in verschiedenen Fenstergrößen und prüfen Sie die Netzwerkanfragen in jeder Größe. Der Browser ruft Bilder mit derselben Größe wie zuvor ab.

Erklärung

Da das CSS zur Laufzeit nach dem HTML-Code geparst wird, hat der Browser keine Möglichkeit, die endgültige Anzeigegröße des Bildes beim Abrufen zu ermitteln. Sofern nicht anders angegeben, geht der Browser davon aus, dass die Bilder in 100% der Breite des Darstellungsbereichs angezeigt werden, und ruft die Bilder basierend darauf ab. Wir müssen dem Browser vorab mitteilen, ob die Bilder in einer anderen Größe angezeigt werden sollen.

Dem Bild das Attribut „Größen“ hinzufügen

Wir können img ein sizes-Attribut angeben, um dem Browser die Anzeigegröße des Bildes mitzuteilen, bevor es abgerufen wird.

Fügen Sie dem img-Element sizes="50vw" hinzu, damit TODO 4.2 in index.html so aussieht:

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Aktualisieren Sie die Seite in verschiedenen Fenstergrößen und prüfen Sie jedes Mal die Netzwerkanfragen. Sie sollten sehen, dass der Browser für dieselben ungefähren Fenstergrößen, mit denen Sie den vorherigen Schritt getestet haben, ein kleineres Bild abruft.

Erklärung

Der Wert sizes stimmt mit dem max-width-Wert des Bilds im CSS überein. Der Browser verfügt nun über alle notwendigen Funktionen, um die richtige Image-Version auszuwählen. Der Browser kennt die Größe des eigenen Darstellungsbereichs und die Pixeldichte des Geräts des Nutzers. Damit haben wir die Quelldateien (mit dem Breitendeskriptor) und die Bildgrößen bezogen auf den Darstellungsbereich (mit dem Attribut sizes) abgerufen.

Weitere Informationen

Medienabfrage zum Preisvergleichsportal hinzufügen

Mit Medienabfragen können Sie die Größe von Bildern in Echtzeit basierend auf der Breite des Darstellungsbereichs anpassen.

Ersetzen Sie TODO 5.1 in styles/main.css durch folgenden Code:

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Verkleinern Sie das Fenster, sodass es kleiner als 700 Pixel ist. In Chrome werden die Abmessungen des Darstellungsbereichs auf dem Bildschirm angezeigt, wenn Entwicklertools geöffnet ist. Das Bild sollte 90% der Fensterbreite ausgleichen.

Erklärung

Bei der Medienabfrage wird die Breite des Darstellungsbereichs getestet und das CSS angewendet, wenn der Darstellungsbereich weniger als 700 Pixel breit ist.

Weitere Informationen

Medienabfrage dem Größenattribut hinzufügen

Wir können dem Browser über das sizes-Attribut Informationen zur Medienabfrage mitteilen, sodass das richtige Bild abgerufen wird, wenn sich die Bildgröße ändert.

Aktualisieren Sie das Attribut sizes im SFO-Bild, um ToDO 5.2 in index.html abzuschließen:

sizes="(max-width: 700px) 90vw, 50vw"

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Ziehe das Browserfenster an die Breite von 600 Pixel. Auf einem 1x-Display sollte der Browser sfo-800_medium.jpg abrufen.

Sie können die Elemente picture und source zusammen mit Medienabfragen verwenden, um die Bildquelle zu ändern, wenn die Größe des Fensters angepasst wird.

Ersetzen Sie TODO 6 in index.html durch folgenden Code:

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

Speichern Sie den Code und aktualisieren Sie die Seite im Browser. Ändern Sie die Größe des Browserfensters. Normalerweise sollte sich das Bild auf 750 und 500 Pixel ändern.

Erklärung

Mit dem Element picture können wir mehrere Quelldateien mit dem Tag source definieren. Das unterscheidet sich von der Verwendung eines img-Tags mit dem Attribut srcset, weil wir mit dem Quell-Tag beispielsweise Medienquellen hinzufügen können. Anstatt dem Browser die Bildgrößen zu überlassen und zu entscheiden, welche Dateien verwendet werden sollen, können Sie die Bilder für jede Fenstergröße definieren.

Wir haben mehrere Versionen des Beispielbilds mit unterschiedlichen Auflösungen hinzugefügt, die so zugeschnitten sind, dass der Fokus des Bildes in kleineren Größen sichtbar ist. Im obigen Code ruft der Browser bei mehr als 750 px entweder horses-1600_large_2x.jpg (bei Geräten mit 2-fachem Display) oder horses-800_large_1x.jpg ab. Wenn das Fenster kleiner als 750 Pixel, aber größer als 500 Pixel ist, ruft der Browser horses_medium.jpg ab. Bei weniger als 500 Pixeln ruft der Browser das Fallback-Bild horses_small.jpg ab.

Hinweis: Wenn der Browser des Nutzers das Element picture nicht unterstützt, wird der Inhalt des Elements img abgerufen. Das Element picture wird einfach verwendet, um mehrere Quellen für das darin enthaltene img-Element anzugeben. Über das img-Element wird das Bild angezeigt.

Weitere Informationen

Du hast gelernt, wie du Bilder auf deiner Webseite auf allen Geräten optimieren kannst.

Ressourcen

Weitere Informationen zur Automatisierung des Prozesses

Weitere Informationen zu srcset undsizes

Weitere Informationen zur Kunstrichtung

Alle Codelabs im Kurs "PWA-Schulung" finden Sie im Begrüßungs-Codelab.