Zum Inhalt springen
FA
Alle Insights

Bild-Optimierung — WebP/AVIF, next/image, Lazy-Loading

Auf den meisten Kanzlei-Websites sind Bilder der mit Abstand größte Performance-Posten. Ein einziges unkomprimiertes Team-Foto kann mehrere Megabyte wiegen — mehr als der gesamte restliche Seiteninhalt. Das Ergebnis ist eine Seite, die auf dem Smartphone im Café spürbar zäh lädt, und ein schlechter LCP-Wert, den Google direkt im Ranking spürt. Die Lösung besteht aus drei Bausteinen: moderne Formate, die richtige Größe pro Gerät und Lazy-Loading. Dieser Artikel erklärt die drei — und wie next/image sie automatisiert.

10 Min Lesezeitvon Alexander MockPerformance & Design

Was Sie aus diesem Artikel mitnehmen

Würdigung — Bilder sind der größte Hebel

Wenn eine Kanzlei-Website langsam lädt, liegt es selten am Text und fast immer an den Bildern. Ein Foto, das direkt aus der Kamera oder vom Smartphone in die Website wandert, hat oft eine Auflösung von mehreren tausend Pixeln Breite und wiegt mehrere Megabyte — für eine Darstellung, die am Ende vielleicht 600 Pixel breit angezeigt wird. Der Browser lädt also ein Vielfaches dessen herunter, was er braucht.

Das ist der gute Teil der Nachricht: Weil Bilder der größte Posten sind, ist ihre Optimierung auch der größte Hebel. Wer hier ansetzt, halbiert oft die Ladezeit, ohne eine einzige Zeile am Design zu ändern. Und es wirkt direkt auf den LCP-Wert der Core Web Vitals — meist ist genau ein großes Hero-Bild das Element, das den LCP bestimmt.

Hinweis:

Ob auf Ihrer Seite überdimensionierte Bilder die Ladezeit bremsen, zeigt unser kostenfreier URL-Audit in rund 90 Sekunden — Bildgröße ist einer der häufigsten Performance-Befunde.

WebP und AVIF — moderne Formate statt JPEG und PNG

JPEG und PNG stammen aus den 1990er-Jahren. Die modernen Formate WebP und AVIF komprimieren deutlich effizienter: Bei vergleichbarer sichtbarer Qualität sparen sie häufig 30 bis 60 Prozent Dateigröße gegenüber einem JPEG. AVIF ist dabei meist noch sparsamer als WebP, WebP wird von praktisch allen Browsern unterstützt.

Der saubere Weg ist, beide Formate anzubieten und den Browser das beste wählen zu lassen, das er versteht — mit einem JPEG als Rückfall für sehr alte Browser. Von Hand ist das mühsam: Man müsste jedes Bild in mehreren Formaten erzeugen und im HTML korrekt verschachteln. Genau diese Arbeit nimmt einem ein Bild-Werkzeug ab (dazu unten).

Responsive Images — die richtige Größe pro Gerät

Das zweite Prinzip: Nicht jedes Gerät braucht dasselbe Bild. Ein Smartphone mit 400 Pixeln Breite sollte kein Bild laden, das für einen großen Desktop-Monitor gedacht ist. Über das srcset-Attribut bietet eine Seite dasselbe Bild in mehreren Größen an, und der Browser wählt die passende für Gerät und Bildschirm. Das spart auf dem Smartphone — also dort, wo die Verbindung oft am langsamsten ist — am meisten.

Das ist relevant, weil ein Großteil der Besucher einer Kanzlei-Website mobil kommt. Eine Seite, die jedem Smartphone das Desktop-Bild aufzwingt, verschenkt genau bei der wichtigsten Besuchergruppe Ladezeit.

Lazy-Loading — nur laden, was sichtbar wird

Das dritte Prinzip: Bilder, die erst weiter unten auf der Seite stehen, müssen nicht sofort geladen werden. Lazy-Loading (loading="lazy" am Bild) lädt ein Bild erst, wenn der Besucher es beim Scrollen fast erreicht. Eine lange Seite mit vielen Bildern lädt damit zu Beginn nur die paar Bilder, die sofort sichtbar sind — der Rest folgt bei Bedarf. Wichtig ist die Ausnahme: Das wichtigste Bild oberhalb der Falz (meist das Hero-Bild) sollte nicht lazy geladen werden, weil es ja sofort sichtbar ist und sonst den LCP verzögert.

Wie next/image die drei Bausteine automatisiert

Die gute Nachricht: Man muss diese drei Prinzipien nicht von Hand umsetzen. Auf fahoch2.de nutzen wir die Bild-Komponente von Next.js (next/image). Sie erzeugt automatisch moderne Formate (WebP/AVIF), liefert pro Gerät die passende Größe über srcset, setzt Lazy-Loading für nicht-sichtbare Bilder und reserviert über feste width/height den Platz im Layout — was das Springen verhindert und den CLS-Wert stabil hält. Aus einem einzigen eingebundenen Bild wird so im fertigen Ergebnis ein optimierter Satz, ohne dass jemand pro Bild Hand anlegt.

