Bilder für Website optimieren: WebP, AVIF und Ladezeit

Warum optimierte Bilder über den Erfolg deiner Website entscheiden

Bilder transportieren Emotion, schaffen Vertrauen und führen den Blick. Gleichzeitig sind sie der mit Abstand größte Ballast, den eine Seite mit sich herumträgt. Ein einziges unkomprimiertes Foto aus einer modernen Kamera kann mehrere Megabyte wiegen. Hat eine Seite zehn solcher Bilder, summiert sich das schnell auf ein Volumen, das auf einer mobilen Verbindung mehrere Sekunden Ladezeit kostet.

Diese Sekunden sind teuer. Jede zusätzliche Verzögerung erhöht die Absprungrate und drückt die Conversion. Bilder sind außerdem in den meisten Fällen das Element, das den Largest Contentful Paint bestimmt, also einen der zentralen Werte der Core Web Vitals, die Google in die Bewertung einbezieht. Wer seine Bilder optimiert, verbessert damit direkt die Nutzererfahrung und die Sichtbarkeit bei Google. Wie eng Bildgewicht und Performance zusammenhängen, vertiefen wir auch im Beitrag zum Thema Website Ladezeit optimieren.

Das passende Bildformat wählen: JPEG, PNG, WebP und AVIF

Der größte Hebel beginnt vor der Komprimierung, nämlich bei der Wahl des Formats. Jedes Format hat einen klaren Einsatzzweck, und die richtige Entscheidung spart Dateigröße, ohne dass die Qualität sichtbar leidet.

JPEG und PNG: die Klassiker mit Grenzen

JPEG eignet sich für Fotos mit vielen Farbverläufen, stößt bei der Komprimierung moderner Anforderungen aber an Grenzen. PNG ist die richtige Wahl für Grafiken mit Transparenz oder scharfen Kanten wie Logos und Icons, erzeugt bei Fotos jedoch unnötig große Dateien. Beide Formate funktionieren überall, sind für eine moderne Website allein aber selten die effizienteste Lösung.

WebP: der pragmatische Standard für 2026

WebP liefert gegenüber JPEG eine rund 25 bis 35 Prozent bessere Komprimierung bei vergleichbarer Qualität und unterstützt zugleich Transparenz. Über 97 Prozent aller Nutzer weltweit können WebP ohne Probleme anzeigen, weil alle modernen Browser das Format verstehen. Für die meisten Unternehmenswebsites ist WebP daher der pragmatische Standard: schnell kodiert, breit unterstützt und deutlich leichter als die klassischen Formate.

AVIF: maximale Kompression für moderne Projekte

AVIF basiert auf der AV1 Videokompression und erzielt nochmals höhere Kompressionsraten als WebP bei geringem Qualitätsverlust. Eine Seite mit zehn Bildern kann beim Wechsel von WebP zu AVIF mehrere Hundert Kilobyte sparen. Der Preis dafür ist eine deutlich längere Kodierungszeit. Für neue Projekte mit moderner Infrastruktur liefert die Kombination aus AVIF mit WebP als Fallback die besten Ergebnisse. So bekommt jeder Browser automatisch die kleinste Variante, die er darstellen kann.

Bilder richtig komprimieren ohne sichtbaren Qualitätsverlust

Hat das Format gestimmt, geht es an die Komprimierung. Hier gilt es, den Punkt zu finden, an dem die Datei so klein wie möglich ist, das Auge aber keinen Unterschied erkennt. Für Fotos liegt dieser Sweet Spot bei einer Qualitätsstufe von etwa 80 bis 85 Prozent. In diesem Bereich schrumpft die Datei drastisch, während der visuelle Unterschied auf einem normalen Bildschirm nicht wahrnehmbar ist.

Wichtig ist die Reihenfolge im Workflow: zuerst die Bildmaße auf die tatsächlich benötigte Anzeigegröße bringen, dann komprimieren. Ein Bild, das nur 800 Pixel breit dargestellt wird, sollte nicht in 4000 Pixel Breite ausgeliefert werden. Diese Skalierung allein spart oft mehr als jede nachträgliche Komprimierung. Wer beim Bildmaterial ohnehin neu plant, sollte zugleich überlegen, wann eigene Fotos und wann KI Bilder die bessere Wahl sind. Eine Entscheidungshilfe dazu findest du in unserem Beitrag zu KI Bildern für Websites.

Bei der Komprimierung lohnt sich außerdem die Unterscheidung zwischen verlustbehafteten und verlustfreien Verfahren. Fotos vertragen eine verlustbehaftete Komprimierung sehr gut, weil das Auge feine Unterschiede in Farbverläufen kaum bemerkt. Grafiken mit klaren Flächen und Text profitieren dagegen von einer verlustfreien Optimierung, die Kanten scharf hält. Ein guter Bildexport berücksichtigt diesen Unterschied automatisch, statt jedes Bild über denselben Kamm zu scheren. Auch Metadaten wie Kamerainformationen oder GPS Angaben lassen sich beim Export entfernen, was die Datei zusätzlich verkleinert und nebenbei den Datenschutz verbessert.

