Telefone laden Ihre Desktop-Bilder herunter

Was tatsächlich passiert

Auf einer Website, die wir diesen Monat geprüft haben, war das Titelbild der Startseite ein WebP mit 1920 mal 1080 Pixeln und 2,6 MB. Auf einem Telefon wird dieses Bild etwa 390 Pixel breit angezeigt. Das Telefon lädt alle 2,6 MB herunter, dekodiert zwei Millionen Pixel und zeichnet dann ungefähr 4 % davon.

Dasselbe Bild, verkleinert auf die 800 Pixel, die ein Telefon mit hoher Pixeldichte tatsächlich nutzt, hat 33 KB. Es ist dasselbe Foto in derselben Qualität auf diesem Bildschirm, mit 98 % weniger Daten. Über eine Mobilfunkverbindung ist das der Unterschied zwischen einer Seite, die sofort erscheint, und einer leeren Fläche für zwei oder drei Sekunden.

Das ist auch, was Ihren Wert für Largest Contentful Paint nach unten zieht. Das Titelbild ist meist das größte Element auf der Seite, also fühlt sich die Seite erst geladen an, wenn das Titelbild da ist, und das Titelbild ist erst da, wenn jedes Byte angekommen ist.

Lassen Sie den Browser wählen

Ein einzelnes kleineres Bild löst das Problem nicht, weil Besucher am Desktop weiterhin das große wollen. Bieten Sie stattdessen mehrere Größen an und lassen Sie jeden Browser wählen. HTML unterstützt das seit Jahren: srcset listet die Kandidaten und ihre Breiten auf, und sizes sagt dem Browser, wie breit das Bild im Layout sein wird, damit er rechnen kann, bevor er irgendetwas herunterlädt.

<img
  src="/img/hero-1200.webp"
  srcset="/img/hero-600.webp 600w,
          /img/hero-900.webp 900w,
          /img/hero-1200.webp 1200w,
          /img/hero-1920.webp 1920w"
  sizes="(max-width: 1020px) 100vw, 60vw"
  width="1920" height="1080"
  alt="Volunteers planting trees along the river trail"
  fetchpriority="high"
/>

Lesen Sie sizes als Zusage über das Layout: Unter 1020 Pixeln füllt das Bild den Viewport, darüber nimmt es 60 % der Breite ein. Der Browser multipliziert mit seiner eigenen Pixeldichte, wählt den kleinsten Kandidaten, der noch scharf ist, und lädt den Rest nie herunter. Die Attribute width und height reservieren den Platz, damit die Seite nicht springt, wenn das Bild ankommt, und genau das misst Cumulative Layout Shift.

Wann Sie das picture-Element brauchen

srcset behandelt ein Bild in mehreren Größen. Das picture-Element löst zwei andere Probleme. Das erste ist die Bildregie: ein breiter Querformat-Ausschnitt am Desktop und ein enger Hochformat-Ausschnitt auf dem Telefon, weil derselbe Bildausschnitt nicht in beiden Formen funktioniert. Das zweite ist der Format-Fallback: AVIF für Browser, die es verstehen, WebP für die übrigen und JPEG als Untergrenze.

<picture>
  <source media="(max-width: 700px)" type="image/avif" srcset="/img/hero-phone.avif" />
  <source media="(max-width: 700px)" type="image/webp" srcset="/img/hero-phone.webp" />
  <source type="image/avif" srcset="/img/hero-1200.avif 1200w, /img/hero-1920.avif 1920w" sizes="60vw" />
  <source type="image/webp" srcset="/img/hero-1200.webp 1200w, /img/hero-1920.webp 1920w" sizes="60vw" />
  <img src="/img/hero-1200.jpg" width="1920" height="1080" alt="Volunteers planting trees along the river trail" />
</picture>

