// d-01bild
AVIF.
Das kleinste Format auf Basis des AV1-Codecs — rund 50 % unter JPEG, mit höherer Farbtiefe und HDR. Wir liefern es als erste Quelle im picture-Element aus.
stack: image/avif · av1
// stack · media
Bild- & Videoformate.
Wie siteway Bilder ausliefert: als AVIF und WebP mit JPG-Fallback, Video als WebM — responsive über srcset/sizes, sparsam per Lazy Loading, mit festen width/height gegen Layout-Sprünge. Erzeugt beim Build, nicht von Hand. Der Performance-Effekt landet bei Performance.
stack
formate: avif · webp · webm
einsatz: responsive auslieferung
seit: 2006
// definition
Was sind moderne Bildformate?
Moderne Bildformate wie AVIF und WebP speichern dasselbe Bild in deutlich kleineren Dateien als das alte JPEG — bei gleicher sichtbarer Qualität. WebP stammt von Google und wird von praktisch jedem aktuellen Browser verstanden. AVIF basiert auf dem AV1-Videocodec, komprimiert noch stärker und beherrscht höhere Farbtiefe und HDR.
Für Bewegtbild gilt dasselbe Prinzip: WebM ist das offene, stark komprimierende Gegenstück zu AVIF im Videobereich. Der Trick ist nicht das Format allein, sondern die Auslieferung — das richtige Format an das richtige Gerät, mit einem Fallback für alles, was das Neue noch nicht kann.
// einsatz · unsere pipeline
Wie wir es einsetzen.
ein original rein, alle formate raus
Wir wandeln Bilder nicht von Hand um. Beim Build läuft jedes Original durch sharp, eine schnelle Bildbibliothek für Node.js. Daraus entstehen automatisch AVIF, WebP und ein JPG-Fallback — und zwar in mehreren Breiten. Ändert sich das Original, wird der ganze Satz reproduzierbar neu erzeugt. Bei TYPO3 oder WordPress übernimmt die Bildverarbeitung des CMS dieselbe Aufgabe im Backend.
Im HTML steht dann ein <picture>-Element mit den Formaten in fester Reihenfolge:
AVIF zuerst, WebP als zweite Wahl, das JPG im img als Fallback.
Der Browser prüft von oben nach unten und lädt genau eine Datei — das modernste Format, das er kann.
Jede source trägt ihr srcset mit
Breitenstufen, dazu ein sizes, das zum echten Layout passt. So bekommt kein Gerät
mehr Pixel geschickt, als es anzeigt.
Zwei Details, die oft fehlen und den Unterschied machen: Jedes Bild trägt feste
width/height, damit der Browser den Platz reserviert und der Text nicht springt
(Cumulative Layout Shift gegen null). Und
loading="lazy" setzen wir bewusst nur unterhalb des
sichtbaren Bereichs — das Hero-Bild lädt sofort, damit das LCP schnell bleibt.
// datenpunkt · dateigröße
Wie viel kleiner das wird.
gleiches bild, weniger bytes
Bei vergleichbarer sichtbarer Qualität spart WebP gegenüber JPEG rund 25–35 %, AVIF etwa 50 % — je nach Motiv auch mehr. Weniger Bytes über die Leitung heißt: ein schnelleres Largest Contentful Paint und weniger mobiles Datenvolumen. Der exakte Wert hängt vom Bild ab, die Größenordnung ist über Projekte hinweg stabil.
// details · 6 bausteine
Die Technik im Detail.
jeder baustein ein hebel
// d-02bild
WebP.
Der breit unterstützte Mittelweg: kleiner als JPEG, von jedem aktuellen Browser verstanden, mit Transparenz. Die zweite Quelle für alles, was noch kein AVIF kann.
stack: image/webp
// d-03video
WebM.
Für kurze Hintergrund- und Teaser-Clips: WebM stark komprimiert, MP4 als Fallback über das video-Element. Stummgeschaltetes Autoplay, ohne externen Player, ohne Tracking.
stack: webm · mp4-fallback
// d-04responsive
srcset & sizes.
srcset listet dasselbe Bild in mehreren Breiten, sizes beschreibt die Darstellungsbreite im Layout. Der Browser rechnet selbst aus, welche Datei zu Bildschirm und Auflösung passt.
stack: srcset · sizes · w-descriptor
// d-05laden
Lazy Loading.
Bilder unterhalb des sichtbaren Bereichs laden erst beim Scrollen — per loading=lazy, ohne JavaScript. Das LCP-Bild im sichtbaren Bereich bleibt bewusst außen vor, damit es sofort erscheint.
stack: loading=lazy · nativ
// d-06stabil
width/height.
Feste Maße im HTML geben dem Browser das Seitenverhältnis vorab. Er reserviert den Platz, der Text springt nicht — der Cumulative Layout Shift geht gegen null. Ein Detail, das oft fehlt.
stack: width · height · aspect-ratio
// beleg · aus der praxis
Im echten Projekt.
Auf unserer eigenen Startseite zahlt die Pipeline direkt ein: PageSpeed Insights 100/100/100/100 mobil. Bilder als AVIF mit Fallback, feste Maße, das Hero nicht lazy — genau die Bausteine dieser Seite. Bei kartenlastigen Portalen wie dem Standort-Portal für Garbe zählt außerdem, dass Vorschaubilder klein bleiben, während die Mapbox-Karte die Bandbreite braucht.
Sichtbar wird der Effekt am schnellsten in einer Bildergalerie — viele Motive auf einer Seite. Wie wir das als fertigen Baustein bauen, steht bei Portfolio- & Media-Galerie.
// faq
Häufige Fragen.
Was ist der Unterschied zwischen AVIF und WebP?
Beide sind moderne Bildformate, die deutlich kleiner sind als JPEG. WebP stammt von Google und wird von praktisch allen aktuellen Browsern verstanden. AVIF basiert auf dem AV1-Videocodec, komprimiert bei vergleichbarer Qualität noch stärker — rund 20 bis 30 Prozent kleiner als WebP — und beherrscht höhere Farbtiefe und HDR. siteway liefert beide aus: AVIF zuerst, WebP als breit unterstützte zweite Wahl, JPG als Fallback. Der Browser nimmt das erste Format, das er kann.
Warum liefert ihr AVIF, WebP und JPG gleichzeitig aus?
Weil kein einzelnes Format überall funktioniert. Über das picture-Element hinterlegt siteway pro Bild mehrere Quellen in fester Reihenfolge: AVIF, dann WebP, dann JPG im img-Tag als Fallback. Der Browser prüft von oben nach unten und lädt genau eine Datei — das modernste Format, das er darstellen kann. Alte Browser bekommen das JPG, neue das kleine AVIF. Niemand sieht ein kaputtes Bild, und trotzdem profitieren die meisten Besucher von der besseren Kompression.
Wie viel kleiner werden Bilder mit AVIF und WebP?
Bei vergleichbarer sichtbarer Qualität spart WebP gegenüber JPEG rund 25 bis 35 Prozent Dateigröße, AVIF etwa 50 Prozent — je nach Motiv auch mehr. Kleinere Dateien heißt: weniger Bytes über die Leitung, ein schnelleres Largest Contentful Paint und weniger mobiles Datenvolumen. Der exakte Wert hängt vom Bild ab, die Größenordnung ist über Projekte hinweg stabil.
Was bedeuten srcset und sizes bei Bildern?
srcset ist eine Liste desselben Bildes in mehreren Breiten, sizes beschreibt, wie breit das Bild im Layout tatsächlich dargestellt wird. Aus beidem rechnet der Browser selbst aus, welche Datei zu Bildschirm und Auflösung passt — ein Handy lädt eine kleine Variante, ein Retina-Desktop eine große. So bekommt kein Gerät mehr Pixel geschickt, als es braucht. siteway erzeugt die Breitenstufen automatisch beim Build.
Wie verhindert ihr Layout-Sprünge (CLS) bei Bildern?
Jedes Bild bekommt feste width- und height-Attribute im HTML. Der Browser kennt damit das Seitenverhältnis, bevor die Datei geladen ist, reserviert den Platz und lässt den Text nicht mehr nach unten springen, wenn das Bild eintrifft. Das drückt den Cumulative Layout Shift — einen der Core Web Vitals — gegen null. Bilder unterhalb des sichtbaren Bereichs bekommen zusätzlich loading=lazy, das Hero-Bild bewusst nicht.
Womit wandelt ihr die Bilder in AVIF und WebP um?
siteway erzeugt die Formate beim Build automatisch mit sharp, einer schnellen Bildbibliothek für Node.js. Aus einem hochgeladenen Original entstehen AVIF, WebP und ein JPG-Fallback in allen benötigten Breiten — reproduzierbar und ohne Handarbeit in Photoshop. Die Redaktion lädt ein Bild hoch, die Pipeline liefert den Rest. Bei TYPO3 oder WordPress übernimmt die jeweilige Bildverarbeitung des CMS dieselbe Aufgabe.
Und was ist mit Videos?
Für kurze Hintergrund- und Teaser-Videos liefert siteway WebM aus, ein offenes, stark komprimierendes Videoformat, mit MP4 als Fallback über das video-Element. Autoplay läuft stummgeschaltet, ohne externe Player und ohne Tracking. Lange oder viele Videos gehören dagegen in einen Streaming-Dienst — eine 200-MB-Datei direkt auf dem Webserver bremst jede Seite aus.
// womit das zusammenhängt
Womit das zusammenhängt.
leistung & stack
// leistung · buchen
Portfolio- & Media-Galerie.
Diese Formate als fertiger Baustein: eine Galerie, die viele Motive schnell und responsive ausliefert. Der Ort, an dem du das buchst.
zur leistung →
// stack · performance
Performance.
Kleine Bilder sind der größte Hebel für schnelle Ladezeiten. Wie das in LCP, INP und CLS einzahlt — und wo die anderen Hebel liegen.
weiterlesen →
// stack · build
Deployment & Betrieb.
Die Bild-Pipeline läuft nicht von Hand, sondern beim Build. Wie wir Formate, Assets und Auslieferung über Git und CI/CD versionieren.
weiterlesen →
// Schnelle Bilder für dein Projekt?
Projekt anfragen