Multimedia: Bilder

Warum sollten Sie Ihre Multimedia-Inhalte optimieren?

Für die durchschnittliche Website stammen 51 % der Bandbreite von Bildern, gefolgt von Videos mit 25 %, daher ist es wichtig, Multimedia-Inhalte anzusprechen und zu optimieren.

Sie sollten den Datenverbrauch berücksichtigen. Viele Menschen haben Begrenzungen bei ihren Datentarifen oder zahlen sogar pro Megabyte. Das ist auch kein Problem nur aufstrebender Märkte. Laut OFCOM Nations & regions technology tracker - H1 2018 (PDF) nutzten 2018 noch 24 % des Vereinigten Königreichs Pay-as-you-go.

Sie sollten auch den Speicher berücksichtigen, da viele mobile Geräte über begrenzten Arbeitsspeicher verfügen. Es ist wichtig zu bedenken, dass Bilder, wenn sie heruntergeladen werden, im Speicher gespeichert werden müssen.

Optimierung der Bildlieferung

Obwohl Bilder die größten Bandbreitenverbraucher sind, ist der Einfluss des Bild-Downloads auf die wahrgenommene Performance weitaus geringer als viele erwarten (hauptsächlich, weil der Textinhalt der Seite sofort heruntergeladen wird und Benutzer die Bilder beim Laden sehen können). Dennoch ist es für eine gute Benutzererfahrung wichtig, dass ein Besucher sie so schnell wie möglich sehen kann.

Lade-Strategie

Eine der größten Verbesserungen für die meisten Websites ist das Lazy-Loading von Bildern unterhalb des sichtbaren Bereichs, anstatt alle beim initialen Laden der Seite herunterzuladen, unabhängig davon, ob ein Besucher sie durch Scrollen anschaut oder nicht. Browser bieten dies nativ über das loading="lazy" Attribut für die <img> <iframe>, <video> und <audio> Elemente. Es gibt auch viele clientseitige JavaScript-Bibliotheken, die dies übernehmen können.

Neben dem Laden eines Teilsets von Bildern sollten Sie sich das Format der Bilder selbst ansehen:

• Verwenden Sie die optimalsten Dateiformate?
• Haben Sie die Bilder gut komprimiert?
• Laden Sie die richtigen Größen?

Das optimalste Format

Das optimale Dateiformat hängt typischerweise vom Charakter des Bildes ab.

Das SVG Format ist besser geeignet für Bilder mit wenigen Farben, die nicht fotorealistisch sind. Dies erfordert, dass die Quelle in einem Vektorformat vorliegt. Sollte ein solches Bild nur als Bitmap existieren, wäre PNG das Fallback-Format der Wahl. Beispiele für diese Art von Motiven sind Logos, Illustrationen, Diagramme oder Icons (Hinweis: SVGs sind viel besser als Icon-Schriftarten!). Beide Formate unterstützen Transparenz.

PNGs können mit drei verschiedenen Ausgabekombinationen gespeichert werden:

• 24-Bit-Farbe + 8-Bit-Transparenz — bieten volle Farbgenauigkeit und glatte Transparenz, allerdings auf Kosten der Größe. Sie möchten diese Kombination wahrscheinlich zugunsten von WebP vermeiden (siehe unten).
• 8-Bit-Farbe + 8-Bit-Transparenz — bieten nicht mehr als 255 Farben, behalten jedoch glatte Transparenzen bei. Die Größe ist nicht zu groß. Das sind die PNGs, die Sie wahrscheinlich möchten.
• 8-Bit-Farbe + 1-Bit-Transparenz — bieten nicht mehr als 255 Farben und nur volle Transparenz pro Pixel, was die Transparenzränder hart und gezackt erscheinen lässt. Die Größe ist klein, jedoch auf Kosten der visuellen Qualität.

Ein gutes Online-Tool zur Optimierung von SVGs ist SVGOMG. Für PNGs gibt es ImageOptim online oder Squoosh.

Bei fotografischen Motiven, die keine Transparenz haben, gibt es eine viel größere Auswahl an Formaten. Wenn Sie auf Nummer sicher gehen möchten, verwenden Sie gut komprimierte Progressive JPEGs. Progressive JPEGs werden im Gegensatz zu normalen JPEGs schrittweise gerendert (daher der Name), was bedeutet, dass der Benutzer eine niedrig aufgelöste Version sieht, die an Klarheit gewinnt, während das Bild heruntergeladen wird, anstatt dass das Bild in voller Auflösung von oben nach unten geladen wird oder nur einmalig angezeigt wird, wenn es vollständig heruntergeladen ist. Ein guter Kompressor hierfür wäre MozJPEG, zum Beispiel verfügbar im Online-Bildoptimierungstool Squoosh. Eine Qualitätseinstellung von 75 % sollte ordentliche Ergebnisse liefern.

Andere Formate verbessern die Fähigkeiten von JPEG hinsichtlich der Komprimierung, sind jedoch nicht in jedem Browser verfügbar:

