Lighthouse ausführen
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.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien angeklickt ist.
- Klicken Sie auf die Schaltfläche Bericht generieren.
- Suchen Sie nach den Ergebnissen der Prüfung Bilder richtig dimensionieren.
Die Lighthouse-Analyse zeigt, dass die Größe der beiden Bilder auf dieser Seite geändert werden muss.
flower_logo.png
korrigieren
Beginnen Sie oben auf der Seite und korrigieren Sie das Logobild.
- Prüfen Sie
flower_logo.png
im Elementbereich der DevTools.
Das ist das CSS für flower_logo.png
:
.logo {
width: 50px;
height: 50px;
}
Die CSS-Breite dieses Bilds 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.
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
- Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
- 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.
- Sieh dir
flower_photo.jpg
im Elementbereich der Entwicklertools an.
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:
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 Auflösungen über 1.920 Pixeln wird das Bild so gestreckt, dass es den Bereich abdeckt. Das in der Größe angepasste Bild ist immer noch ziemlich groß, sodass die Effekte davon nicht sehr deutlich zu sein dürften.
- Verwenden Sie ImageMagick, um die Größe des Bildes auf 960 Pixel zu ändern. Geben Sie im Terminal 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.
… und es funktioniert nicht. Warum?
Lighthouse führt seine Tests auf einem Nexus 5X durch. Das Display des Nexus 5X hat eine Größe von 1080 x 1920.
Für Nexus 5x hat flower_photo.jpg
die optimale Größe von 540 Pixeln (1.080 Pixel * . 5). Das ist viel kleiner als unser Bild mit angepasster Größe.
Sollten Sie die Größe des Bildes noch kleiner machen? 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. Man kann leicht überschätzen, wie genau Nutzer Bilder prüfen werden. Daher sollten Sie sie wahrscheinlich verkleinern. Es gibt aber auch Anwendungsfälle, bei denen die Bildqualität wichtiger ist.
Die gute Nachricht ist, dass Sie diesen Kompromiss vollständig umgehen können, indem Sie responsive Bilder verwenden, um mehrere Bildgrößen bereitzustellen. Weitere Informationen dazu finden Sie im Leitfaden zu responsiven Bildern.