Ein modernes Smartphone erzeugt problemlos Fotos mit mehreren tausend Pixeln Breite und Dateigrößen von mehreren Megabyte. Für die private Fotosammlung ist das hervorragend. Für eine Website ist dasselbe Original häufig unnötig groß.
Ein Bild, das auf einer Artikelseite maximal 1.200 Pixel breit dargestellt wird, muss normalerweise nicht mit 6.000 Pixeln Breite an jeden Besucher übertragen werden. Der Browser kann es zwar verkleinert anzeigen. Die zu große Datei musste dann aber trotzdem vollständig geladen werden.
Genau hier beginnt Bildoptimierung.
Es geht nicht darum, Bilder so stark zu komprimieren, dass sie sichtbar schlecht aussehen. Es geht darum, nicht mehr Bilddaten zu übertragen, als für die jeweilige Darstellung sinnvoll sind.
Das Zusammenspiel aus passenden Abmessungen, geeignetem Dateiformat, sinnvoller Kompression und responsiver Auslieferung kann die Datenmenge einer Website drastisch reduzieren, ohne dass Besucher einen sichtbaren Qualitätsverlust wahrnehmen.
Warum Bilder Websites so stark beeinflussen
HTML-Dateien sind häufig relativ klein.
Auch CSS und JavaScript können bei vernünftig aufgebauten Websites überschaubar bleiben.
Bilder sind dagegen schnell mehrere hundert Kilobyte oder sogar mehrere Megabyte groß.
Eine einzige Seite könnte beispielsweise enthalten:
HTML 60 KB
CSS 120 KB
JavaScript 300 KB
Schriftarten 180 KB
Bilder 4.800 KBIn diesem vereinfachten Beispiel machen die Bilder den mit Abstand größten Teil der übertragenen Daten aus.
Dann würde es wenig bringen, stundenlang 20 Kilobyte JavaScript einzusparen, während gleichzeitig ein einziges Titelbild zwei Megabyte wiegt.
Deshalb gehören Bilder bei vielen Websites zu den ersten Dingen, die man bei einer Performanceanalyse prüfen sollte.
Pixelgröße und Dateigröße sind nicht dasselbe
Bei Bildern werden zwei Größen gerne miteinander verwechselt.
Die Abmessungen geben an, aus wie vielen Pixeln ein Bild besteht.
Zum Beispiel:
6000 × 4000 Pixel
Die Dateigröße gibt an, wie viel Speicher die Datei benötigt.
Zum Beispiel:
5,8 MB
Ein Bild kann viele Pixel besitzen und trotzdem relativ klein komprimiert sein.
Ein anderes Bild mit geringerer Auflösung kann durch ungeeignete Speicherung überraschend groß sein.
Für Websites müssen deshalb beide Größen betrachtet werden.
Ein Bild sollte zur tatsächlichen Darstellung passen
Angenommen, ein Artikelbild wird auf einem Desktop maximal 1.200 Pixel breit dargestellt.
Das hochgeladene Original besitzt:
6000 × 4000 Pixel
Der Browser zeigt es trotzdem nur mit 1.200 Pixeln Breite.
Die zusätzlichen Pixel liefern dem Besucher in dieser Situation kaum sichtbaren Nutzen.
Sie erzeugen aber mehr:
Speicherbedarf,
Datenübertragung,
Dekodierungsarbeit
und möglicherweise längere Ladezeiten.
Eine sinnvolle Bildvorbereitung beginnt daher mit der Frage:
Wie groß kann dieses Bild auf der Website tatsächlich dargestellt werden?
Größer als der sichtbare Bereich kann trotzdem sinnvoll sein
Ganz exakt auf die CSS-Darstellungsgröße herunterzurechnen wäre allerdings ebenfalls zu einfach.
Moderne Displays besitzen unterschiedliche Pixeldichten.
Ein Bild, das auf der Seite optisch 800 CSS-Pixel breit erscheint, kann auf einem hochauflösenden Display von einer größeren Datei profitieren.
Deshalb ist es sinnvoll, mehrere Bildgrößen bereitzustellen.
Der Browser kann dann selbst eine passende Variante auswählen.
Genau dafür gibt es responsive Images.
Was sind responsive Bilder?
Responsive Bilder ermöglichen es, unterschiedliche Versionen desselben Motivs für verschiedene Geräte bereitzustellen.
Beispielsweise:
klein → 480 Pixel
mittel → 800 Pixel
groß → 1200 Pixel
sehr groß → 1800 PixelEin Smartphone muss dann möglicherweise nur die 480- oder 800-Pixel-Version laden.
Ein großer Desktop erhält eine größere Variante.
Dadurch muss nicht jeder Besucher dieselbe riesige Bilddatei herunterladen.
Was macht srcset?
HTML bietet mit srcset einen Mechanismus, über den mehrere Bildvarianten angeboten werden können.
Vereinfacht könnte das Prinzip so aussehen:
<img
src="bild-800.jpg"
srcset="
bild-480.jpg 480w,
bild-800.jpg 800w,
bild-1200.jpg 1200w,
bild-1800.jpg 1800w
"
alt="Beispielbild"
>Der Browser kann anhand seiner eigenen Bedingungen entscheiden, welche Variante sinnvoll ist.
Dabei spielen unter anderem Bildschirmgröße, Pixeldichte und Layout eine Rolle.
Der Website-Betreiber muss also nicht für jedes einzelne Gerät eine separate Seite bauen.
WordPress unterstützt responsive Bilder bereits
WordPress erzeugt beim Hochladen vieler Bilder automatisch verschiedene Bildgrößen.
Diese können anschließend für responsive Auslieferung verwendet werden.
Das ist praktisch, bedeutet aber nicht automatisch, dass jedes hochgeladene Original optimal vorbereitet ist.
Wenn jemand ein 15-Megabyte-Foto hochlädt, muss WordPress dieses zunächst verarbeiten.
Außerdem bleibt das Original je nach Konfiguration weiterhin auf dem Server gespeichert.
Eine sinnvolle Vorbereitung vor oder während des Uploads bleibt deshalb hilfreich.
Welche Bildbreite ist richtig?
Darauf gibt es keine universelle Antwort.
Ein kleines Vorschaubild braucht andere Abmessungen als ein großflächiges Titelbild.
Eine typische Inhaltsbreite könnte beispielsweise 800 bis 1.200 Pixel betragen.
Ein Hero-Bild über die gesamte Bildschirmbreite kann deutlich größer benötigt werden.
Ein kleines Autorenfoto dagegen vielleicht nur wenige hundert Pixel.
Die richtige Größe ergibt sich aus dem Layout.
Deshalb sollte nicht die Frage lauten:
Welche Bildgröße soll ich immer verwenden?
Sondern:
Wie groß kann dieses Bild in diesem konkreten Layout tatsächlich erscheinen?
Originalbilder sollten nicht blind hochgeladen werden
Ein häufiger Workflow sieht so aus:
Foto mit Smartphone machen.
Direkt in WordPress hochladen.
Fertig.
Das funktioniert technisch.
Es kann aber unnötige Datenmengen erzeugen.
Gerade bei redaktionellen Websites mit hunderten oder tausenden Bildern summiert sich das.
Wenn jedes Original durchschnittlich fünf Megabyte benötigt und 2.000 Bilder vorhanden sind, entstehen allein dadurch rund zehn Gigabyte Originaldaten.
Dazu kommen verschiedene automatisch erzeugte Größen.
Das belastet Speicher, Backups und Migrationen.
Bildoptimierung spart deshalb mehr als Ladezeit
Kleinere Bilddateien reduzieren nicht nur den Datentransfer zum Besucher.
Sie können auch reduzieren:
Hosting-Speicher,
Backup-Größe,
Backup-Zeit,
Übertragungsdauer bei Migrationen,
CDN-Speicher,
Verarbeitungsaufwand.
Bei einer Website mit wenigen Bildern fällt das kaum auf.
Bei großen Medienarchiven wird es erheblich.
JPEG eignet sich hervorragend für viele Fotos
JPEG beziehungsweise JPG gehört seit Jahrzehnten zu den wichtigsten Bildformaten im Web.
Es eignet sich insbesondere gut für Fotos und andere Motive mit vielen Farben und weichen Übergängen.
JPEG verwendet verlustbehaftete Kompression.
Das bedeutet, dass Bildinformationen entfernt werden, um die Datei kleiner zu machen.
Entscheidend ist der Kompressionsgrad.
Bei vernünftiger Einstellung kann die Dateigröße stark sinken, während der sichtbare Unterschied gering bleibt.
Maximale JPEG-Qualität ist selten notwendig
Viele Programme besitzen Qualitätseinstellungen von beispielsweise 0 bis 100.
Die intuitive Reaktion lautet:
Natürlich nehme ich 100. Ich möchte gute Bilder.
Das ist für Webbilder häufig unnötig.
Die Dateigröße kann zwischen sehr hoher und etwas niedrigerer Qualitätsstufe massiv sinken, obwohl der Unterschied bei normaler Darstellung kaum auffällt.
Eine Website benötigt selten dieselben Anforderungen wie eine Druckvorlage.
Das Ziel ist deshalb nicht mathematisch maximale Qualität.
Das Ziel ist die beste sichtbare Qualität bei angemessener Dateigröße.
PNG erfüllt andere Aufgaben
PNG kann Bilder verlustfrei komprimieren und unterstützt Transparenz.
Das macht es beispielsweise interessant für bestimmte:
Grafiken,
Logos,
Screenshots,
Illustrationen
und Bilder mit transparentem Hintergrund.
Für große fotografische Motive kann PNG jedoch sehr große Dateien erzeugen.
Ein Smartphonefoto als PNG zu speichern wäre deshalb für eine Website meist keine gute Idee.
Das Format sollte zum Inhalt passen.
Transparenz allein ist kein Grund für riesige Dateien
Früher war PNG für viele transparente Webgrafiken praktisch alternativlos.
Heute stehen weitere moderne Formate zur Verfügung, die ebenfalls Transparenz unterstützen können.
Deshalb lohnt es sich auch bei Logos oder freigestellten Bildern zu prüfen, ob ein moderneres Format eine deutlich kleinere Datei ermöglicht.
Trotzdem bleibt PNG nützlich, insbesondere wenn verlustfreie Darstellung oder bestimmte Workflows erforderlich sind.
Was ist WebP?
WebP ist ein Bildformat, das speziell für effiziente digitale Bildauslieferung entwickelt wurde.
Es kann sowohl verlustbehaftete als auch verlustfreie Kompression verwenden und unterstützt unter anderem Transparenz.
Bei vielen Motiven lassen sich damit kleinere Dateien erzeugen als mit klassischen JPEG- oder PNG-Varianten bei vergleichbarer wahrgenommener Qualität.
Deshalb wird WebP heute von vielen Website-Systemen, Bildoptimierungsdiensten und Content-Management-Systemen eingesetzt.
Für Website-Betreiber bedeutet das vor allem:
WebP ist häufig eine sehr praktische Standardoption für moderne Webbilder.
Was ist AVIF?
AVIF ist ein weiteres modernes Bildformat mit sehr effizienter Kompression.
Insbesondere bei fotografischen Motiven kann es sehr kleine Dateien bei guter sichtbarer Qualität ermöglichen.
Je nach Motiv und Einstellungen kann AVIF gegenüber älteren Formaten deutliche Einsparungen bringen.
Die effizienteste Datei ist aber nicht automatisch immer die beste Wahl.
Auch Faktoren wie:
Kodieraufwand,
Bildbearbeitungs-Workflow,
Kompatibilität der eingesetzten Systeme,
Qualität bei bestimmten Motiven
spielen eine Rolle.
Für viele Websites ist eine automatische Formatwahl deshalb praktischer als der Versuch, jedes Bild manuell in einem einzigen Format zu verwalten.
Ist AVIF immer besser als WebP?
Nein.
Bildkompression hängt stark vom Motiv ab.
Ein Foto mit feinen Strukturen verhält sich anders als eine flächige Illustration.
Auch die gewählten Qualitätseinstellungen beeinflussen das Ergebnis.
Bei manchen Dateien bringt AVIF deutliche Vorteile.
Bei anderen ist der Unterschied klein.
WebP kann wiederum schneller erzeugt werden oder besser in einen bestehenden Workflow passen.
Statt eine Formatreligion daraus zu machen, sollte man vergleichen:
Welche Variante liefert für dieses Motiv eine gute sichtbare Qualität bei sinnvoller Dateigröße?
Das kleinste Bild ist nicht automatisch das beste
Man könnte jede Datei immer weiter komprimieren.
Irgendwann entstehen sichtbare Artefakte.
Details verschwinden.
Farbverläufe werden unsauber.
Kanten wirken matschig.
Dann wurde zwar eine hervorragende Dateigröße erreicht, aber das Bild erfüllt seinen Zweck schlechter.
Bildoptimierung ist deshalb ein Kompromiss.
So klein wie sinnvoll – nicht so klein wie technisch möglich.
Unterschiedliche Bilder vertragen unterschiedliche Kompression
Ein unscharfer Hintergrund mit wenigen Details lässt sich häufig sehr stark komprimieren.
Ein Produktfoto mit feinen Strukturen benötigt möglicherweise mehr Qualität.
Ein Screenshot mit kleiner Schrift kann durch verlustbehaftete Kompression schnell schlecht lesbar werden.
Deshalb funktionieren starre Regeln wie:
Alle Bilder immer mit Qualität 60 speichern.
nur begrenzt.
Automatische Verfahren können ein guter Ausgangspunkt sein, aber wichtige Bilder sollten visuell kontrolliert werden.
Screenshots stellen andere Anforderungen
Screenshots bestehen häufig aus:
Text,
scharfen Kanten,
einfarbigen Flächen,
Bedienelementen.
Starke klassische JPEG-Kompression kann dort sichtbare Artefakte um Buchstaben und Linien erzeugen.
Für Screenshots können deshalb verlustfreie oder dafür geeignete moderne Formate sinnvoller sein.
Gleichzeitig sollten Screenshots ebenfalls nicht unnötig riesig sein.
Ein Screenshot eines 4K-Desktops muss nicht immer in voller Auflösung in einen 700-Pixel-Artikelbereich eingebunden werden.
Logos sollten möglichst sauber bleiben
Ein Logo besteht häufig aus klaren Linien, Schrift und wenigen Farben.
Hier ist eine andere Strategie sinnvoll als bei einem Foto.
Wenn das Logo als Vektorgrafik vorliegt, kann SVG eine interessante Möglichkeit sein.
Vektorgrafiken beschreiben Formen mathematisch und können deshalb ohne klassischen Pixelverlust skaliert werden.
Das eignet sich hervorragend für:
Logos,
Icons,
einfache Illustrationen.
SVG ist jedoch kein universeller Ersatz für Fotos.
Was ist SVG?
SVG steht für Scalable Vector Graphics.
Statt ein Bild aus einem festen Pixelraster zu speichern, beschreibt eine SVG-Datei geometrische Elemente.
Ein Kreis bleibt dadurch ein Kreis, egal ob er:
20 Pixel
oder 2.000 Pixel
groß dargestellt wird.
Das kann bei Logos und Icons extrem effizient sein.
Da SVG allerdings ein aktives XML-basiertes Format mit zusätzlichen Möglichkeiten ist, sollte bei Uploads aus nicht vertrauenswürdigen Quellen auf eine sichere Verarbeitung geachtet werden.
Fotografien gehören normalerweise nicht in SVG
Theoretisch lassen sich sehr komplizierte Grafiken als Vektor darstellen.
Für ein normales Foto ist das jedoch nicht sinnvoll.
Fotos besitzen Millionen unterschiedlicher Farb- und Helligkeitsinformationen.
Rasterformate wie JPEG, WebP oder AVIF sind dafür wesentlich geeigneter.
Die einfache Zuordnung lautet deshalb häufig:
Fotos
→ JPEG / WebP / AVIF
einfache transparente Rastergrafiken
→ PNG / WebP / AVIF
Logos und Icons
→ häufig SVGDas ist keine starre Regel, aber ein brauchbares Grundmodell.
Muss ich für jedes Format eine eigene Datei pflegen?
Nicht unbedingt.
Moderne Bildpipelines können aus einem Original automatisch verschiedene Größen und Formate erzeugen.
Dann verwaltet der Redakteur beispielsweise ein hochwertiges Ausgangsbild.
Das System erzeugt daraus:
kleine Version,
mittlere Version,
große Version,
WebP,
AVIF.
Der Browser erhält anschließend die für ihn passende Variante.
Das ist besonders bei großen Websites wesentlich effizienter als manuelle Einzelarbeit.
WordPress kann Teil dieser Bildpipeline sein
WordPress verarbeitet hochgeladene Bilder und erzeugt unterschiedliche Größen.
Zusätzliche Plugins, Hostingfunktionen oder externe Bilddienste können darüber hinaus:
Kompression,
WebP-Erzeugung,
AVIF-Erzeugung,
Größenanpassung,
CDN-Auslieferung
übernehmen.
Welche Lösung sinnvoll ist, hängt vom Umfang der Website ab.
Für zehn Bilder braucht niemand eine hochkomplexe Medienpipeline.
Bei zehntausenden Bildern kann Automatisierung dagegen enorm viel Arbeit sparen.
Bilder direkt beim Upload optimieren
Eine praktische Strategie besteht darin, Bilder automatisch zu optimieren, sobald sie hochgeladen werden.
Dann muss der Redakteur nicht jedes Foto vorab manuell durch ein Bildbearbeitungsprogramm schicken.
Ein automatischer Prozess kann beispielsweise:
zu große Originale verkleinern,
mehrere Größen erzeugen,
moderne Formate erstellen,
Metadaten reduzieren,
Kompression anwenden.
Das senkt das Risiko, dass einzelne unvorbereitete Bilder die Website unnötig aufblähen.
Automatisierung braucht trotzdem Grenzen
Ein automatisches System sollte nicht jedes Bild blind auf 1.200 Pixel reduzieren.
Vielleicht benötigt eine Fotografie-Seite deutlich größere Darstellungen.
Vielleicht werden Bilder für Zoomfunktionen verwendet.
Vielleicht sollen Besucher hochauflösende Dateien herunterladen können.
Die Optimierungsregeln müssen deshalb zum Projekt passen.
Eine Wissenswebsite hat andere Anforderungen als ein professionelles Fotoportfolio.
Was sind Metadaten in Bildern?
Bilddateien können zusätzliche Informationen enthalten.
Dazu gehören je nach Datei beispielsweise:
Aufnahmedatum,
Kameramodell,
Belichtungsdaten,
Bearbeitungsinformationen,
GPS-Koordinaten.
Diese EXIF- und anderen Metadaten können für Fotografen sehr nützlich sein.
Auf einer normalen Website werden sie häufig nicht benötigt.
Dann können sie entfernt werden, um Daten zu reduzieren und gegebenenfalls unnötige Informationen nicht mitzuveröffentlichen.
GPS-Daten verdienen besondere Aufmerksamkeit
Ein Smartphonefoto kann unter Umständen Standortinformationen enthalten.
Wer ein Bild unverändert veröffentlicht, möchte möglicherweise nicht gleichzeitig den exakten Aufnahmeort preisgeben.
Viele Plattformen entfernen solche Daten automatisch.
Darauf sollte man sich jedoch nicht blind verlassen.
Bei sensiblen Fotos kann es sinnvoll sein, Metadaten vor der Veröffentlichung bewusst zu prüfen.
Bildoptimierung überschneidet sich hier mit Datenschutz.
Dateinamen können verständlich sein
Ein Bild mit dem Dateinamen:
IMG_8294837.jpg
funktioniert technisch genauso wie:
wordpress-dashboard.jpg
Für die Verwaltung einer großen Mediathek kann ein beschreibender Dateiname jedoch erheblich hilfreicher sein.
Man erkennt später eher, was die Datei darstellt.
Das erleichtert:
Suche,
Wiederverwendung,
Redaktionsarbeit
und teilweise auch Migrationen.
Dateinamen sollten dabei kurz und sinnvoll bleiben.
Der Dateiname ersetzt keinen Alt-Text
Ein verständlicher Dateiname und ein Alternativtext erfüllen unterschiedliche Aufgaben.
Der Alt-Text beschreibt den relevanten Bildinhalt beziehungsweise die Funktion des Bildes im konkreten Kontext.
Er wird beispielsweise von Screenreadern verwendet, wenn das Bild inhaltliche Bedeutung besitzt.
Ein Dateiname wie:
rote-kaffeetasse.jpg
macht einen fehlenden oder schlechten Alt-Text nicht automatisch sinnvoll.
Barrierefreiheit sollte deshalb nicht als Nebeneffekt von SEO-Dateinamen behandelt werden.
Was gehört in einen guten Alt-Text?
Der Alt-Text sollte beschreiben, was ein Nutzer wissen muss, wenn er das Bild nicht sehen kann.
Bei einem Foto könnte das beispielsweise sein:
WordPress-Dashboard mit geöffneter Plugin-Verwaltung
Bei einem rein dekorativen Element kann ein leerer Alternativtext sinnvoller sein als eine künstliche Beschreibung.
Ein guter Alt-Text ist keine Liste von Suchbegriffen.
Er erfüllt eine funktionale Aufgabe.
Bilder-SEO besteht nicht aus Keyword-Stapeln
Auch bei Bildern wird gelegentlich versucht, möglichst viele Suchbegriffe unterzubringen.
Dateiname:
wordpress-wordpress-plugin-seo-wordpress-tipps.jpg
Alt-Text:
WordPress Plugin WordPress SEO WordPress Website
Das hilft niemandem.
Beschreibende Informationen sind sinnvoll.
Keyword-Stuffing nicht.
Wie bei normalen Inhalten gilt:
Für Menschen verständlich beschreiben, was tatsächlich vorhanden und relevant ist.
Breite und Höhe sollten bekannt sein
Wenn der Browser bereits im HTML weiß, welche Abmessungen ein Bild besitzt, kann er frühzeitig den benötigten Platz reservieren.
Dann verschiebt sich der Text beim späteren Laden des Bildes nicht plötzlich.
Vereinfacht:
<img
src="bild.webp"
width="1200"
height="800"
alt="..."
>Das Bild kann auf der Website trotzdem responsiv skaliert werden.
Die bekannten Seitenverhältnisse helfen dem Browser, das Layout stabil zu halten.
Dadurch lassen sich Layout-Verschiebungen vermeiden
Ohne bekannte Bildgröße passiert möglicherweise Folgendes:
Zuerst erscheint der Text.
Dann wird ein großes Bild geladen.
Plötzlich muss der Browser Platz dafür schaffen.
Der gesamte darunterliegende Inhalt springt nach unten.
Das wirkt unruhig und kann sogar dazu führen, dass ein Besucher versehentlich auf das falsche Element klickt.
Saubere Bilddimensionen sind deshalb nicht nur Performance-, sondern auch Usability-Thema.
Lazy Loading lädt Bilder später
Bei einem langen Artikel befinden sich vielleicht 20 Bilder auf der Seite.
Der Besucher sieht am Anfang aber nur die ersten zwei.
Es wäre unnötig, sofort alle 20 Dateien zu übertragen.
Lazy Loading verschiebt das Laden weiter unten liegender Bilder, bis sie sich dem sichtbaren Bereich nähern.
Dadurch kann der Browser seine Ressourcen zunächst auf den oberen Seitenbereich konzentrieren.
Das ist besonders bei langen bildreichen Seiten sinnvoll.
Das wichtigste Bild sollte nicht unnötig lazy geladen werden
Eine pauschale Regel „alle Bilder lazy laden“ kann kontraproduktiv sein.
Das große sichtbare Titelbild im oberen Bereich wird unmittelbar benötigt.
Wenn sein Ladevorgang künstlich verzögert wird, kann die Seite subjektiv langsamer wirken.
Deshalb sollte zwischen:
sofort sichtbaren Bildern
und
später benötigten Bildern
unterschieden werden.
Lazy Loading ist ein Werkzeug zur Priorisierung.
Nicht lediglich ein Häkchen, das möglichst überall aktiviert werden muss.
Das Hero-Bild verdient besondere Behandlung
Ein Hero-Bild ist häufig:
groß,
visuell dominant,
direkt im sichtbaren Bereich.
Damit hat es besonders großen Einfluss auf die wahrgenommene Ladegeschwindigkeit.
Gerade dieses Bild sollte deshalb:
passende Abmessungen besitzen,
gut komprimiert sein,
früh angefordert werden
und nicht durch unnötige Mechanismen verzögert werden.
Ein perfekt optimiertes Bild im Footer hilft wenig, wenn das Titelbild drei Megabyte wiegt und zu spät geladen wird.
Was bedeutet Preload bei Bildern?
In bestimmten Situationen kann dem Browser früh mitgeteilt werden, dass eine wichtige Ressource besonders bald benötigt wird.
Das kann beispielsweise beim zentralen sichtbaren Bild sinnvoll sein.
Solche Priorisierungsmechanismen sollten allerdings gezielt eingesetzt werden.
Wenn zehn Bilder gleichzeitig als maximal wichtig markiert werden, ist keines davon wirklich priorisiert.
Das Ziel ist nicht:
alles früher laden.
Sondern:
das Richtige zuerst laden.
Bilder im CSS können schwieriger zu priorisieren sein
Große Hintergrundbilder werden manchmal ausschließlich über CSS eingebunden.
Der Browser entdeckt sie dann möglicherweise später als ein direkt im HTML angegebenes Bild.
Bei wichtigen sichtbaren Motiven kann das die Ladepriorität beeinflussen.
Das bedeutet nicht, dass CSS-Hintergrundbilder grundsätzlich schlecht sind.
Für rein dekorative Hintergründe sind sie oft sehr passend.
Für einen zentralen inhaltlichen Bildbestandteil kann ein normales Bild-Element hingegen Vorteile besitzen.
Ein Bild sollte nicht mehrfach unnötig geladen werden
Manche Layouts enthalten unterschiedliche Bildvarianten für Desktop und Mobilgerät.
Wenn die Umsetzung schlecht erfolgt, lädt der Browser möglicherweise beide Dateien und versteckt anschließend nur eine davon.
Dann wurde zwar visuell eine responsive Gestaltung erzeugt, aber keine Datenmenge gespart.
Die technische Auslieferung sollte deshalb genauso geprüft werden wie die sichtbare Darstellung.
Art Direction ist etwas anderes als responsive Größe
Manchmal soll auf dem Smartphone nicht einfach dasselbe Foto kleiner dargestellt werden.
Vielleicht ist das Desktopbild sehr breit:
Person links, Landschaft rechts.
Auf dem schmalen Smartphone würde die Person winzig.
Dann kann für mobile Geräte ein anders zugeschnittener Ausschnitt sinnvoll sein.
Das wird häufig als Art Direction bezeichnet.
Es geht dann nicht nur um weniger Pixel, sondern um eine andere Bildkomposition für ein anderes Layout.
Das picture-Element ermöglicht unterschiedliche Varianten
HTML bietet dafür unter anderem das picture-Element.
Damit können verschiedene Bildquellen abhängig von Bedingungen angeboten werden.
So lassen sich beispielsweise:
unterschiedliche Formate
oder
unterschiedliche Bildausschnitte
bereitstellen.
Für Redakteure muss das nicht zwangsläufig manuell programmiert werden.
Themes, CMS oder Bilddienste können solche Funktionen automatisieren.
Ein CDN kann Bilder näher zum Besucher bringen
Bilder eignen sich hervorragend für die Auslieferung über ein Content Delivery Network.
Sie verändern sich häufig selten und können deshalb an verschiedenen Standorten zwischengespeichert werden.
Ein Besucher erhält die Datei dann möglicherweise von einem geografisch näheren System.
Das kann besonders bei internationalem Publikum helfen.
Wie bei Caching einfach erklärt gilt jedoch:
Ein CDN macht eine fünf Megabyte große Datei nicht automatisch klein.
Es liefert sie lediglich effizienter aus.
Bild-CDNs können noch mehr übernehmen
Spezialisierte Bilddienste können Dateien teilweise dynamisch anpassen.
Ein Browser fordert beispielsweise ein Bild mit:
800 Pixel Breite,
WebP
und bestimmter Qualität
an.
Der Bilddienst erzeugt oder liefert genau diese Variante.
Für einen anderen Besucher wird möglicherweise:
1200 Pixel,
AVIF
ausgeliefert.
Damit wird Bildoptimierung zu einem automatisierten Dienst.
Für große Websites ist das ausgesprochen interessant.
Für kleine Websites reicht häufig ein einfacherer Workflow
Ein kleiner Blog benötigt nicht unbedingt eine dynamische globale Bildplattform.
Schon ein vernünftiger Prozess kann sehr viel bringen:
Bilder nicht unnötig riesig hochladen,
passende Formate verwenden,
vernünftig komprimieren,
responsive WordPress-Bilder nutzen,
Lazy Loading für weiter unten liegende Medien einsetzen.
Die letzten fünf Prozent Optimierung sind wesentlich weniger wichtig als die ersten 80 Prozent.
Performance-Plugins können Bilder optimieren
Viele WordPress-Performance- oder Bildplugins bieten Funktionen wie:
Komprimierung,
WebP-Erzeugung,
AVIF-Erzeugung,
Lazy Loading,
Größenanpassung.
Das kann sehr praktisch sein.
Vor der Installation sollte allerdings geprüft werden, welche Funktionen das Hosting, Theme oder ein bereits vorhandener Dienst übernimmt.
Wenn drei Plugins gleichzeitig versuchen, dieselben Bilder umzuschreiben und unterschiedliche Lazy-Loading-Systeme einsetzen, wird die Installation unnötig kompliziert.
Vor einer Massenoptimierung gehört ein Backup
Angenommen, ein Plugin soll 20.000 bestehende Bilder automatisch komprimieren oder ersetzen.
Das ist ein erheblicher Eingriff in den Medienbestand.
Vorher sollte deshalb klar sein:
Bleiben Originale erhalten?
Kann die Optimierung rückgängig gemacht werden?
Werden Dateinamen verändert?
Werden Datenbankeinträge angepasst?
Existiert ein vollständiges Backup?
Die allgemeinen Grundsätze dazu findest du in WordPress richtig sichern und Backup richtig planen.
Originale können langfristig wertvoll sein
Für manche Projekte lohnt es sich, die hochauflösenden Originalbilder unabhängig von der Website aufzubewahren.
Dann kann die Website mit optimierten Derivaten arbeiten.
Die Originale liegen beispielsweise in:
einem Medienarchiv,
einem NAS,
Cloud-Speicher
oder einer anderen Fotoverwaltung.
Das hat einen wichtigen Vorteil:
Die Website muss nicht gleichzeitig Produktionsarchiv und Auslieferungssystem sein.
WordPress sollte nicht zwingend das einzige Fotoarchiv sein
Wer hochwertige Originalfotos besitzt, sollte überlegen, ob WordPress wirklich deren einzige Ablage sein soll.
WordPress ist in erster Linie ein Content-Management-System für die Website.
Eine vollständige Bildbibliothek kann zusätzliche Anforderungen besitzen:
Originaldateien,
RAW-Dateien,
Metadaten,
Bearbeitungsstände,
Langzeitarchivierung.
Diese Aufgaben gehen über klassische Websiteoptimierung hinaus.
Bearbeitungsqualität beginnt vor der Kompression
Eine schlechte Aufnahme wird durch das perfekte Dateiformat nicht gut.
Wenn ein Bild:
unscharf,
falsch belichtet,
schlecht zugeschnitten
oder visuell irrelevant
ist, hilft auch AVIF nicht.
Bildoptimierung sollte deshalb zwei Ebenen unterscheiden:
inhaltliche und visuelle Qualität
und
technische Dateieffizienz.
Beide gehören zu einer guten Website.
Nicht jedes Bild braucht volle Breite
Auch redaktionell kann die Bildgröße hinterfragt werden.
Ein kleines erklärendes Screenshot-Detail muss vielleicht nicht über die gesamte Bildschirmbreite reichen.
Je größer ein Bild dargestellt wird, desto größere Quelldateien können erforderlich werden.
Das Layout beeinflusst also unmittelbar den Performancebedarf.
Design und technische Optimierung lassen sich nicht vollständig voneinander trennen.
Weniger Bilder können manchmal besser sein
Ein Artikel wird nicht automatisch besser, weil nach jedem zweiten Absatz ein Stockfoto steht.
Jedes Bild sollte idealerweise mindestens eine Aufgabe erfüllen:
etwas erklären,
etwas zeigen,
Atmosphäre schaffen,
Orientierung geben,
Inhalt unterstützen.
Ein rein dekoratives Bild ohne Mehrwert kostet trotzdem:
Daten,
Speicher,
Redaktionszeit,
Aufmerksamkeit.
Die effizienteste Bilddatei ist diejenige, die gar nicht geladen werden muss – sofern das Bild tatsächlich keinen Zweck erfüllt.
Gute Bilder können wiederum Inhalt deutlich verbessern
Das Gegenstück ist ebenso wichtig.
Bei einem Reparaturratgeber kann eine präzise Fotografie mehr erklären als drei Absätze Text.
Bei einem Designartikel sind Beispiele unverzichtbar.
Bei einer Softwareanleitung kann ein Screenshot Orientierung schaffen.
Performanceoptimierung darf deshalb nicht dazu führen, informative Bilder aus Angst vor Dateigrößen zu vermeiden.
Die richtige Lösung ist:
nützliche Bilder effizient ausliefern.
Wie groß sollte eine einzelne Webbild-Datei sein?
Eine pauschale Kilobyte-Grenze funktioniert schlecht.
Ein kleines Icon sollte winzig sein.
Ein großflächiges hochwertiges Foto darf mehr benötigen.
Eine komplexe Illustration lässt sich anders komprimieren als ein weicher Hintergrund.
Statt einer starren Zahl ist eine bessere Frage:
Ist diese Datei für ihre sichtbare Größe und Funktion angemessen klein?
Ein 2-Megabyte-Bild mit 400 Pixel Darstellung ist sehr wahrscheinlich problematisch.
Ein großes detailreiches Titelbild kann deutlich mehr Daten rechtfertigen.
Messung ist besser als Bauchgefühl
Browser-Entwicklerwerkzeuge und Performance-Tools können zeigen:
welche Bilder geladen werden,
wie groß sie sind,
wann sie geladen werden,
wie lange die Übertragung dauert,
welche Varianten ausgewählt wurden.
Dadurch lässt sich sehr schnell erkennen, ob eine Website beispielsweise zehn riesige Originalbilder ausliefert.
Bildoptimierung sollte genauso wie die übrige Website-Performance auf Messwerten beruhen.
Die Startseite ist oft besonders bildlastig
Startseiten enthalten häufig:
Hero-Bild,
Kacheln,
Teaserbilder,
Produktbilder,
Autorenbilder,
Logos.
Dadurch kann die Datenmenge schnell wesentlich größer werden als bei einem normalen Artikel.
Für eine Performanceprüfung sollte deshalb nicht nur irgendeine Unterseite untersucht werden.
Interessant sind die tatsächlichen Seitentypen.
Wie bereits in Warum Websites langsam werden gilt:
Eine einzelne URL repräsentiert nicht automatisch die gesamte Website.
Kategorie- und Archivseiten können viele Vorschaubilder laden
Ein Magazinarchiv mit 30 Artikeln zeigt möglicherweise 30 Vorschaubilder.
Selbst wenn jedes davon nur 150 Kilobyte groß ist, entstehen:
30 × 150 KB = 4.500 KB
also rund 4,5 Megabyte allein für die Vorschaubilder.
Dort können kleinere speziell erzeugte Thumbnail-Größen einen erheblichen Unterschied machen.
Ein großes Artikelbild sollte nicht einfach als verkleinerte Vorschau erneut geladen werden.
WordPress-Bildgrößen sollten zum Theme passen
WordPress erzeugt verschiedene Bildvarianten.
Themes können zusätzliche Größen definieren.
Nach mehreren Themewechseln können deshalb zahlreiche unterschiedliche Bildgrößen existieren.
Das ist nicht automatisch ein Problem.
Bei großen Medienarchiven lohnt sich aber ein Verständnis dafür, welche Varianten tatsächlich verwendet werden.
Sonst entstehen möglicherweise tausende Dateien, die niemand benötigt.
Ein Themewechsel kann neue Bildgrößen benötigen
Wenn ein neues Theme andere Vorschaumaße verwendet, besitzen ältere Bilder diese Variante möglicherweise noch nicht.
Dann können neue Größen nachträglich erzeugt werden.
Solche Operationen sollten bei großen Mediatheken geplant werden, weil sie:
Rechenzeit,
Speicher
und möglicherweise viele neue Dateien
erzeugen.
Auch hier gilt: erst verstehen, dann automatisieren.
Löschen alter Bildgrößen sollte nicht blind erfolgen
Auf den ersten Blick wirken ungenutzte Thumbnail-Dateien wie einfacher Ballast.
Doch möglicherweise verweisen alte Inhalte noch direkt auf bestimmte Varianten.
Ein unüberlegtes Löschen kann dann Bilder in bestehenden Artikeln beschädigen.
Bevor große Medienbestände bereinigt werden, sollte deshalb geklärt werden, welche Dateien tatsächlich verwendet werden.
Bildoptimierung und Backups hängen zusammen
Eine Website mit 30 Gigabyte Bildern erzeugt entsprechend größere Sicherungen.
Wenn derselbe visuelle Inhalt sinnvoll auf 8 Gigabyte reduziert werden kann, profitieren auch:
Backup,
Offsite-Transfer,
Restore,
Migration.
Das macht Bildoptimierung zu einem Infrastrukturthema.
Gerade bei vielen WordPress-Seiten kann dieser Effekt beträchtlich werden.
Die Bildpipeline sollte reproduzierbar sein
Bei professionellen Projekten ist es sinnvoll, einen klaren Prozess zu besitzen.
Zum Beispiel:
Original
↓
optimierte Master-Version
↓
automatisch erzeugte Webgrößen
↓
moderne Formate
↓
responsive AuslieferungDann ist nachvollziehbar, woher jede Webdatei stammt.
Wenn dagegen einzelne Redakteure Bilder zufällig mit unterschiedlichen Programmen, Qualitäten und Abmessungen hochladen, wird das Medienarchiv langfristig inkonsistent.
Ein einfacher Redaktionsstandard kann viel bewirken
Man braucht dafür kein kompliziertes Handbuch.
Schon klare Regeln können helfen:
Welches maximale Ausgangsmaß ist für normale Artikel sinnvoll?
Wie werden Dateinamen vergeben?
Welche Bildarten werden verwendet?
Wo liegen hochauflösende Originale?
Welche Optimierung passiert automatisch?
Werden Alt-Texte redaktionell gepflegt?
Damit wird Bildoptimierung Teil des normalen Veröffentlichungsprozesses und nicht zur späteren Reparaturarbeit.
Performance sollte bereits bei der Content-Produktion beginnen
Wenn ein Redakteur ein riesiges PNG-Foto hochlädt, muss die Technik den Fehler später korrigieren.
Besser ist ein Workflow, der schon früh sinnvolle Entscheidungen fördert.
Dasselbe Prinzip gilt auch für Videos, Downloads und externe Medien.
Website-Performance entsteht nicht erst in der Serverkonfiguration.
Sie beginnt bei den Inhalten selbst.
Was du dir über Webbilder merken solltest
Ein gutes Webbild muss nicht die maximal mögliche technische Qualität besitzen.
Es muss für seine tatsächliche Darstellung ausreichend hochwertig und gleichzeitig möglichst effizient sein.
Dafür spielen mehrere Ebenen zusammen.
Abmessungen sollten zur sichtbaren Größe passen.
Responsive Images liefern verschiedenen Geräten passende Varianten.
JPEG bleibt für viele fotografische Anwendungen brauchbar.
PNG eignet sich unter anderem für bestimmte verlustfreie Grafiken und Transparenz.
WebP und AVIF ermöglichen häufig deutlich effizientere Webauslieferung.
SVG ist besonders für geeignete Logos, Icons und andere Vektorgrafiken interessant.
Kompression reduziert die Dateigröße.
Lazy Loading verschiebt Bilder, die noch nicht benötigt werden.
Bekannte Bilddimensionen helfen, Layout-Verschiebungen zu vermeiden.
Caching und CDN verhindern unnötige erneute beziehungsweise weit entfernte Übertragungen.
Die wichtigste Regel ist aber einfacher:
Liefere nicht 6.000 Pixel und mehrere Megabyte aus, wenn der Besucher nur eine kleine Darstellung davon benötigt.