Das kennen wir alle: Sie haben vergessen, ein Bild vor dem Hinzufügen zu verkleinern. Das Bild sieht in Ordnung aus, verschwendet aber Nutzerdaten und beeinträchtigt die Seitenleistung.
Bilder mit falscher Größe erkennen
Mit Lighthouse lassen sich Bilder mit falscher Größe leicht erkennen. Führen Sie die Leistungsprüfung aus (Lighthouse > Optionen > Leistung) und sehen Sie sich die Ergebnisse der Prüfung Bilder richtig dimensionieren an. In der Prüfung werden alle Images aufgelistet, deren Größe angepasst werden muss.
Die richtige Bildgröße ermitteln
Die Anpassung der Bildgröße kann kompliziert sein. Aus diesem Grund haben wir zwei Ansätze gewählt: die "gute" und die "bessere". Mit beiden Methoden wird die Leistung verbessert, aber der „bessere“ Ansatz kann etwas länger dauern, um zu verstehen und zu implementieren. Sie werden jedoch auch mit größeren Leistungsverbesserungen belohnt. Die beste Wahl für Sie ist diejenige, die Sie ohne Bedenken implementieren können.
Ein kurzer Hinweis zu CSS-Einheiten
Es gibt zwei Arten von CSS-Einheiten, mit denen die Größe von HTML-Elementen (einschließlich Bildern) angegeben werden kann:
- Absolute Einheiten: Elemente, die mit absoluten Einheiten gestaltet sind, werden unabhängig vom Gerät immer in derselben Größe angezeigt. Beispiele für gültige, absolute CSS-Einheiten: px, cm, mm, in.
- Relative Einheiten: Elemente, die mit relativen Einheiten gestaltet sind, werden je nach angegebener relativer Länge in unterschiedlichen Größen angezeigt. Beispiele für gültige, relative CSS-Einheiten: %, vw (1vw = 1% der Breite des Darstellungsbereichs), em (1,5 em = 1,5 × Schriftgröße).
Der „gute“ Ansatz
Für Bilder mit Größenanpassung basierend auf...
- Relative Einheiten: Ändern Sie die Größe des Bildes auf eine Größe, die auf allen Geräten funktioniert.
Es kann hilfreich sein, Ihre Analysedaten (z.B. Google Analytics) zu überprüfen, um zu sehen, welche Anzeigegrößen von Ihren Nutzern häufig verwendet werden. Alternativ liefert screensiz.es Informationen zu den Bildschirmen vieler gängiger Geräte. – Absolute Einheiten: Passen Sie die Größe des Bildes an die Größe an, in der es angezeigt wird.
Im Bereich „Elemente“ der Entwicklertools lässt sich festlegen, in welcher Größe ein Bild angezeigt wird.
Der „bessere“ Ansatz
Bei Bildern mit absoluter und relativer Größe können Sie die Attribute srcset und sizes verwenden, um unterschiedliche Bilder für unterschiedliche Anzeigedichten bereitzustellen.
Weitere Informationen finden Sie im Leitfaden zu responsiven Bildern.
„Anzeigedichte“ bezieht sich darauf, dass verschiedene Displays unterschiedliche Pixeldichten haben. Ansonsten sieht ein Display mit hoher Pixeldichte schärfer aus als ein Display mit niedriger Pixeldichte.
Daher sind mehrere Bildversionen erforderlich, damit Nutzer unabhängig von der Pixeldichte ihres Geräts möglichst gestochen scharfe Bilder sehen können.
Mit responsiven Bildtechniken können Sie mehrere Bildversionen auflisten und das Gerät auswählen, das am besten für es geeignet ist.
Ein Bild, das auf allen Geräten funktioniert, ist auf kleineren Geräten unnötig groß. Mit responsiven Bildtechniken, insbesondere srcset und sizes, können Sie mehrere Bildversionen angeben und die passende Größe vom Gerät auswählen lassen.
Bildgröße anpassen
Unabhängig davon, für welchen Ansatz Sie sich entscheiden, kann es hilfreich sein, die Bildgröße mit ImageMagick zu ändern. ImageMagick ist das gängigste Befehlszeilentool zum Erstellen und Bearbeiten von Bildern. Die meisten Nutzer können die Bildgröße über die Befehlszeile viel schneller anpassen als mit einem GUI-basierten Bildeditor.
So ändern Sie die Größe des Bildes auf 25% der Größe des Originals:
convert flower.jpg -resize 25% flower_small.jpg
Bild auf eine Breite von 200 x 100 Pixel für Höhe skalieren:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Wenn Sie viele Bilder in der Größe anpassen, ist es möglicherweise einfacher, den Prozess mit einem Skript oder Dienst zu automatisieren. Weitere Informationen dazu finden Sie im Leitfaden zu responsiven Bildern.
Layoutverschiebungen durch Angabe von Abmessungen vermeiden
In diesem Leitfaden wird die Bildabmessungen im Kontext der Reduzierung unnötiger heruntergeladener Byte erläutert. Dennoch ist die Reservierung des richtigen Platzes für Bilder im Layout eine weitere wichtige Komponente zur Minimierung des Messwerts Cumulative Layout Shift einer Seite. Achten Sie bei der Bereitstellung von Bildern in HTML darauf, die richtigen width- und height-Attribute zu verwenden, damit der Browser weiß, wie viel Platz im Layout für das Bild zugewiesen werden soll:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Ohne diese Attribute oder die entsprechende CSS-Größe weiß der Browser nicht, wie viel Platz das Bild bis zum Laden einnehmen wird. Dies führt zu Layoutverschiebungen im Dokument, was für Nutzer frustrierend sein kann, wenn Inhalte verschoben werden, nachdem sie mit der Nutzung begonnen haben. Dies kann dazu führen, dass Nutzer beim Lesen den Platz verlieren oder ihr Zieltreffer „verfehlen“ und beim Seitenaufbau auf etwas anderes geklickt wird, das sie eigentlich nicht sehen wollten.
Eine Alternative zur expliziten Angabe von Breite und Höhe ist die Verwendung der CSS-Eigenschaft aspect-ratio für das Bild. Dies hat einen ähnlichen Effekt auf die Größe eines Elements wie die Attribute width und height in dem Sinne, dass der Container ein einheitliches Seitenverhältnis beibehält. Der Unterschied besteht jedoch darin, dass dies dazu führen kann, dass ein anderes Seitenverhältnis als das Bild verwendet wird. Verwenden Sie daher wahrscheinlich die Einstellung object-fit, damit das Bild in dieser expliziten 16/9-Ansicht nicht verzerrt wird:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Bestätigen
Nachdem Sie die Größe aller Bilder angepasst haben, führen Sie Lighthouse noch einmal aus, um sicherzustellen, dass Sie nichts übersehen haben.