Bilder mit den richtigen Abmessungen bereitstellen

Katie Hempenius
Katie Hempenius

Dieser Fehler ist so gering, dass die Bilder manuell geprüft werden können. Bei den meisten Websites ist es jedoch unerlässlich, dies mit einem Tool wie Lighthouse zu automatisieren.

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien ausgewählt ist.
  5. Klicken Sie auf die Schaltfläche Bericht generieren.
  6. Suchen Sie nach den Ergebnissen der Prüfung Bilder richtig dimensionieren.

Die Prüfung „Bilder richtig dimensionieren“ schlägt in Lighthouse fehl.

Die Lighthouse-Analyse zeigt, dass die Größe der beiden Bilder auf dieser Seite geändert werden muss.

Problem bei flower_logo.png beheben

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

  • Prüfen Sie flower_logo.png im Bereich „Elemente“ der DevTools.

Der Bereich „Elemente“ in den Entwicklertools

Das ist das CSS für flower_logo.png:

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

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

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  2. Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
  3. Geben Sie in der Console Folgendes ein:
convert flower_logo.png -resize 50x50 flower_logo.png

flower_photo.jpg korrigieren

Als Nächstes korrigieren Sie das Foto mit den lila Blüten.

  • Prüfen Sie flower_photo.jpg im Elementbereich der DevTools.

Der Bereich „Elemente“ in den Entwicklertools

Das ist das CSS für flower_photo.jpg:

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

50vw legt die CSS-Breite von flower_photo.jpg auf „die Hälfte der Browserbreite“ fest. (1vw entspricht 1% der Browserbreite.)

Die ideale Größe dieses Bilds hängt vom Gerät ab, auf dem es angezeigt wird. Sie sollten die Größe daher so anpassen, dass sie für die meisten Nutzer geeignet ist. In Ihren Analysedaten sehen Sie, welche Bildschirmauflösungen bei Ihren Nutzern häufig vorkommen:

Google Analytics-Daten zu Bildschirmauflösungen

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

Anhand dieser Informationen können wir berechnen, wie breit das Bild sein sollte: (1.920 Pixel breit) * (50% der Browserbreite) = 960 Pixel

Bei einer Auflösung von mehr als 1.920 Pixeln wird das Bild gestreckt, um den Bereich zu bedecken. Das Bild ist nach der Größenanpassung immer noch ziemlich groß, sodass die Auswirkungen nicht sehr deutlich zu sehen sein sollten.

  • Ändern Sie mit ImageMagick die Größe des Bilds auf 960 Pixel. Geben Sie im Terminaltyp Folgendes ein:
# 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-Leistungsanalyse noch einmal aus, um zu prüfen, ob Sie die Bilder erfolgreich neu skaliert haben.

Lighthouse-Prüfung „Bilder richtig dimensionieren“

… und es funktioniert nicht. Warum?

Lighthouse führt seine Tests auf einem Nexus 5X durch. Nexus 5x hat ein Display mit einer Auflösung von 1.080 x 1.920 Pixeln. Für Nexus 5x ist die optimale Größe von flower_photo.jpg 540 Pixel breit (1.080 Pixel * . 5). Das ist viel kleiner als unser Bild mit angepasster Größe.

Sollten Sie die Größe des Bildes noch weiter verkleinern? Wahrscheinlich. Die Antwort darauf ist jedoch nicht immer eindeutig.

Hier besteht ein Kompromiss zwischen Bildqualität auf Geräten mit hoher Auflösung und Leistung. Es ist leicht, zu überschätzen, wie genau Nutzer Bilder betrachten werden. Daher sollten Sie sie wahrscheinlich kleiner machen. Es gibt jedoch Anwendungsfälle, in denen die Bildqualität wichtiger ist.

Sie können diesen Trade-off jedoch ganz vermeiden, indem Sie responsive Bilder verwenden, um mehrere Bildgrößen bereitzustellen. Weitere Informationen finden Sie im Leitfaden zu responsiven Bildern.