• WebP — Hervorragende Wahl für sowohl Bilder als auch animierte Bilder. WebP bietet eine viel bessere Komprimierung als PNG oder JPEG mit Unterstützung für höhere Farbtiefen, animierte Frames, Transparenz usw. (aber keine progressive Anzeige). Unterstützt von allen großen Browsern außer Safari 14 auf macOS Desktop Big Sur oder früher.

  Hinweis: Obwohl Apple die Unterstützung für WebP in Safari 14 angekündigt hat, zeigen Safari-Versionen vor 16.0 .webp Bilder nicht erfolgreich auf macOS Desktop-Versionen vor 11/Big Sur. Safari für iOS 14 zeigt .webp Bilder erfolgreich an.

• AVIF — Gute Wahl für sowohl Bilder als auch animierte Bilder aufgrund der hohen Leistung und des lizenzfreien Bildformats (noch effizienter als WebP, aber nicht so weit verbreitet). Es wird jetzt in Chrome, Edge, Opera und Firefox unterstützt. Squoosh ist ein gutes Online-Tool zur Konvertierung vorheriger Bildformate in AVIF.

• JPEG2000 — Sollte ursprünglich der Nachfolger von JPEG werden, wird aber nur in Safari unterstützt. Unterstützt auch keine progressive Anzeige.

Angesichts der begrenzten Unterstützung für JPEG-XR und JPEG2000 und auch der Berücksichtigung von Dekodierungskosten ist der einzige ernsthafte Konkurrent für JPEG WebP. Aus diesem Grund könnten Sie Ihre Bilder auch in diesem Format anbieten. Dies kann über das <picture> Element mit Hilfe eines <source> Elements erfolgen, das mit einem type Attribut ausgestattet ist.

Wenn all dies kompliziert oder nach zu viel Arbeit für Ihr Team klingt, gibt es auch Online-Dienste, die Sie als Bild-CDNs verwenden können, die das Servieren des richtigen Bildformats automatisch für das Gerät oder den Browser, der das Bild anfordert, automatisieren. Beliebte Optionen sind Cloudinary, Image Engine, ImageKit und imgix.

Abschließend, wenn Sie animierte Bilder auf Ihrer Seite einfügen möchten, wissen Sie, dass Safari die Verwendung von Videodateien innerhalb von <img> und <picture> Elementen erlaubt. Diese erlauben es Ihnen auch, ein Animiertes WebP für alle anderen modernen Browser hinzuzufügen.

<picture>
  <source type="video/mp4" src="giphy.mp4" />
  <source type="image/webp" src="giphy.webp" />
  <img src="giphy.gif" alt="A GIF animation" />
</picture>

Die optimale Größe bereitstellen

Bei der Bildlieferung wird die "Eine Größe passt für alle"-Herangehensweise keine besten Ergebnisse liefern, was bedeutet, dass Sie für kleinere Bildschirme Bilder mit kleinerer Auflösung und umgekehrt für größere Bildschirme bereitstellen möchten. Darüber hinaus möchten Sie auch hochauflösende Bilder an diejenigen Geräte ausliefern, die über ein hochauflösendes Display verfügen (z. B. "Retina"). Neben der Erstellung zahlreicher Bildvarianten benötigen Sie auch eine Möglichkeit, die richtige Datei an den richtigen Browser auszuliefern. Dazu müssen Sie Ihre <picture> und <source> Elemente mit media und/oder sizes Attributen aufrüsten. Responsive Bilder richtig gemacht: Ein Leitfaden zu <picture> und srcset erklärt detailliert, wie man all diese Attribute kombiniert.

Zwei interessante Effekte, die bei hochauflösenden Bildschirmen zu beachten sind:

• Bei einem hochauflösenden Bildschirm werden Kompressionsartefakte viel später wahrgenommen, was bedeutet, dass Sie für Bilder, die für diese Bildschirme gedacht sind, die Kompression stärker einstellen können als üblich.
• Nur sehr wenige Menschen können eine Auflösungssteigerung über 2× DPI hinaus erkennen, was bedeutet, dass Sie keine Bilder mit höherer Auflösung als 2× bereitstellen müssen.

Die Kontrolle über die Priorität (und Reihenfolge) des Herunterladens von Bildern

Wichtige Bilder früher vor den Besuchern anzuzeigen als weniger wichtige, kann die wahrgenommene Leistung verbessern.

Das Erste, was Sie überprüfen sollten, ist, dass Ihre Inhaltbilder <img> oder <picture> Elemente verwenden und Ihre Hintergrundbilder in CSS mit background-image definiert sind — Bilder in <img>-Elementen erhalten eine höhere Ladepriorität als Hintergrundbilder.

Zweitens, mit der Einführung von Priority Hints, können Sie die Priorität weiter steuern, indem Sie ein fetchPriority Attribut zu Ihren Bild-Tags hinzufügen. Ein Anwendungsfall für Prioritätenhinweise bei Bildern sind Karussells, bei denen das erste Bild eine höhere Priorität hat als die nachfolgenden Bilder.

Rendering-Strategie: Vermeidung von Ruckeln beim Laden von Bildern

