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
undsizes
verwendet werden, um das richtige Bild für die Breite des Darstellungsbereichs einzublenden picture
undsource
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ösungenindex.html
ist die Haupt-HTML-Seite für unsere Beispielwebsite/-anwendungstyles/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.
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
- Gulp Responsive Bilder (NPM) – libvips auf dem Mac erforderlich
- Gulp responsive Bilder (GitHub): erfordert auf allen Plattformen Grafikgrafik
- Responsive Bild Haltepunkte Generator 2.0
Weitere Informationen zu srcset undsizes
- Standardgröße und Größen
- Responsive Bilder: Wenn Sie nur die Auflösung ändern möchten, verwenden Sie srcset
Weitere Informationen zur Kunstrichtung
Alle Codelabs im Kurs "PWA-Schulung" finden Sie im Begrüßungs-Codelab.