Wer kennt das nicht: Sie haben vergessen, ein Bild zu verkleinern, bevor Sie es der Seite hinzugefügt haben. Das Bild sieht gut aus, aber es verschwendet die Daten der Nutzer und beeinträchtigt die Seitenleistung.
Falsch dimensionierte Bilder identifizieren
Mit Lighthouse können Sie falsch dimensionierte Bilder ganz einfach identifizieren. Führen Sie den Leistungs-Audit aus (Lighthouse > Optionen > Leistung) und suchen Sie nach den Ergebnissen des Audits Bilder richtig dimensionieren. Im Audit werden alle Bilder aufgeführt, die verkleinert werden müssen.
Die richtige Bildgröße bestimmen
Die Bildgröße kann trügerisch kompliziert sein. Aus diesem Grund haben wir zwei Ansätze bereitgestellt: „Gut“ und „Besser“. Beide verbessern die Leistung, aber der Ansatz „Besser“ ist möglicherweise etwas schwieriger zu verstehen und zu implementieren. Er führt aber auch zu größeren Leistungsverbesserungen. Die beste Wahl für Sie ist der Ansatz, den Sie am einfachsten implementieren können.
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 formatiert 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 formatiert sind, werden je nach angegebener relativer Länge in unterschiedlichen Größen angezeigt. Beispiele für gültige relative CSS-Einheiten: %, vw (1 vw = 1% der Breite des Darstellungsbereichs), em (1,5 em = 1,5-fache Schriftgröße).
Der Ansatz „Gut“
Für Bilder mit Größenanpassung basierend auf…
- Relative Einheiten: Verkleinern Sie das Bild auf eine Größe, die auf allen Geräten funktioniert.
Möglicherweise ist es hilfreich, Ihre Analysedaten (z.B. Google Analytics) zu prüfen, um zu sehen, welche Anzeigegrößen von Ihren Nutzern häufig verwendet werden. Alternativ finden Sie auf screensiz.es Informationen zu den Displays vieler gängiger Geräte. - Absolute Einheiten: Verkleinern Sie das Bild auf die Größe, in der es angezeigt wird.
Im Bereich „Elemente“ der Entwicklertools können Sie festlegen, in welcher Größe ein Bild angezeigt wird.
Der Ansatz „Besser“
Verwenden Sie für Bilder mit absoluter und relativer Größenanpassung die Attribute srcset
und sizes, um Bilder mit unterschiedlichen Anzeigedichten bereitzustellen.
Lesen Sie den Leitfaden zu responsiven Bildern.
Die „Anzeigedichte“ bezieht sich auf die Tatsache, dass verschiedene Displays unterschiedliche Pixeldichten haben. Unter sonst gleichen Bedingungen sieht ein Display mit hoher Pixeldichte schärfer aus als ein Display mit niedriger Pixeldichte.
Daher sind mehrere Bildversionen erforderlich, wenn Sie möchten, dass Nutzer unabhängig von der Pixeldichte ihres Geräts die schärfsten Bilder sehen.
Mit responsiven Bildtechniken ist dies möglich, da Sie mehrere Bildversionen auflisten können und das Gerät das Bild auswählen kann, das am besten für es geeignet ist.
Ein Bild, das auf allen Geräten funktioniert, ist für kleinere Geräte unnötig groß. Mit responsiven Bildtechniken, insbesondere mit srcset und sizes, können Sie mehrere Bildversionen angeben und das Gerät kann die Größe auswählen, die am besten für es geeignet ist.
Bilder verkleinern
Unabhängig vom gewählten Ansatz kann es hilfreich sein, ImageMagick zu verwenden, um Ihre Bilder zu verkleinern. ImageMagick ist das beliebteste Befehlszeilentool zum Erstellen und Bearbeiten von Bildern. Die meisten Nutzer können Bilder mit der Befehlszeile viel schneller in der Größe anpassen als mit einem GUI-basierten Bildbearbeitungsprogramm.
Bild auf 25% der Größe des Originals verkleinern:
convert flower.jpg -resize 25% flower_small.jpg
Bild so skalieren, dass es in den Bereich „200 px breit und 100 px hoch“ passt:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Wenn Sie viele Bilder verkleinern müssen, ist es möglicherweise einfacher, ein Skript oder einen Dienst zu verwenden, um den Vorgang zu automatisieren. Weitere Informationen finden Sie im Leitfaden zu responsiven Bildern.
Layoutverschiebungen vermeiden, indem Sie Abmessungen angeben
In diesem Leitfaden werden Bildabmessungen im Zusammenhang mit der Reduzierung der Anzahl unnötiger heruntergeladener Byte behandelt. Es ist jedoch wichtig zu beachten, dass das Reservieren des richtigen Platzes für Bilder im Layout eine weitere entscheidende Komponente zur Minimierung des kumulativen Layoutshifts einer Seite ist. Wenn Sie Bilder in HTML bereitstellen, verwenden Sie die richtigen Attribute width und height, damit der Browser weiß, wie viel Platz im Layout für das Bild reserviert werden muss:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Ohne diese Attribute oder die entsprechende CSS-Größenanpassung weiß der Browser erst nach dem Laden des Bildes, wie viel Platz es einnimmt. Dies führt zu Layoutverschiebungen im Dokument, was für Nutzer frustrierend sein kann, wenn sich Inhalte verschieben, nachdem sie mit der Nutzung begonnen haben. Das kann dazu führen, dass Nutzer beim Lesen die Position verlieren oder das gewünschte Ziel verfehlen und beim Seitenaufbau auf etwas anderes klicken, was sie nicht beabsichtigt haben.
Eine Alternative zur expliziten Angabe von Breite und Höhe ist die Verwendung der CSS aspect-ratio Eigenschaft für das Bild. Dies hat eine ähnliche Auswirkung auf die Größe eines Elements wie die Attribute width und height, da das Seitenverhältnis des Containers konstant bleibt. Es kann jedoch ein anderes Seitenverhältnis verwendet werden als das, in dem das Bild bereitgestellt wird. Daher sollten Sie wahrscheinlich die Einstellung object-fit verwenden, um sicherzustellen, dass 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 alle Bilder verkleinert haben, führen Sie Lighthouse noch einmal aus, um zu prüfen, ob Sie nichts vergessen haben.