Responsive Bilder und die richtige Auflösung für jedes Gerät

Ein Bild, das auf dem Desktop großartig aussieht, ist auf dem Smartphone oft unnötig schwer. Responsive Bilder lösen dieses Problem, indem sie dem Browser mehrere Größen anbieten und ihn die passende auswählen lassen. Technisch geschieht das über das Attribut srcset zusammen mit sizes im img Element oder über das picture Element für unterschiedliche Formate.

So lädt ein Smartphone eine kompakte Version, während der große Monitor die hochauflösende Variante erhält. Gerade weil der Großteil des Traffics heute mobil ist, gehört diese Technik zum Pflichtprogramm. Wie konsequent du Inhalte zuerst für kleine Bildschirme planen solltest, beschreiben wir im Beitrag über Mobile First Webdesign. Achte zusätzlich darauf, jedem img Element feste Werte für Breite und Höhe mitzugeben, damit der Browser den Platz reserviert und das Layout beim Laden nicht springt.

Lazy Loading und Ladereihenfolge gezielt steuern

Nicht jedes Bild muss sofort geladen werden. Lazy Loading sorgt dafür, dass Bilder erst dann geladen werden, wenn sie in den sichtbaren Bereich rücken. Moderne Browser beherrschen das nativ über das Attribut loading="lazy". Das reduziert die anfängliche Datenlast spürbar und beschleunigt den ersten Bildaufbau.

Eine wichtige Ausnahme bildet das große Bild im oberen Bereich, etwa in der Hero Section. Dieses Bild ist meist für den Largest Contentful Paint verantwortlich und sollte deshalb gerade nicht verzögert, sondern priorisiert geladen werden. Die Faustregel lautet: das sichtbare Hauptbild bevorzugt laden, alles weiter unten verzögern. So fühlt sich die Seite vom ersten Moment an schnell an.

Bilder SEO: Alt Texte, Dateinamen und Sichtbarkeit bei Google

Optimierte Bilder zahlen nicht nur auf die Performance ein, sondern auch auf die Sichtbarkeit. Suchmaschinen können den Inhalt eines Bildes nicht sehen, sondern verlassen sich auf den Kontext. Sprechende Dateinamen wie webdesign-agentur-buero.webp statt IMG_4821.jpg liefern dafür ein erstes Signal.

Noch wichtiger ist der Alt Text. Er beschreibt das Bild in einem kurzen, präzisen Satz und erfüllt eine doppelte Funktion: Er hilft Suchmaschinen beim Einordnen und macht das Bild für Screenreader zugänglich. Damit ist der Alt Text zugleich ein Baustein für eine barrierefreie Website, die seit 2025 für viele Unternehmen verpflichtend ist. Beschreibe darin, was tatsächlich zu sehen ist, und baue das Hauptkeyword nur dann ein, wenn es zum Bild passt.

Über die Bildersuche von Google erschließt sich darüber hinaus ein eigener Kanal für Sichtbarkeit. Gut benannte und beschriebene Bilder können dort ranken und zusätzlichen Traffic auf deine Website bringen. Wer Produkte, Referenzen oder Standorte zeigt, sollte diesen Kanal nicht ungenutzt lassen. Hilfreich ist außerdem, Bilder in einer Sitemap zu erfassen, damit Suchmaschinen sie zuverlässig finden und indexieren. So wird aus jedem optimierten Bild nicht nur ein schnelleres, sondern auch ein auffindbares Element deiner Seite.

Typische Fehler bei der Bildoptimierung vermeiden

Drei Fehler tauchen in der Praxis immer wieder auf. Erstens werden Bilder in voller Kameraauflösung hochgeladen und vom CMS nur per CSS verkleinert. Der Browser lädt dann trotzdem die riesige Originaldatei. Zweitens fehlt jede Komprimierung, weil das Bild optisch ja gut aussieht, obwohl es ein Vielfaches der nötigen Größe wiegt. Drittens werden Alt Texte und Dateinamen komplett ignoriert, womit wertvolles Potenzial für die Sichtbarkeit verschenkt wird.

Diese Punkte lassen sich mit einem klaren Workflow leicht vermeiden. Wer eine bestehende Seite überarbeitet, sollte die Bildoptimierung fest in den Ablauf eines Website Relaunch aufnehmen, statt sie als Nebensache zu behandeln. Ein kurzer Test der wichtigsten Seiten mit einem Performance Werkzeug zeigt schnell, wo die schwersten Bilder liegen.

Fazit: Schnelle Bilder sind ein echter Wettbewerbsvorteil

Bilder für die Website zu optimieren ist keine einmalige Aufgabe, sondern fester Bestandteil professioneller Webarbeit. Das richtige Format, eine saubere Komprimierung, responsive Auslieferung, sinnvolles Lazy Loading und durchdachte Alt Texte ergeben zusammen eine Seite, die schneller lädt, besser rankt und mehr Besucher zu Kunden macht.

Wenn du deine Website grundlegend schneller und sichtbarer machen möchtest, unterstützen wir dich gern dabei. Auf unserer Startseite erfährst du, wie wir bei HORUS Studios Performance, Design und SEO von Beginn an zusammen denken.