Das kennen wir alle: Sie haben vergessen, ein Bild vor dem Hinzufügen zum Seite. Das Bild sieht in Ordnung aus, verschwendet aber die Seite zu Daten und schädlichen Inhalten die Leistung.
Bilder mit falscher Größe erkennen
Mit Lighthouse lassen sich Bilder mit falscher Größe leicht erkennen. Führen Sie den unter „Leistung“ (Lighthouse > Optionen > Leistung) und suchen Sie nach Ergebnisse der Prüfung Bilder richtig dimensionieren. In der Prüfung werden alle Images aufgelistet, muss die Größe angepasst werden.
Die richtige Bildgröße bestimmen
Die Größenanpassung von Bildern kann irreführend sein. Aus diesem Grund haben wir zwei Ansatz: das „gute“ und das Bessere. Beides verbessert die Leistung, „besser“ zu verstehen und umzusetzen. Allerdings werden Sie mit größeren Leistungsverbesserungen belohnt. Die beste Wahl für die Sie selbst implementieren können.
Hinweis zu CSS-Einheiten
Es gibt zwei Arten von CSS-Einheiten, um die Größe von HTML-Elementen anzugeben: einschließlich Bildern:
- Absolute Einheiten: Elemente, die mit absoluten Einheiten gestaltet wurden, sind immer unabhängig vom Gerät 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 wurden, werden bei angezeigt. variieren je nach der angegebenen relativen Länge. Beispiele für gültige, relative CSS-Einheiten: %, vw (1vw = 1% der Breite des Darstellungsbereichs), em (1,5 em = 1,5-fache Schriftgröße).
Das „Gute“ Ansatz
Bilder mit Größenanpassung für...
- Relative Einheiten: Passen Sie die Größe des Bildes an eine Größe an, die auf allen Geräten funktioniert.
Es kann hilfreich sein, Ihre Analysedaten (z.B. Google Analytics), um zu sehen, welche Displaygrößen von Ihren Nutzern am häufigsten verwendet werden. Alternativ kann screensiz.es enthält Informationen zu den Displays vieler gängiger Geräte. - Absolute Einheiten: Passen Sie die Größe des Bildes an die Größe an, in der es angezeigt wird.
Über das Steuerfeld „Elemente“ der Entwicklertools können Sie die Größe eines Bildes bestimmen. angezeigt.
Das „Bessere“ Ansatz
Verwenden Sie für Bilder mit absoluter und relativer Größe srcset.
und sizes
Attribute verwenden, um verschiedene Bilder für verschiedene Kompaktheitsgraden bereitzustellen.
Lesen Sie den Leitfaden zu responsiven Bildern.
Kompaktheitsgrad bezieht sich darauf, dass verschiedene Displays unterschiedliche Pixeldichten. Wenn alle anderen Bedingungen gleich sind, ist eine hohe Pixeldichte sieht schärfer aus als ein Display mit niedriger Pixeldichte.
Daher sind mehrere Image-Versionen erforderlich, gestochen scharfe Bilder unabhängig von der Pixeldichte auf ihrem Gerät.
Mit responsiven Bildern können Sie mehrere Image-Versionen erstellen und das entsprechende Bild für das Gerät auswählen, das Beste dafür.
Ein Bild, das auf allen Geräten funktioniert, ist für kleinere Geräte. Techniken für responsive Bilder, insbesondere srcset und Größen können Sie mehrere Bildversionen angeben und vom jeweiligen Gerät auswählen. die für sie am besten geeignet ist.
Bildgröße anpassen
Unabhängig davon, für welchen Ansatz Sie sich entscheiden, kann es hilfreich sein, ImageMagick, um die Bildgröße anzupassen. ImageMagick ist am beliebtesten, Befehlszeilentool zum Erstellen und Bearbeiten von Bildern. Die Größe von Bildern kann von den meisten Nutzern geändert werden mit der Befehlszeile viel schneller als mit einem GUI-basierten Bildeditor.
Ändern Sie die Größe des Bildes auf 25% der Größe des Originals:
convert flower.jpg -resize 25% flower_small.jpg
Skalieren Sie das Bild so, dass es unter „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 die Größe vieler Bilder ändern, ist es unter Umständen praktischer, ein um den Prozess zu automatisieren. Weitere Informationen hierzu finden Sie in der Leitfaden zu responsiven Bildern.
Layoutverschiebungen durch Angabe von Abmessungen vermeiden
Während in diesem Leitfaden die Bildabmessungen im Kontext der Reduzierung unnötiger Bytes erläutert werden, ist es wichtig zu beachten, dass auch die Reservierung des richtigen Platzes für Bilder im Layout eine weitere wichtige Komponente zur Minimierung des Messwerts Cumulative Layout Shift einer Seite ist. Wenn Sie Bilder in HTML bereitstellen, achten Sie darauf, die richtigen width- und height-Attribute zu verwenden, damit der Browser weiß, wie viel Platz er im Layout für das Bild zuweisen muss:
<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 Speicherplatz das Bild noch benötigt, bis es geladen ist. Dies führt zu Layoutverschiebungen im Dokument, was für Nutzende frustrierend sein kann, wenn Inhalte verschoben werden, nachdem sie mit der Nutzung begonnen haben. Dies kann dazu führen, dass Nutzende beim Lesen ihre Position verlieren oder sie übersehen. das beabsichtigte Trefferziel erreicht und beim Laden der Seite auf etwas anderes klickt.
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, 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. nichts verpassen.