Bilder mit den richtigen Abmessungen bereitstellen

Katie Hempenius
Katie Hempenius

Das ist uns allen schon einmal passiert: Sie haben vergessen, ein Bild zu verkleinern, bevor Sie es der Seite hinzugefügt haben. Das Bild sieht in Ordnung aus, verschwendet aber die Daten der Nutzer und beeinträchtigt die Seitenleistung.

Bilder mit falscher Größe erkennen

Lighthouse macht es einfach, Bilder mit falscher Größe zu identifizieren. Führen Sie die Leistungsanalyse durch (Lighthouse > Optionen > Leistung) und sehen Sie sich die Ergebnisse der Prüfung Bilder auf die richtige Größe zuschneiden an. In der Prüfung werden alle Bilder aufgeführt, deren Größe angepasst werden muss.

Richtige Bildgröße ermitteln

Die Bildgröße kann täuschend kompliziert sein. Aus diesem Grund haben wir zwei Ansätze entwickelt: „gut“ und „besser“. Mit beiden Methoden wird die Leistung verbessert, aber das Verständnis und die Implementierung des „besseren“ Ansatzes kann etwas länger dauern. Sie profitieren jedoch auch von größeren Leistungsverbesserungen. Die beste Wahl ist die, die Sie sich zutrauen.

Kurzer Hinweis zu CSS-Einheiten

Es gibt zwei Arten von CSS-Einheiten zur Angabe der Größe von HTML-Elementen, einschließlich Bildern:

  • 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 in unterschiedlichen Größen angezeigt, je nach angegebener relativer Länge. 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“

Bilder mit Größenanpassung für...

  • Relative Einheiten: Die Größe des Bilds wird so angepasst, dass es auf allen Geräten funktioniert.

Es kann hilfreich sein, Ihre Analysedaten (z. B. aus Google Analytics) zu prüfen, um herauszufinden, welche Bildschirmgrößen von Ihren Nutzern häufig verwendet werden. Alternativ bietet screensiz.es Informationen zu den Displays vieler gängiger Geräte. – Absolute Einheiten: Die Größe des Bildes wird an die Größe angepasst, in der es angezeigt wird.

Über das Steuerfeld „Elemente“ der Entwicklertools können Sie festlegen, in welcher Größe ein Bild angezeigt wird.

Bereich „Element“ in den Entwicklertools

Der „bessere“ Ansatz

Verwenden Sie für Bilder mit absoluter und relativer Größe die Attribute srcset und sizes, um unterschiedliche Bilder für unterschiedliche Displaydichten bereitzustellen. Lesen Sie den Leitfaden zu responsiven Bildern.

„Displaydichte“ bezieht sich darauf, dass verschiedene Displays unterschiedliche Pixeldichten haben. Wenn alles andere gleich ist, 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 die schärfsten Bilder sehen können.

Mit responsiven Bildtechniken können Sie mehrere Bildversionen auflisten und das Gerät kann das für sich am besten geeignete Bild auswählen.

Ein Bild, das auf allen Geräten funktioniert, ist für kleinere Geräte unnötig groß. Mit responsiven Bildtechniken, insbesondere srcset und sizes, können Sie mehrere Bildversionen angeben und vom Gerät die passende Größe auswählen lassen.

Bildgröße anpassen

Unabhängig von der gewählten Methode kann es hilfreich sein, die Größe Ihrer Bilder mit ImageMagick zu ändern. ImageMagick ist das beliebteste Befehlszeilentool zum Erstellen und Bearbeiten von Bildern. Die meisten Nutzer können die Größe von Bildern bei Verwendung der Befehlszeile viel schneller ändern als mit einem GUI-basierten Bildeditor.

Größe des Bilds auf 25 % der Größe des Originals ändern:

convert flower.jpg -resize 25% flower_small.jpg

Bild so skalieren, dass es in „200 Pixel breit und 100 Pixel 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 in der Größe ändern möchten, ist es möglicherweise einfacher, einen Script oder Dienst zu verwenden, um den Vorgang zu automatisieren. Weitere Informationen dazu finden Sie im Leitfaden zu responsiven Bildern.

Layoutverschiebungen durch Angabe von Abmessungen vermeiden

In diesem Leitfaden werden die Bildabmessungen im Zusammenhang mit der Reduzierung der Anzahl der heruntergeladenen unnötigen Bytes behandelt. Es ist jedoch wichtig zu beachten, dass die Reservierung des richtigen Platzes für Bilder im Layout ein weiterer wichtiger Bestandteil zur Minimierung des Messwerts Cumulative Layout Shift einer Seite ist. Wenn Sie Bilder in HTML bereitstellen, müssen Sie die richtigen width- und height-Attribute 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 erst nach dem Laden, wie viel Platz das Bild einnimmt. Das führt zu Layoutverschiebungen im Dokument, was für Nutzer frustrierend sein kann, wenn sich Inhalte bewegen, nachdem sie damit begonnen haben, sie zu lesen. Dies kann dazu führen, dass Nutzer beim Lesen ihre Position verlieren oder ihr gewünschtes Trefferziel „übersehen“ und letztendlich beim Laden der Seite auf etwas anderes klicken, das sie nicht 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 eine ähnliche Wirkung auf die Größe eines Elements wie die Attribute width und height, da der Container ein einheitliches Seitenverhältnis beibehält. Allerdings wird dadurch möglicherweise ein anderes Seitenverhältnis verwendet als das Bild, in dem das Bild bereitgestellt wird. Deshalb sollten Sie die Einstellung object-fit verwenden, 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.