Top-Tipps für die Webleistung

Mit dem Attribut „srcset“ wird automatisch die richtige Bildgröße ausgewählt.

Sam Dutton

Laut HTTP Archive ist eine typische mobile Webseite über 2,6 MB groß.Mehr als zwei Drittel davon entfallen auf Bilder. Das ist eine großartige Gelegenheit zur Optimierung.

Zusammenfassung

• Speichern Sie keine Bilder, die größer als ihre Anzeigegröße sind.
• Speichern Sie mehrere Größen für jedes Bild und verwenden Sie das Attribut srcset, damit der Browser die kleinste Größe auswählen kann. Der Wert w gibt dem Browser die Breite jeder Version an:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Bilder in der richtigen Größe speichern

Wenn Sie Bilder mit Abmessungen verwenden, die der Anzeigegröße entsprechen, können Sie die Ladezeit Ihrer Website verkürzen und den Datenverbrauch verringern. Das heißt, Sie müssen Bildern beim Speichern die richtige Breite und Höhe zuweisen.

Sehen Sie sich die Bilder unten an.

Sie sehen fast identisch aus, aber die Dateigröße der einen ist mehr als zehnmal so groß wie die der anderen.

Das erste Bild ist viel größer, da es mit Abmessungen gespeichert wurde, die viel größer als die Displaygröße sind. Beide Bilder werden mit einer festen Breite von 300 Pixeln angezeigt. Daher ist es sinnvoll, ein Bild in derselben Größe zu verwenden.

Bei festen Breiten sollten Sie Bilder verwenden, die mit denselben Abmessungen wie die Anzeigegröße gespeichert wurden.

Was aber, wenn die Displaygröße variiert?

In einer Welt, in der Nutzer mehrere Geräte verwenden, werden Bilder nicht immer in einer einzigen festen Größe angezeigt.

Bildelemente haben möglicherweise eine prozentuale Breite oder sind Teil von responsiven Layouts, bei denen sich die Anzeigegrößen von Bildern an die Bildschirmgröße anpassen.

…und was ist mit pixelintensiven Geräten wie Retina-Displays?

Browser dabei helfen, die richtige Bildgröße auszuwählen

Wäre es nicht toll, wenn Sie jedes Bild in verschiedenen Größen zur Verfügung stellen und der Browser dann die beste Größe für das Gerät und die Displaygröße auswählen könnte? Leider gibt es ein catch-22, wenn es darum geht, herauszufinden, welches Bild am besten ist. Der Browser sollte das kleinstmögliche Bild verwenden. Er kann die Breite eines Bildes jedoch erst ermitteln, wenn er es heruntergeladen hat.

Hier kommt srcset ins Spiel. Sie speichern Bilder in verschiedenen Größen und geben dann die Breite jeder Version an:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

Die w-Werte geben die Breite der einzelnen Bilder in Pixeln an. Mit small.jpg 500w wird dem Browser beispielsweise mitgeteilt, dass small.jpg 500 Pixel breit ist. So kann der Browser je nach Bildschirmtyp und Viewport-Größe das kleinstmögliche Bild auswählen, ohne Bilder herunterladen zu müssen, um ihre Größe zu prüfen.

srcset in Aktion sehen Sie im Bild unten. Wenn Sie einen Laptop oder Desktopcomputer verwenden, ändern Sie die Größe des Browserfensters und öffnen Sie diese Seite noch einmal. Verwenden Sie dann das Netzwerk-Panel der Browser-Tools, um zu prüfen, welches Bild verwendet wurde. Das müssen Sie in einem Inkognito- oder privaten Fenster tun, da die ursprüngliche Bilddatei sonst im Cache gespeichert wird.

Wie kann ich mehrere Bildgrößen erstellen?

Sie müssen für jedes Bild, das Sie mit srcset verwenden möchten, mehrere Größen zur Verfügung stellen.

Bei einmaligen Bildern wie Hero-Bildern können Sie verschiedene Größen manuell speichern. Wenn Sie viele Bilder haben, z. B. Produktfotos, müssen Sie die Automatisierung nutzen. Dafür gibt es zwei Möglichkeiten.

Bildverarbeitung in den Build-Prozess einbinden

Im Rahmen des Build-Prozesses können Sie Schritte hinzufügen, um Versionen Ihrer Bilder in verschiedenen Größen zu erstellen. Weitere Informationen finden Sie unter „Bilder mit Imagemin komprimieren“.

Bilddienst verwenden

Das Erstellen und Bereitstellen von Bildern kann mit einem kommerziellen Dienst wie Cloudinary oder einem Open-Source-Äquivalent wie Thumbor automatisiert werden, das Sie selbst installieren und ausführen.

Sie laden Ihre hochauflösenden Bilder hoch und der Bilddienst erstellt und liefert automatisch verschiedene Bildformate und ‑größen, je nach URL-Parametern. Öffnen Sie dieses Beispielbild auf Cloudinary und ändern Sie den Wert w oder die Dateiendung in der URL-Leiste.

Bilddienste bieten auch erweiterte Funktionen wie die Möglichkeit, das „Smart Cropping“ für verschiedene Bildgrößen zu automatisieren und WebP-Bilder automatisch an Browser zu senden, die das Format unterstützen, anstatt JPEGs – ohne die Dateiendung zu ändern.

Was passiert, wenn das Bild bei verschiedenen Größen nicht richtig aussieht?

In diesem Fall müssen Sie das <picture>-Element für die „Art Direction“ verwenden, um bei verschiedenen Größen ein anderes Bild oder einen anderen Bildausschnitt bereitzustellen. Weitere Informationen finden Sie im Codelab Art Direction.

Wie sieht es mit der Pixeldichte aus?

High-End-Geräte haben kleinere (dichtere) physische Pixel. Ein hochwertiges Smartphone hat beispielsweise möglicherweise zwei- oder dreimal so viele Pixel in jeder Pixelzeile wie ein günstigeres Gerät.

Das kann sich auf die Größe auswirken, in der Sie Ihre Bilder speichern müssen. Wir gehen hier nicht auf die Details ein, aber im Codelab Dichtebeschreibungen verwenden finden Sie weitere Informationen.

Wie sieht es mit der Anzeigegröße des Bildes aus?

Sie können sizes verwenden, um srcset noch besser zu nutzen.

Andernfalls verwendet der Browser die volle Breite des Darstellungsbereichs, wenn er ein Bild aus einem srcset auswählt. Mit dem Attribut sizes wird dem Browser die Breite mitgeteilt, in der ein Bildelement angezeigt wird. So kann der Browser die kleinste mögliche Bilddatei auswählen, bevor er Layoutberechnungen durchführt.

Im folgenden Beispiel wird mit sizes="50vw" angegeben, dass dieses Bild mit 50% der Breite des Viewports angezeigt wird.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

Ein Beispiel dafür finden Sie unter simpl.info/sizes und im Codelab „Mehrere Slotbreiten angeben“.

Welche Browser werden unterstützt?

srcset und sizes werden von über 90% der Browser weltweit unterstützt.

Wenn ein Browser srcset oder sizes nicht unterstützt, wird nur das Attribut src verwendet.

srcset und sizes sind also hervorragende progressive Verbesserungen.

Weitere Informationen

Weitere Informationen zur Bildoptimierung finden Sie auf web.dev im Abschnitt Bilder optimieren. Wenn Sie eine ausführlichere Anleitung wünschen, können Sie den kostenlosen Udacity-Kurs „Responsive Images“ ausprobieren.