Bilder mit den richtigen Abmessungen bereitstellen

Katja Hempenius
Katie Hempenius
X

Lighthouse ausführen

Dieser Glitch ist so klein, dass seine Bilder von Hand überprüft werden können. Für die meisten Websites ist es jedoch unerlässlich, ein Tool wie Lighthouse zu verwenden, um dies zu automatisieren.

  1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
  5. Klicken Sie auf die Schaltfläche Bericht erstellen.
  6. Sehen Sie sich die Ergebnisse der Prüfung für Bilder mit der richtigen Größe an.

Die Prüfung von Bildern mit der richtigen Größe schlägt in Lighthouse fehl.

Die Lighthouse-Prüfung hat ergeben, dass die Größe beider Bilder dieser Seite angepasst werden muss.

flower_logo.png korrigieren

Beginnen Sie oben auf der Seite und korrigieren Sie das Logobild.

  • Prüfe flower_logo.png im Bereich „Elemente“ der Entwicklertools.

Der Bereich „Elemente“ der Entwicklertools

Dies ist das CSS für flower_logo.png:

.logo {
  width: 50px;
  height: 50px;
}

Die CSS-Breite dieses Bildes beträgt 50 Pixel, daher sollte die Größe von flower_logo.png entsprechend angepasst werden. Mit ImageMagick können Sie die Bildgröße anpassen. ImageMagick ist ein CLI-Tool zur Bildbearbeitung, das in der Codelab-Umgebung vorinstalliert ist.

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  2. Klicken Sie auf Terminal. Wenn die Terminal-Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise die Vollbildoption verwenden.
  3. Geben Sie Folgendes in der Konsole ein:
convert flower_logo.png -resize 50x50 flower_logo.png

Blumenfoto.jpg korrigieren

Als Nächstes korrigieren Sie das Foto der lila Blumen.

  • Prüfe flower_photo.jpg im Bereich „Elemente“ der Entwicklertools.

Der Bereich „Elemente“ der Entwicklertools

Dies ist das CSS für flower_photo.jpg:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

Mit 50vw wird die CSS-Breite von flower_photo.jpg auf „halb der Breite des Browsers“ festgelegt. 1vw entspricht 1% der Breite des Browsers.

Die ideale Größe für dieses Bild hängt vom Gerät ab, auf dem es angezeigt wird. Daher sollten Sie die Größe an die Größe anpassen, die bei den meisten Nutzern gut funktioniert. Sie können Ihre Analysedaten überprüfen, um zu erfahren, welche Bildschirmauflösungen von Ihren Nutzern häufig verwendet werden:

Google Analytics zu Bildschirmauflösungen.

Diese Daten zeigen, dass mehr als 95%der Besucher dieser Website Bildschirmauflösungen von maximal 1.920 Pixeln verwenden.

Mit diesen Informationen können wir berechnen, wie breit das Bild sein soll: (1.920 Pixel breit) × (50% der Browserbreite) = 960 Pixel.

Bei Auflösungen über 1.920 Pixeln wird das Bild so gestreckt, dass es den entsprechenden Bereich abdeckt. Das in der Größe angepasste Bild ist immer noch ziemlich groß, sodass die Auswirkungen nicht sehr merklich sein dürften.

  • Mit ImageMagick können Sie die Größe des Bildes auf eine Breite von 960 Pixeln ändern. Im Terminaltyp:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Lighthouse noch einmal ausführen

  • Führen Sie die Lighthouse-Leistungsprüfung noch einmal aus, um zu prüfen, ob die Größe der Bilder erfolgreich angepasst wurde.

Prüfen Sie die Größe der Bilder in Lighthouse.

... und es scheitert! Why is that?

Lighthouse wird auf einem Nexus 5x getestet. Das Nexus 5X hat ein Display von 1080 x 1920. Für das Nexus 5x wäre die optimale Größe von flower_photo.jpg 540 Pixel breit (1.080 Pixel * . 5). Dieses Bild ist viel kleiner als das vergrößerte Bild.

Sollte die Bildgröße noch kleiner werden? Wahrscheinlich. Die Antwort darauf ist jedoch nicht immer eindeutig.

Dabei müssen Sie zwischen der Bildqualität auf Geräten mit hoher Auflösung und der Leistung Kompromisse eingehen. Es lässt sich leicht überschätzen, wie genau Nutzer Bilder untersuchen werden. Daher sollten Sie sie wahrscheinlich verkleinern. Es gibt jedoch Anwendungsfälle, bei denen die Bildqualität wichtiger ist.

Die gute Nachricht ist, dass Sie diesen Kompromiss ganz umgehen können, wenn Sie responsive Bilder zur Bereitstellung mehrerer Bildgrößen verwenden. Weitere Informationen dazu finden Sie im Leitfaden zu responsiven Bildern.