Bilder richtig dimensionieren fürs Web
Der häufigste Bildfehler im Web, was er Ihre Besucher kostet und wie Sie ihn in einem einzigen Durchgang beheben.
Messen Sie die maximale Breite, in der das Bild jemals dargestellt wird, verdoppeln Sie diese für Bildschirme mit hoher Pixeldichte und ändern Sie die Größe Ihrer Bibliothek auf diesen Wert. Wenn Sie ein Foto mit 4000 Pixeln in einen Slot mit 800 Pixeln laden, lädt der Browser etwa das 25-Fache an Pixeldaten herunter, als er anzeigen kann, und verwirft den Rest.
Bei einer Mobilfunkverbindung zahlt der Besucher dafür mit Zeit und Datenvolumen. Die richtige Dimensionierung von Bildern ist in der Regel die größte Reduzierung des Seitengewichts, die für eine Website möglich ist, und erfordert nur einen einzigen Durchgang statt eines Redesigns.
Warum zu große Bilder so viel kosten
Die Dateigröße skaliert mit der Pixelanzahl. Eine Halbierung von Breite und Höhe entfernt daher etwa 75 Prozent der Daten. Das Verhältnis ist quadratisch und nicht linear, weshalb die Verschwendung schnell ansteigt.
| Hochgeladene Größe | Angezeigt bei | Verschwendete Pixeldaten | Typische Datei |
|---|---|---|---|
| 4000 x 3000 | 800 x 600 | 96 Prozent | 4,2 MB gegenüber 180 KB |
| 2400 x 1600 | 1200 x 800 | 75 Prozent | 1,1 MB gegenüber 290 KB |
| 1600 x 1200 | 800 x 600 | 75 Prozent | 520 KB gegenüber 140 KB |
| 1200 x 900 | 1200 x 900 | 0 Prozent | 310 KB, korrekt dimensioniert |
Die erste Zeile zeigt den Regelfall auf Websites, bei denen Redakteure Bilder direkt von einer Kamera hochladen. Der Browser lädt 4,2 MB herunter, skaliert sie herunter und zeigt das Äquivalent einer 180 KB großen Datei an.
So messen Sie die tatsächliche Anzeigegröße
Klicken Sie mit der rechten Maustaste auf das Bild auf Ihrer Live-Seite, wählen Sie „Untersuchen“ und lesen Sie die angezeigten Abmessungen anstelle der tatsächlichen ab. Browser melden beide Werte, und die Differenz dazwischen ist die Verschwendung.
Prüfen Sie eher den breitesten Fall als den typischen. Ein Bild in einer Artikelspalte wird auf dem Desktop möglicherweise mit 700 Pixeln und auf dem Smartphone mit 380 Pixeln dargestellt, sodass 700 der entscheidende Wert ist. Testen Sie im breitesten Browserfenster, das Ihre Besucher realistischerweise verwenden, da ein Banner in voller Breite mit dem Viewport wächst und eine andere Berechnung erfordert.
Die Verdoppelungsregel für Bildschirme mit hoher Pixeldichte
Multiplizieren Sie die Anzeigebreite mit 2 und belassen Sie es dabei, da Bildschirme mit noch höherer Dichte keine spürbare Verbesserung mehr bieten. Ein Bild, das mit 700 Pixeln angezeigt wird, sollte mit 1400 Pixeln exportiert werden.
Eine Verdreifachung wird gelegentlich vorgeschlagen, ist aber selten gerechtfertigt. Der Unterschied zwischen der 2-fachen und 3-fachen Dichte ist bei normalem Betrachtungsabstand nicht wahrnehmbar, während die Datei um mehr als die Hälfte anwächst. Eine stärkere Komprimierung bei 2-facher Dichte liefert ein besseres Ergebnis als eine leichte Komprimierung bei 3-facher Dichte, da die zusätzlichen Pixel die Komprimierung kaschieren.
Gängige Anzeigebreiten für die Größenänderung
- Bild im Artikeltext: wird mit ca. 700 px angezeigt, Export mit 1400 px.
- Hero-Bild in voller Breite: wird mit bis zu 1920 px angezeigt, Export mit 1920 px und stärker komprimieren.
- Feature-Bild in halber Breite: wird mit ca. 600 px angezeigt, Export mit 1200 px.
- Vorschaubild im Produktgitter: wird mit ca. 300 px angezeigt, Export mit 600 px.
- Autoren- oder Profilfoto: wird mit ca. 80 px angezeigt, Export mit 160 px.
- Logo im Header: wird mit ca. 180 px angezeigt, Export mit 360 px oder Vektorgrafiken verwenden.
Warum Bilder in voller Breite die Ausnahme sind
Ein Banner in voller Breite hat keine feste Anzeigegröße. Begrenzen Sie es daher auf 1920 Pixel und komprimieren Sie es stärker, anstatt es zu verdoppeln. Die Verdoppelung eines Bildes in voller Breite auf 3840 Pixel führt zu einer Datei, die für keine Seite zu rechtfertigen ist.
Banner werden in der Regel aus der Ferne betrachtet und enthalten weniger feine Details als ein Produktfoto, was bedeutet, dass eine aggressive Komprimierung bei ihnen weniger auffällt. Ein 1920-Pixel-Banner mit einer Qualität von 70 in WebP liegt typischerweise unter 200 KB und sieht auf jedem Bildschirm korrekt aus, während die 3840-Pixel-Version bei 4-fachem Gewicht keinen sichtbaren Vorteil bietet.
So korrigieren Sie eine ganze Bibliothek
Um eine bestehende Website korrekt anzupassen, befolgen Sie diese 6 Schritte.
- Listen Sie die Bild-Slots in Ihrem Design auf, was in der Regel 4 bis 6 verschiedene Größen statt Dutzender sind.
- Messen Sie die Anzeigebreite jedes Slots mit dem Browser-Inspektor auf einer Live-Seite.
- Verdoppeln Sie jede Breite, um Ihre Exportgröße zu erhalten.
- Sortieren Sie die Bibliothek nach Slots in Ordner, da ein Batch-Vorgang eine Größe auf alle darin enthaltenen Dateien anwendet.
- Ändern Sie die Größe jedes Ordners auf seine Zielbreite, komprimieren und konvertieren Sie dann im selben Durchgang.
- Ersetzen Sie die Dateien unter Beibehaltung der gleichen Namen, damit bestehende Seiten weiterhin funktionieren.
Das Sortieren in Ordner ist der Schritt, der dies in einen Batch-Job verwandelt. Die meisten Websites verwenden weit weniger unterschiedliche Bildgrößen, als sie annehmen, und die Gruppierung nach Slots macht die individuelle Bearbeitung von Dateien überflüssig.
Responsive Bilder und das srcset-Attribut
Verwenden Sie srcset, um mehrere Größen anzubieten und den Browser die passende für das jeweilige Gerät auswählen zu lassen. Ein Smartphone lädt dann eine 400-Pixel-Datei herunter, während ein Desktop eine 1400-Pixel-Datei aus demselben Markup herunterlädt.
Erstellen Sie 3 Breiten pro Bild, üblicherweise 400, 800 und 1600 Pixel, und listen Sie diese mit ihren Pixelbreiten auf, damit der Browser wählen kann. Die meisten Content-Systeme erstellen diese beim Upload automatisch. Prüfen Sie daher, was Ihre Plattform bereits tut. Wenn dies der Fall ist, verbessert das Hochladen eines korrekt dimensionierten Originals dennoch jede generierte Variante.
Größe immer vor dem Komprimieren ändern
Wenn Sie zuerst die Größe ändern, muss die Komprimierung weniger Arbeit leisten, sodass die Qualität hoch bleiben kann, während die Datei klein bleibt. Wenn Sie zuerst komprimieren und danach die Größe ändern, gehen Details verloren, die Sie dann erneut verwerfen.
Die Reihenfolge beeinflusst auch das Aussehen des Ergebnisses. Ein in voller Größe komprimiertes Bild enthält Artefakte, die beim Herunterskalieren des Bildes deutlicher sichtbar werden, da die Artefakte mitskalieren. Wenn Sie zuerst die Größe ändern, erhalten Sie eine sauberere Quelle für den Encoder und ein spürbar besseres Ergebnis bei gleicher Dateigröße.
Was dies für die Seitengeschwindigkeit bedeutet
Die richtige Dimensionierung von Bildern reduziert das Bildgewicht auf einer Website, auf der dies noch nie getan wurde, in der Regel um 60 bis 90 Prozent. Die Verbesserung ist größer als jede Formatänderung und meist größer als alle anderen Optimierungen zusammen.
Der Effekt konzentriert sich auf mobile Besucher, bei denen die Verbindungen langsamer sind und Daten Geld kosten. Der Largest Contentful Paint verbessert sich direkt, da dieser Messwert normalerweise von einem einzigen großen Bild bestimmt wird. Das Beheben der Prüfung „Bilder richtig dimensionieren“ in Lighthouse behebt häufig 2 oder 3 verwandte Warnungen gleichzeitig.
Vergrößern Sie niemals ein Bild, damit es passt
Beim Vergrößern werden Pixel hinzugefügt, die die Kamera nie aufgenommen hat, sodass das Ergebnis unscharf wird und die Datei ohne Nutzen anwächst. Das Herunterskalieren ist immer sicher, während das Hochskalieren die eine Operation ist, die zuverlässig schlechter aussieht.
Wenn ein Quellbild kleiner ist als der Slot, den es füllen soll, bestehen die ehrlichen Optionen darin, es in seiner natürlichen Größe zu verwenden, das Layout darum herum anzupassen oder das Bild zu ersetzen. Das Vergrößern eines Fotos von 600 Pixeln auf 1600 Pixel führt zu einer unscharfen Datei mit dem 4-fachen Gewicht des Originals, was sowohl bei der Qualität als auch bei der Geschwindigkeit scheitert.
Eine Seite auf zu große Bilder prüfen
Öffnen Sie die Entwicklertools, wechseln Sie zum Tab „Netzwerk“, filtern Sie nach Bildern und laden Sie die Seite neu. Die Liste zeigt jedes Bild mit seiner übertragenen Größe, sortiert nach der größten Datei.
Jedes einzelne Bild über 500 KB ist eine Untersuchung wert, und jede Seite, auf der die Bilder insgesamt mehr als 2 MB ausmachen, hat ein Problem. Bewegen Sie den Mauszeiger über ein Bild im Bereich „Elemente“, um die tatsächliche und die angezeigte Größe nebeneinander zu sehen. Eine große Lücke zwischen den beiden Zahlen ist die Definition eines falsch dimensionierten Bildes, und das ist in Sekundenschnelle erkennbar.
Größenänderung einer Bibliothek in einem Rutsch
Legen Sie die Zielbreite einmal fest und wenden Sie sie auf jede Datei in einem Ordner an, anstatt die Größe von Bildern einzeln zu ändern. Eine Bibliothek mit mehreren hundert Bildern ist in wenigen Minuten in der Größe angepasst, wenn die Arbeit im Batch-Verfahren durchgeführt wird.
Ziehen Sie bis zu 500 Dateien auf einmal hinein oder ziehen Sie ein ZIP-Archiv direkt hinein und legen Sie Breite, Format und Komprimierungsziel für den gesamten Satz fest. Alles läuft in Ihrem Browser auf Ihrem eigenen Prozessor ab, sodass Kunden-Websites, Staging-Assets und unveröffentlichte Galerien niemals einen Server erreichen. Es wird nichts hochgeladen, was bedeutet, dass eine vollständige Größenänderung der Bibliothek stattfindet, ohne dass eine einzige Datei das Netzwerk durchquert.