Bilder fürs Web optimieren 2026: schneller mit AVIF

Sie befinden sich: Home > News Archiv > Webmaster > Bilder fürs Web opti...

Bilder sind auf den meisten Seiten der größte Bremsklotz für die Ladezeit und damit fürs Google-Ranking. Mit modernen Formaten, richtiger Komprimierung und cleverem Lazy Loading laden Ihre Seiten spürbar schneller.

Wenn eine Website quälend langsam lädt, sind fast immer die Bilder schuld. Sie machen auf einer typischen Seite mit Abstand den größten Teil der übertragenen Datenmenge aus, oft ein Vielfaches von Text und Code zusammen. Und weil Google die Ladezeit als Ranking-Faktor wertet, kosten schwere Bilder nicht nur Geduld, sondern auch Sichtbarkeit.

Die gute Nachricht: Kaum eine Stellschraube wirkt so stark und ist so leicht zu drehen. Wer Bilder ins richtige Format bringt, sinnvoll komprimiert und clever lädt, verkürzt die Ladezeit spürbar. Dieser Leitfaden zeigt Schritt für Schritt, worauf es 2026 ankommt.

Warum Bilder die Ladezeit bremsen

Auf einer durchschnittlichen mobilen Seite entfallen rund 911 Kilobyte allein auf Bilder, das ist der größte einzelne Posten noch vor dem JavaScript. Entscheidend ist dabei ein Messwert namens Largest Contentful Paint, der erfasst, wann das größte sichtbare Element geladen ist. Auf 73 Prozent aller mobilen Seiten ist genau dieses Element ein Bild.

Damit hat Bildoptimierung direkten Einfluss auf die Core Web Vitals und damit auf das Ranking. Dass sich das lohnt, zeigt eine Fallstudie von Google: Als der Mobilfunkanbieter Vodafone seinen LCP-Wert um 31 Prozent verbesserte, stiegen die Verkäufe um 8 Prozent. Schnellere Bilder bedeuten also nicht nur zufriedene Besucher, sondern oft auch mehr Umsatz. Schlanke Bilder schonen zugleich das mobile Datenvolumen und die Umwelt, weil schlicht weniger Daten durch das Netz wandern. Der erste Hebel dafür ist die Wahl des Formats.

Das richtige Format wählen

Nicht jedes Bildformat eignet sich für jeden Zweck. Fotos brauchen ein anderes Format als ein Logo, und Transparenz stellt eigene Anforderungen. Diese Übersicht ordnet die wichtigsten Formate ein:

Format	Wofür	Stärke	Schwäche
JPEG	Fotos, Rückfallebene	überall nutzbar	keine Transparenz, größer als moderne Formate
PNG	Grafiken mit Text, Transparenz	gestochen scharf	sehr groß für Fotos
WebP	solides Standardformat	25 bis 34 Prozent kleiner als JPEG	etwas schwächer als AVIF
AVIF	Fotos, großes Hauptbild	20 bis 40 Prozent kleiner als WebP	langsameres Erzeugen
SVG	Logos, Icons	beliebig skalierbar, winzig	nur für Vektorgrafik

Für die Praxis 2026 lautet die Empfehlung: AVIF als Hauptformat, mit WebP und JPEG als Rückfallebene für ältere Browser. Das klingt kompliziert, lässt sich in WordPress aber per Plugin automatisch erledigen. AVIF erreicht inzwischen rund 94 Prozent aller Browser und liefert die kleinsten Dateien. Für Logos und Symbole ist SVG die beste Wahl, weil es als Vektorgrafik bei jeder Größe scharf bleibt. Ein Sicherheitshinweis dazu: SVG-Dateien können versteckten Schadcode enthalten, deshalb sollten Sie fremde SVGs vor dem Hochladen bereinigen lassen, wie es unser Leitfaden zum Absichern von WordPress näher erklärt. Ein Sonderfall ist das Format JPEG XL: Trotz einer Rückkehr in Chrome ist es dort noch nicht standardmäßig aktiv und taugt daher vorerst nicht als Hauptformat. Ist das Format gewählt, folgt der nächste Schritt, die Komprimierung.