Das passt zur Foto-Strategie einer Kanzlei: Echte, selbst aufgenommene Team- und Büro-Fotos sind das Richtige (siehe Foto-Strategie) — sie müssen nur technisch sauber ausgeliefert werden, damit ihre Dateigröße die Seite nicht ausbremst.

Beispiel:

Ein typisches Muster aus URL-Audits: ein Hero-Foto mit mehreren Megabyte, direkt aus der Kamera, unkomprimiert. Eine Umstellung auf ein modernes Format in passender Größe würde dasselbe Bild auf wenige hundert Kilobyte schrumpfen lassen — bei optisch gleichem Eindruck und deutlich schnellerer mobiler Ladezeit. Wer wissen will, wie schwer die eigenen Bilder wiegen: ein Erstgespräch (30 Minuten, kostenfrei) ordnet es ein.

Für eine vollständige Performance-Bestandsaufnahme — Bilder, Core Web Vitals, Drittanbieter — empfehlen wir den Hebel-Audit (890 €, bei Mandanten-Boost-Beauftragung innerhalb von 60 Tagen voll anrechenbar).

Zusammenfassung

Bilder sind auf fast jeder Kanzlei-Website der größte Performance-Posten — und damit der größte Hebel. Drei Bausteine lösen das Problem: moderne Formate (WebP/AVIF) sparen 30 bis 60 Prozent Dateigröße, responsive Images liefern jedem Gerät die passende Größe (besonders wichtig fürs Smartphone), und Lazy-Loading lädt nur, was sichtbar wird — mit Ausnahme des Hero-Bilds, das sofort kommen muss. Von Hand ist das mühsam; next/image automatisiert alle drei und reserviert zugleich den Layout-Platz gegen Springen. Echte Fotos bleiben die richtige Wahl — sie müssen nur technisch sauber ausgeliefert werden. Der erste Schritt ist, das Gewicht der eigenen Bilder überhaupt zu kennen.

Quellen

Disclaimer: Allgemeine fachliche Information zum Zeitpunkt der Veröffentlichung. Genannte Einspar-Größen sind typische Erfahrungswerte, keine garantierten Werte; das tatsächliche Ergebnis hängt vom Ausgangsmaterial ab.

Stand und rechtlicher Hinweis

Erstveröffentlichung
Autor
Alexander Mock
Lesezeit
10 Minuten

Allgemeine Information, keine individuelle Beratung. Dieser Artikel beschreibt steuer-, berufs- oder webrechtliche Grundsystematik zum oben genannten Stand. Er ist nicht mandantenspezifisch und ersetzt keine individuelle Rechts-, Steuer- oder Anlage-Beratung im Sinne § 2 Rechtsdienstleistungsgesetz (RDG), § 1 Steuerberatungsgesetz (StBerG) oder § 34d/f Gewerbeordnung (GewO). Vor jeder konkreten Entscheidung wenden Sie sich an einen zugelassenen Steuerberater, Rechtsanwalt oder die jeweils zuständige Behörde.

Zitate aus amtlichen Werken. Gesetzes-Texte, Verwaltungsanweisungen (BMF-Schreiben) und Gerichts-Entscheidungen (BFH, BGH, BVerfG, EuGH) sind nach § 5 Urheberrechtsgesetz gemeinfrei. Zitiert wird jeweils mit Aktenzeichen und Entscheidungs- bzw. Schreibens-Datum. Aktualität der Rechtslage bitte vor Bezugnahme gegen die jeweilige amtliche Veröffentlichung prüfen (gesetze-im-internet.de, bundesfinanzhof.de, bmf.bund.de).

Externe Quellen. Wo wir auf Studien, Branchenstatistiken oder Drittanbieter-Dokumente verweisen, ist das Abrufs-Datum jeweils beim Quellenverweis angegeben. Online-Inhalte können sich nach unserem Abruf geändert haben.

Haftung. Trotz sorgfältiger Recherche können Ungenauigkeiten oder Rechtsänderungen nach Veröffentlichung nicht ausgeschlossen werden. Eine Haftung für Schäden, die durch die Nutzung der Information ohne anwaltliche oder steuerberaterliche Gegenprüfung entstehen, ist ausgeschlossen — soweit gesetzlich zulässig.

Themen

Bild-OptimierungWebPAVIFPerformancenext/imageSteuerberater

Auch zu lesen

Wenn Sie das in Ruhe besprechen möchten

Lassen Sie uns 30 Minuten zur Außen-Sicht Ihrer Kanzlei sprechen.

Erst gratis-Vorprüfung über das URL-Tool — dann entscheiden Sie, ob ein 890-€-Tiefen-Audit für Sie Sinn ergibt.

Kanzlei prüfen — gratisTermin direkt anfragen