Die meisten Websites brauchen das nicht. Wenn ein Ausschnitt überall funktioniert und Sie WebP ausliefern, ist ein einfaches img mit srcset das richtige Werkzeug, und es ist viel leichter, korrekt zu halten. Greifen Sie zu picture, wenn Sie ein echtes Problem mit der Bildregie haben oder AVIF hinzufügen.

Formate: WebP jetzt, AVIF, wenn Sie können

WebP wird von jedem Browser unterstützt, den Ihre Besucher nutzen, und ist typischerweise 25 bis 35 % kleiner als ein JPEG gleicher sichtbarer Qualität. AVIF ist noch kleiner, aber langsamer zu kodieren, und lohnt sich daher für die Handvoll Bilder, auf die es am meisten ankommt, mit WebP dahinter.

Das Format ersetzt nicht die richtige Größe. Das Titelbild mit 2,6 MB oben war bereits WebP. Das Problem waren seine 1920 Pixel Breite und eine Qualitätseinstellung, die höher war, als irgendjemand sehen kann. Erst die Größe, dann das Format, dann die Qualität.

Priorität und verzögertes Laden

Zwei Attribute erledigen den Rest. Das Titelbild, das eine Bild oberhalb des sichtbaren Bereichs, bekommt fetchpriority="high", damit der Browser es vor den Stylesheets und Skripten abruft, die sich sonst davor einreihen würden. Alles unterhalb des sichtbaren Bereichs bekommt loading="lazy", damit es erst heruntergeladen wird, wenn der Besucher dorthin scrollt.

Der häufige Fehler ist, loading="lazy" auch auf das Titelbild anzuwenden, meist weil ein Plugin es jedem Bild hinzufügt. Wenn das größte sichtbare Element verzögert geladen wird, wird die Seite langsamer, und Lighthouse markiert das.

Wo WordPress hilft und wo Themes es wieder zunichtemachen

WordPress erzeugt seit Version 4.4 mehrere Größen jedes Uploads und schreibt srcset und sizes automatisch in Bild-Tags. Seit 6.1 kann es WebP neben dem Original erzeugen. Bei Bildern, die über den Editor eingefügt werden, ist die Arbeit für Sie erledigt.

Bei Titelbildern geht es schief. Viele Themes und Page Builder (Elementor, WPBakery und andere) geben das Titelbild als CSS-Hintergrundbild aus oder verweisen direkt auf das Original in voller Größe, und keiner dieser Wege trägt ein srcset. Ein Titelbild, das als Hintergrundbild gesetzt ist, kann auf die hier beschriebene Weise überhaupt nicht responsiv sein; es muss ein echtes img werden, oder das Theme braucht eine mobile Variante.

Das andere häufige Leck ist ein Plugin, das Bild-Tags entfernt oder umschreibt, oder ein Theme, das für jedes Vorschaubild die Größe namens full anfordert. Sie können all das auf dieselbe Weise prüfen: Sehen Sie sich den Quelltext der Seite an, suchen Sie das Titelbild und achten Sie auf ein srcset-Attribut. Fehlt es, hat der Browser nichts, aus dem er wählen kann.

Prüfen Sie Ihre eigene Website in einer Minute

Öffnen Sie Ihre Startseite auf einem Telefon oder in einem Desktop-Browser mit eingeschalteter Telefon-Emulation und geöffnetem Netzwerkfenster, gefiltert auf Bilder. Sortieren Sie nach Größe. Wenn der oberste Eintrag über 300 KB liegt, ist das das Bild, das Sie zuerst korrigieren sollten. Das kostenlose Audit auf dieser Website führt dieselbe Prüfung auf Ihrer Startseite durch und nennt Ihnen das größte Bild und die mögliche Einsparung in klaren Worten.

Wenn Sie Kunde sind, ist die Korrektur des Titelbilds einer Vorlage eine kleine Aufgabe im Rahmen der Website-Betreuung. Die gesamte Mediathek neu zu kodieren ist ein Projekt zum Festpreis. So oder so: Stellen Sie eine Anfrage, und wir beginnen mit dem Bild, das am meisten kostet.