Richtig komprimieren

Komprimierung verkleinert die Datei, indem sie Bildinformationen einspart. Dabei gibt es zwei Wege: Die verlustbehaftete Variante wirft Daten weg und wird deutlich kleiner, ideal für Fotos. Die verlustfreie erhält jedes Pixel und eignet sich für Grafiken mit Text oder scharfen Kanten. Ein bewährter Mittelweg bei der Qualität liegt zwischen 75 und 85 Prozent, darunter werden Artefakte sichtbar, darüber wächst die Datei ohne erkennbaren Gewinn.

Wichtig ist außerdem, die versteckten Metadaten zu entfernen. Jedes Foto trägt Angaben zu Kamera, Ort und Software mit sich, die fürs Web unnötig sind und sogar die Privatsphäre verletzen können. Zum Komprimieren gibt es zahlreiche Werkzeuge:

Werkzeug	Typ	Besonderheit
Squoosh	Online, von Google	direkter Vorher-nachher-Vergleich, läuft lokal im Browser
TinyPNG	Online	starke Komprimierung, auch als WordPress-Plugin
ImageOptim	Programm für Mac	verlustfrei, stapelweise, alles lokal
ImageMagick	Kommandozeile	Umwandeln, Verkleinern und Metadaten entfernen im Stapel
Squoosh und cwebp	Online und Kommandozeile	erzeugen gezielt WebP und AVIF

Wer viele Bilder auf einmal bearbeitet, ist mit einem Stapel-Werkzeug oder direkt mit einem WordPress-Plugin besser bedient als mit Handarbeit. Neben dem Format und der Komprimierung entscheidet aber noch ein dritter Punkt über das Gewicht: die schiere Größe.

Größe und responsive Bilder

Der häufigste Fehler ist, ein riesiges Bild in einen kleinen Rahmen zu zwingen. Ein 4000 Pixel breites Foto in einem 800 Pixel breiten Container verschwendet enorm viel Datenmenge, ohne dass der Besucher etwas davon sieht. Skalieren Sie Bilder deshalb auf die tatsächlich angezeigte Größe herunter, das bringt oft mehr als die Komprimierung selbst.

Damit ein Bild auf dem Handy und auf dem großen Monitor gleichermaßen passt, gibt es sogenannte responsive Bilder. Über das Attribut srcset hinterlegen Sie mehrere Größen, aus denen der Browser die passende auswählt. Zwei weitere Punkte sind dabei wichtig:

• Für hochauflösende Displays lohnt die doppelte Größe, mehr als das Zweifache bringt jedoch kaum sichtbaren Gewinn bei viel mehr Datenmenge.
• Geben Sie jedem Bild feste Angaben für Breite und Höhe mit, damit der Browser den Platz reserviert und das Layout beim Laden nicht verspringt.

Gerade das Verspringen des Layouts ist ein eigener Core-Web-Vitals-Wert und ärgert Besucher spürbar. Ist die Größe im Griff, bleibt die Frage, wann welches Bild überhaupt geladen wird.

Lazy Loading richtig einsetzen

Lazy Loading bedeutet, dass Bilder erst geladen werden, wenn der Besucher zu ihnen scrollt. Das spart beim ersten Aufruf viel Datenmenge, weil Bilder weiter unten auf der Seite zunächst außen vor bleiben. Aktivieren lässt sich das mit der Angabe loading="lazy", die alle modernen Browser verstehen.

Doch hier lauert der wichtigste Fehler überhaupt, den erstaunlich viele Seiten machen:

• Das große Bild ganz oben, das den ersten Eindruck prägt, darf niemals per Lazy Loading geladen werden. Es ist meist das für das Ranking entscheidende Element und muss sofort erscheinen.
• Diesem wichtigsten Bild geben Sie stattdessen die Angabe fetchpriority="high" mit, damit der Browser es bevorzugt lädt.
• Alle übrigen Bilder unterhalb des sichtbaren Bereichs profitieren dagegen vom verzögerten Laden.

Immerhin rund jede zehnte mobile Seite lädt ihr wichtigstes Bild fälschlich verzögert und verschlechtert damit genau den Wert, den sie verbessern will. In einem Test von Google sank die Ladezeit des Hauptbildes von 2,6 auf 1,9 Sekunden, nur weil es bevorzugt geladen wurde. Wie ein Bild überhaupt zum Besucher gelangt, entscheidet schließlich über das letzte Stück Tempo.

Ausliefern über ein CDN

Selbst ein perfekt optimiertes Bild ist nur so schnell wie der Weg, den es bis zum Besucher zurücklegt. Hier hilft ein Content Delivery Network, kurz CDN. Es spiegelt Ihre Bilder auf viele über die Welt verteilte Server, sodass sie stets aus der Nähe des Nutzers ausgeliefert werden. Viele dieser Dienste optimieren und konvertieren die Bilder zusätzlich automatisch ins passende Format.

Dienst	Besonderheit
Cloudflare	tief ins CDN integriert, einfache automatische Optimierung
Bunny Optimizer	sehr günstig und unkompliziert
Imgix	mächtige Umwandlungen in Echtzeit
Cloudinary	sehr umfangreich, auch für Video, dafür teurer

Zwei weitere Stellschrauben verbessern die Auslieferung. Erstens ein langes Zwischenspeichern: Weisen Sie den Browser an, einmal geladene Bilder lange zu behalten, dann muss ein wiederkehrender Besucher sie gar nicht erneut herunterladen. Zweitens moderne Übertragungsstandards wie HTTP/2 und HTTP/3, die mehrere Bilder gleichzeitig und ohne gegenseitige Blockade übertragen. Für Nutzer von WordPress ist die gute Nachricht, dass das System vieles davon schon von Haus aus mitbringt.

WordPress und die richtigen Plugins

WordPress nimmt einem viel Arbeit ab. Beim Hochladen erzeugt es automatisch mehrere Bildgrößen und liefert sie passend zum Gerät aus. Seit Version 5.5 lädt es Bilder von sich aus verzögert und lässt das wichtigste Bild oben bewusst aus, seit Version 6.5 versteht es sogar das moderne AVIF-Format. Den Rest übernehmen spezialisierte Plugins:

Plugin	Stärke	Für wen
ShortPixel	sehr gute Komprimierung, AVIF, faires Mengenmodell	Shops und große Seiten
Imagify	starke Komprimierung, einfach zu bedienen	Blogs und kleine Unternehmen
EWWW	Verarbeitung auch komplett lokal möglich	datenschutzbewusste Betreiber
Optimole	Auslieferung über eigenes CDN inklusive	Seiten mit viel Verkehr
Converter for Media	kostenlose Umwandlung in WebP und AVIF	Einsteiger mit kleinem Budget

In unabhängigen Tests liefern ShortPixel und Imagify die besten Ergebnisse, während die kostenlose Version von Smush am schwächsten komprimiert. Anbieter werben gern mit Reduktionen von über 90 Prozent, doch solche Werte gelten nur für Extremfälle. Wichtig ist auch, nur ein einziges Plugin fürs verzögerte Laden zu nutzen, sonst geraten sich die Erweiterungen in die Quere. Mit diesem Wissen lässt sich der gesamte Ablauf in eine klare Reihenfolge bringen.

Schritt für Schritt und messen

Ein sauberer Ablauf für jedes Bild folgt wenigen Schritten:

1. Das passende Format wählen, also AVIF für Fotos und SVG für Logos.
2. Das Bild auf die tatsächlich angezeigte Größe herunterskalieren.
3. Mit einer Qualität zwischen 75 und 85 Prozent komprimieren und Metadaten entfernen.
4. Mehrere Größen für verschiedene Geräte hinterlegen.
5. Feste Breite und Höhe angeben, um ein Verspringen zu verhindern.
6. Bilder unterhalb des sichtbaren Bereichs verzögert laden, das Hauptbild dagegen bevorzugt.
7. Ein CDN und lange Zwischenspeicherung fürs Ausliefern nutzen.

Zum Abhaken die wichtigsten Punkte einer gut optimierten Seite:

• Modernes Format mit Rückfallebene im Einsatz.
• Kein Bild größer als nötig, Qualität bei 75 bis 85 Prozent.
• Mehrere Größen hinterlegt, Breite und Höhe gesetzt.
• Hauptbild lädt sofort, der Rest verzögert.
• Aussagekräftiger Dateiname und Alt-Text vergeben.

Ob sich die Mühe gelohnt hat, zeigen kostenlose Werkzeuge wie Googles PageSpeed Insights, der eingebaute Lighthouse-Bericht im Chrome-Browser oder die Core Web Vitals in der Search Console. Ein letzter Punkt lohnt sich doppelt: Der Alt-Text, der ein Bild beschreibt, hilft nicht nur der Barrierefreiheit und blinden Nutzern, sondern auch der Bildersuche. Erstaunliche 45 Prozent aller Bilder im Web haben bis heute keinen solchen Text, dabei ist er schnell ergänzt und bringt gleich doppelten Nutzen.

Wie schnell lädt Ihre Seite?

Haben Sie Ihre Bilder schon einmal systematisch optimiert, und wie stark hat sich die Ladezeit verbessert? Schreiben Sie in die Kommentare, welches Plugin oder Werkzeug Sie nutzen und welches Format sich für Sie bewährt hat. Wenn Sie bei einem Schritt wie AVIF oder dem verzögerten Laden unsicher sind, fragen Sie ruhig konkret nach, oft hilft die Antwort gleich mehreren Lesern weiter.

komprimierung avif ladezeit loading lazy modernen

Webung: Hier bekommen Sie PHP fähigen Webspace der mit Ökostrom betrieben wird ab bereits 2 Euro/ Monat für ihre Homepage. Zusätzlich ist eine eigene Internetadresse mit enthalten.

Neusten News in der Kategorie "Webmaster"

• WordPress absichern 2026: Schutz vor Hackerangriffen WordPress ist das beliebteste Ziel automatisierter Angriffe, neue Lück...

• Website umziehen 2026: ohne Ausfall und Ranking-Verlust Ein Hosting-Wechsel kann die Seite tagelang lahmlegen oder das Google-...

• E-Mail-Zustellbarkeit 2026: Raus aus dem Spam-Ordner Bestellbestätigungen, Newsletter und Kontaktmails landen plötzlich im ...

• Website-Backups 2026: Die Strategie gegen Datenverlust Ein Hack, ein fehlgeschlagenes Update, ein Serverausfall, und die Seit...

• Cookie-Banner 2026: Was jetzt wirklich Pflicht ist Cookie-Banner verschwinden 2026 doch nicht. Welche Regeln gelten, welc...

• Core Web Vitals 2026: Was beim Ranking wirklich zählt Mehr als vier von zehn Websites fallen bei Googles Core Web Vitals dur...

• NIS2 in Deutschland: Wer betroffen ist und was gilt Seit Dezember 2025 gilt in Deutschland das NIS2-Gesetz, und zwar ohne ...

• Passkeys statt Passwörter: Ratgeber für Webmaster Passwörter gelten als das schwächste Glied der Sicherheit. Passkeys so...

• CVE-2026-54420: LiteSpeed-cPanel-Lücke wird ausgenutzt Eine kritische Lücke im LiteSpeed-Plugin für cPanel wird bereits aktiv...

• Neuer KI-Bericht in der Google Search Console erklärt Seit Juni 2026 zeigt die Google Search Console endlich, wie oft Ihre S...