Da Bilder asynchron geladen werden und nach dem ersten Anstrich weitergeladen werden, können sie, wenn ihre Dimensionen nicht vor dem Laden definiert werden, Neuanordnungen des Seiteninhalts verursachen. Zum Beispiel, wenn Text durch geladene Bilder nach unten auf der Seite gedrückt wird. Aus diesem Grund ist es wichtig, width und height Attribute festzulegen, damit der Browser Platz für sie im Layout reservieren kann.

Wenn die width und height Attribute eines Bildes im HTML <img> Element enthalten sind, kann das Seitenverhältnis des Bildes vom Browser berechnet werden, bevor das Bild geladen wird. Dieses Seitenverhältnis wird verwendet, um den benötigten Platz zur Anzeige des Bildes zu reservieren, wodurch das Layout beim Herunterladen und Anzeigen des Bildes nicht verschoben wird oder nur minimal verschoben wird. Die Reduzierung von Layoutverschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Web-Performance.

Browser beginnen mit dem Rendern von Inhalten, sobald HTML analysiert wird, oft bevor alle Ressourcen, einschließlich Bilder, heruntergeladen sind. Das Einfügen von Dimensionen ermöglicht es Browsern, einen korrekt dimensionierten Platzhalterkasten für jedes Bild zu reservieren, wenn die Bilder beim ersten Rendern der Seite geladen werden.

Ohne die width und height Attribute wird kein Platzhalter erstellt, was zu einem bemerkbaren Ruckeln oder Layoutverschiebungen auf der Seite führt, wenn das Bild nach dem Rendern der Seite geladen wird. Seitenumschaltung und Neuanstriche sind Performance- und Usability-Probleme.

Die CLS Metrik misst das Ruckeln beim Laden der Seite oder wie viel sich sichtbarer Inhalt im Viewport verschiebt und um wie viel. Die Hauptverursacher schlechter CLS sind ersetzte Elemente ohne deklarierte Dimensionen, die sich beim Laden der Ressource neu anordnen, einschließlich Bildern, Anzeigen, Einbettungen und iframes ohne Größe oder aspect-ratio und Webfonts.

In responsiven Designs, wenn ein Container schmaler als ein Bild ist, wird allgemein folgendes CSS verwendet, um zu verhindern, dass Bilder aus ihren Containern ausbrechen:

img {
  max-width: 100%;
  height: auto;
}

Obwohl nützlich für responsive Layouts, verursacht dies Ruckeln und schlechte CLS, wenn Breiten- und Höheninformationen nicht enthalten sind, da wenn keine Höheninformationen vorhanden sind, wenn das <img> Element analysiert, aber das Bild noch nicht geladen wurde, dieses CSS effektiv die Höhe auf 0 setzt. Wenn das Bild nach dem ersten Rendern der Seite auf den Bildschirm geladen wird, kommt es zu einer Neuanordnung und zum Neuanstrich der Seite, was zu einer Layoutverschiebung führt, da Platz für die neu bestimmte Höhe geschaffen wird.

Browser haben einen Mechanismus zur Größenanpassung von Bildern, bevor das tatsächliche Bild geladen wird. Wenn ein <img>, <video> oder <input type="button"> Element width und height Attribute festgelegt hat, wird das Seitenverhältnis vor der Ladezeit berechnet und ist dem Browser verfügbar, indem die bereitgestellten Dimensionen verwendet werden.

Das Seitenverhältnis wird dann verwendet, um die Höhe zu berechnen, und die korrekte Größe wird auf das <img> Element angewendet, was bedeutet, dass das oben erwähnte Ruckeln nicht auftritt oder minimal ist, wenn die angegebenen Dimensionen beim Laden des Bildes nicht vollständig akkurat sind.

Das Seitenverhältnis wird nur verwendet, um Platz auf dem Bild zu reservieren. Sobald das Bild geladen ist, wird das innere Seitenverhältnis des geladenen Bildes oder der Wert der aspect-ratio Eigenschaft anstelle des Seitenverhältnisses aus den Attributen verwendet. Dies stellt sicher, dass es im korrekten Seitenverhältnis angezeigt wird, auch wenn die Attributdimensionen nicht genau sind.

Während Entwickler in den letzten zehn Jahren empfohlen haben könnten, die width und height Attribute eines Bildes im HTML <img> zu weglassen, gilt aus der Perspektive des Seitenverhältnisses die Aufnahme dieser beiden Attribute als Best Practice für Entwickler.

Für alle Hintergrundbilder ist es wichtig, dass Sie einen background-color Wert setzen, damit Inhalte darüber weiterhin lesbar sind, bevor das Bild heruntergeladen wurde.

Fazit

In diesem Abschnitt haben wir uns mit Bildoptimierung befasst. Sie haben jetzt ein grundsätzliches Verständnis dafür, wie Sie die Hälfte des durchschnittlichen Bandbreitenverbrauchs einer Website optimieren können. Dies ist nur eine der Arten von Medien, die die Bandbreite der Benutzer beanspruchen und die Ladezeit der Seite verlangsamen. Lassen Sie uns die Videooptimierung betrachten, die sich mit den nächsten 20 % des Bandbreitenverbrauchs befasst.

• Zurück
• Übersicht: Web-Performance
• Weiter