AVIF für Fotos, WebP als Rückfallebene, SVG für Logos und Icons, PNG nur bei Transparenz mit harten Kanten. Liefern Sie jedes Foto in drei bis fünf Breiten über srcset aus, notieren Sie width und height im Markup und laden Sie alles unterhalb des ersten Bildschirms verzögert.
Welches Bildformat nehmen Sie wofür?
Die Auswahl ist kleiner, als sie wirkt. Fünf Formate decken praktisch jeden Fall auf einer Unternehmensseite ab, und die Zuordnung folgt der Bildart, nicht dem Geschmack.
- AVIF: fotografische Motive mit weichen Verläufen. Bei gleicher wahrgenommener Qualität deutlich kleiner als JPEG, dafür rechenintensiver beim Erzeugen.
- WebP: der pragmatische Zwischenschritt. Kleiner als JPEG, überall unterstützt, beherrscht Transparenz und eignet sich als Rückfallebene für AVIF.
- JPEG: die letzte Rückfallebene für Fotos und weiterhin das Format, das jedes System verarbeitet. Progressive Kodierung lässt das Motiv früh erahnen.
- PNG: nur für Grafiken mit wenigen Farben, harten Kanten und Transparenz — Screenshots von Oberflächen, Diagramme, Wasserzeichen.
- SVG: alles Vektorbasierte. Logos, Icons, Piktogramme, einfache Diagramme. Skaliert verlustfrei und lässt sich per CSS einfärben.
Ein Großhändler mit 4.000 Artikelfotos merkt den Unterschied sofort: Dieselbe Katalogseite mit AVIF statt JPEG überträgt in unseren Messungen regelmäßig weniger als die Hälfte der Bytes. Bei Objektfotos einer Immobilienverwaltung ist der Effekt ähnlich, weil Himmel und Fassaden große, weich verlaufende Flächen sind.
Zwei Formate fehlen in der Liste mit Absicht. GIF ist für Animationen technisch überholt; ein kurzes, stummes MP4 oder WebM überträgt bei besserer Qualität einen Bruchteil der Daten. Und TIFF gehört in die Druckvorstufe, nicht auf einen Webserver — Redaktionen laden es trotzdem regelmäßig hoch.
Logos und Icons gehören in eine eigene Kategorie
Ein Logo als PNG in fester Pixelbreite ist auf hochauflösenden Displays unscharf und in dunkler Darstellung oft falsch. Als SVG bleibt es scharf, wiegt meist wenige Kilobyte und lässt sich über currentColor an die Textfarbe koppeln. Für Icon-Sätze bündeln Sie die Symbole in einer Sprite-Datei und referenzieren einzelne Symbole per use — das spart Dutzende Einzelanfragen.
Verlustbehaftet oder verlustfrei — wie stark dürfen Sie komprimieren?
Verlustfreie Kompression rekonstruiert das Original Pixel für Pixel und ist bei Fotos verschwenderisch. Verlustbehaftete Verfahren verwerfen Bildinformation, die das Auge schlecht wahrnimmt, und erreichen dadurch Größen, die um ein Vielfaches darunter liegen.
Praktisch arbeiten Sie mit einem Qualitätswert. Für JPEG liefern Werte zwischen 72 und 82 fast immer ein Ergebnis, das im direkten Vergleich nicht vom Original zu unterscheiden ist. AVIF und WebP verwenden eigene Skalen; bei AVIF liegt der brauchbare Bereich für Webfotos typischerweise zwischen 45 und 60.
Zwei Fallstricke sind verbreitet. Erstens: Wer ein bereits komprimiertes JPEG erneut speichert, addiert Artefakte — arbeiten Sie immer vom Original aus. Zweitens: Flächen mit feinem Text oder dünnen Linien vertragen weniger Kompression als Landschaften. Für Screenshots von Software-Oberflächen sind PNG oder ein hoher Qualitätswert die bessere Wahl.
Automatisieren lässt sich die Wahl über eine wahrnehmungsbasierte Bewertung. Werkzeuge, die Original und Ableitung anhand eines Bildähnlichkeitsmaßes vergleichen, finden pro Motiv den niedrigsten Qualitätswert, der noch unter der Sichtbarkeitsschwelle bleibt. Bei heterogenen Beständen bringt das mehr als ein pauschaler Wert für alles.
Legen Sie Originale getrennt von den Ableitungen ab. Nur so lässt sich ein Bestand später erneut ausspielen, wenn ein neues Format hinzukommt oder sich die Rastermaße ändern — was bei jedem Relaunch passiert.
Wie funktionieren srcset und sizes zusammen?
Ein Bild, das in einer 400 Pixel breiten Spalte erscheint, braucht keine 2.400 Pixel Rohdaten. Mit srcset hinterlegen Sie mehrere Ableitungen desselben Motivs samt ihrer tatsächlichen Pixelbreite, geschrieben als 800w, 1200w, 1600w. Der Browser wählt daraus aus.
Damit er richtig wählen kann, braucht er sizes. Dort beschreiben Sie, wie breit das Bild im Layout sein wird — abhängig von der Fensterbreite, etwa: bis 768 Pixel volle Breite, darüber ein Drittel. Ohne sizes nimmt der Browser die volle Fensterbreite an und lädt regelmäßig eine Stufe zu groß.
Wichtig ist die Reihenfolge im Kopf des Entwicklers: sizes beschreibt das Layout, srcset beschreibt die vorhandenen Dateien. Beides muss zusammenpassen, sonst wählt der Browser korrekt nach falschen Angaben.
Es existiert eine zweite Schreibweise mit den Deskriptoren 1x und 2x. Sie ist einfacher, taugt aber nur für Bilder mit fester Anzeigebreite — etwa ein Logo in der Kopfzeile. Sobald sich die Breite mit dem Layout ändert, führt an der Variante mit w-Deskriptoren und sizes kein Weg vorbei.
Breakpoint-Sets statt Zufallsgrößen
Erzeugen Sie Ableitungen nicht in runden Fantasiezahlen, sondern abgeleitet aus Ihrem Raster. Wenn Ihre Inhaltsspalte maximal 1.280 Pixel breit ist und Sie zwei- und dreispaltige Kacheln kennen, ergeben sich daraus genau die Breiten, die Sie brauchen — meist vier Stufen plus eine doppelte Auflösung für die kleinste. Ein festes Set über das gesamte Projekt hinweg hält den Speicher und den Zwischenspeicher übersichtlich.
Wann brauchen Sie das picture-Element?
srcset skaliert dasselbe Motiv. Wenn Sie auf schmalen Bildschirmen jedoch einen anderen Bildausschnitt zeigen wollen, reicht das nicht — das nennt sich Art Direction, und dafür ist picture gedacht. Innerhalb von picture definieren Sie mehrere Quellen mit eigenen Bedingungen und ein img als Rückfall.
Ein Beispiel aus dem Anlagenbau: Das Querformat einer kompletten Fertigungslinie funktioniert am Desktop, auf dem Handy schrumpft es zu einem grauen Streifen. Dort zeigen Sie stattdessen einen quadratischen Ausschnitt der Bedieneinheit. Zwei Motive, ein Element.
Der zweite Anwendungsfall ist die Formatstaffelung. Über mehrere source-Angaben mit den Typangaben image/avif und image/webp bieten Sie moderne Formate an, während das eingebettete img mit JPEG jedes System bedient. Der Browser nimmt die erste Quelle, die er versteht — deshalb steht AVIF oben.
Vergessen Sie bei picture nicht, dass Ladeverhalten und Abmessungen an das innere img gehören, nicht an die source-Angaben. Ein häufiger Fund in Audits ist ein sauber gestaffeltes picture-Element, dessen img weder Breite noch Höhe trägt — der Layoutsprung bleibt dann trotz allem Aufwand.
Wie verhindern Sie Layoutsprünge beim Bildladen?
Springende Layouts entstehen, wenn der Browser die Bildabmessungen erst kennt, nachdem die Datei angekommen ist. Bis dahin reserviert er keinen Platz, der Text rutscht, und wer gerade auf einen Link zielt, trifft daneben.
Die Lösung kostet zwei Attribute: width und height am img-Tag, mit den echten Pixelmaßen der Datei. Moderne Browser berechnen daraus das Seitenverhältnis und halten den Platz frei, auch wenn CSS die Darstellung später auf 100 Prozent Breite setzt. Alternativ oder ergänzend setzen Sie aspect-ratio im Stylesheet.
Bei Bildern mit variablem Verhältnis — etwa Objektfotos aus verschiedenen Quellen — legen Sie einen Container mit festem Verhältnis an und schneiden das Motiv per object-fit zu. So bleibt das Raster stabil, unabhängig davon, was die Redaktion hochlädt.
Denken Sie auch an Motive, die nachträglich per Skript eingefügt werden — Kacheln beim Nachladen einer Liste, Inhalte in einem Karussell. Sie tragen dieselben Attribute; werden sie vergessen, springt das Layout genau dann, wenn jemand gerade liest.
Welches Bild lädt sofort, welches erst beim Scrollen?
Alles unterhalb des sichtbaren Bereichs bekommt loading="lazy". Der Browser holt diese Dateien erst, wenn sie in die Nähe des Viewports kommen. Bei einer Katalogseite mit sechzig Kacheln ist das der größte Einzelhebel überhaupt.
Umgekehrt gilt: Das große Bild im ersten Bildschirm darf niemals lazy sein. Es ist in vielen Fällen das Element, das den Largest Contentful Paint bestimmt, und jede Verzögerung schlägt direkt auf diesen Wert durch. Geben Sie ihm stattdessen fetchpriority="high", damit der Browser es vor weniger wichtigen Dateien anfordert.
Ergänzend hilft ein preload-Hinweis im Kopfbereich für genau dieses eine Bild. Setzen Sie ihn sparsam ein — mehrere hochpriorisierte Anfragen konkurrieren miteinander und heben sich gegenseitig auf.
Ein verbreiteter Fehler ist die Kombination aus verzögertem Laden und einem Platzhalterbild, das erst per Skript ersetzt wird. Dieses Muster stammt aus einer Zeit, in der Browser das Attribut nicht kannten. Heute verzögert es den Bildaufbau zusätzlich, weil erst Skripte laufen müssen; das eingebaute Attribut genügt.
Das schnellste Bild ist das, das der Browser gar nicht erst anfordern muss.
Was übernimmt ein Bild-CDN, was nicht?
Ein Bild-CDN nimmt das Original entgegen und erzeugt Ableitungen auf Zuruf: Format nach Browserfähigkeit, Breite nach Parameter, Qualität nach Voreinstellung. Die Ergebnisse liegen anschließend im Zwischenspeicher an verteilten Standorten. Für Bestände, die redaktionell wachsen, spart das erheblichen manuellen Aufwand.
Die Grenzen sind aber real. Automatik kennt Ihr Layout nicht: Sie kann srcset und sizes nicht für Sie schreiben und weiß nicht, welches Bild oben steht. Sie kann auch keinen Bildausschnitt gestalten — ein automatischer Zuschnitt auf Quadrat trifft die Bedieneinheit einer Maschine nur zufällig.
Ohne CDN erreichen Sie dasselbe mit einem Aufbauschritt: Ein Skript im Veröffentlichungsprozess erzeugt aus jedem Original die definierten Breiten und Formate und legt sie neben die Quelldatei. Der Vorteil ist volle Kontrolle, der Preis sind längere Aufbauzeiten bei großen Beständen.
- Automatisierbar: Formatwahl, Skalierung, Qualitätsstufe, Auslieferung aus dem Zwischenspeicher.
- Nicht automatisierbar: Bildaussage, Ausschnitt, Reihenfolge im Layout, Entscheidung über Ladepriorität.
- Prüfenswert: die Kostenmodelle nach Transformationen oder übertragenem Volumen, die bei großen Katalogen spürbar werden.
- Rückfallplan: Was passiert, wenn der Dienst ausfällt? Ein Ursprungsserver, der Originale ausliefern kann, gehört dazu.
Rechnen Sie den Aufwand ehrlich: Die Umstellung eines gewachsenen Bestands auf ein sauberes Ableitungsschema liegt in unseren Projekten meist bei 1.500 bis 5.000 € — überschaubar gegenüber dem, was ein Relaunch kostet, aber eben kein Nebenbei-Ticket.