Bilder machen auf den meisten Webseiten über die Hälfte der gesamten Dateigröße aus. Wenn du eine schnelle, benutzerfreundliche Seite willst, ist die Optimierung deiner Bilder einer der wirksamsten Hebel. Langsame Ladezeiten führen nicht nur zu frustrierten Besuchern, sondern auch zu schlechteren Google-Rankings. In diesem Leitfaden zeige ich dir Schritt für Schritt, wie du deine Bilder professionell optimierst, ohne dabei sichtbar an Qualität zu verlieren. Dabei gehen wir auf die technischen Hintergründe ein, vergleichen verschiedene Formate und schauen uns die Core Web Vitals im Detail an.
Warum Bildgröße entscheidend ist: Ein einzelnes Foto von einem modernen Smartphone hat typischerweise eine Auflösung von 12 bis 50 Megapixeln. Als unkomprimiertes JPEG landet so ein Bild schnell bei 3 bis 8 MB. Wenn du auf deiner Webseite zehn solcher Bilder einbindest, ergibt das schon 30 bis 80 MB an Daten, die der Browser herunterladen muss. Bei einer mobilen Verbindung mit 10 Mbit/s dauert der Download von 80 MB rund 64 Sekunden. Das ist absurd lang. Google empfiehlt, dass der Largest Contentful Paint unter 2,5 Sekunden liegt. Mit unkomprimierten Smartphone-Fotos ist das schlicht unmöglich. Selbst bei einer schnellen Breitbandverbindung mit 50 Mbit/s würde das Laden von 80 MB noch über 12 Sekunden dauern. Jede Sekunde Ladezeit kostet dich Besucher. Studien zeigen, dass 53 Prozent der mobilen Nutzer eine Seite verlassen, wenn sie länger als 3 Sekunden lädt.
Wie Bildkomprimierung technisch funktioniert: Verlustbehaftete Kompression, wie sie bei JPEG zum Einsatz kommt, analysiert, was das menschliche Auge nicht oder kaum wahrnehmen kann. Der Algorithmus teilt das Bild in 8x8-Pixel-Blöcke auf und wendet eine sogenannte diskrete Kosinustransformation (DCT) an. Dabei werden die Farbinformationen in Frequenzen zerlegt. Hochfrequente Details, also sehr feine Farbunterschiede zwischen benachbarten Pixeln, werden reduziert oder ganz entfernt. Ähnliche Farbtöne werden zusammengefasst, weil das Auge in vielen Bereichen keine Unterschiede bemerkt. So lassen sich 60 bis 80 Prozent der Dateigröße einsparen, ohne dass der Qualitätsverlust bei normaler Betrachtung auffällt. Im Browser nutzt Formidex die Canvas API, um Bilder zu dekodieren, zu verarbeiten und mit der gewünschten Qualitätsstufe neu zu kodieren. Das alles passiert lokal in deinem Browser, ohne Serveranbindung.
Welches Format für welchen Zweck: Die Wahl des Bildformats hat enormen Einfluss auf die Dateigröße. PNG ist ein verlustfreies Format, das jedes einzelne Pixel exakt erhält. Das macht es ideal für Screenshots, Logos, Icons und Grafiken mit scharfen Kanten oder Text. Für Fotos ist PNG allerdings viel zu groß: Ein typisches Foto im PNG-Format belegt 5 bis 15 MB. JPEG existiert seit 1992 und nutzt die bereits beschriebene DCT-Kompression. Bei einer Qualitätsstufe von 80 Prozent spart JPEG typischerweise 70 bis 80 Prozent gegenüber PNG, bei kaum sichtbarem Qualitätsverlust. WebP wurde 2010 von Google entwickelt und kombiniert die Vorteile beider Welten: Es unterstützt sowohl verlustfreie als auch verlustbehaftete Kompression und liefert bei gleicher visueller Qualität Dateien, die 25 bis 35 Prozent kleiner sind als JPEG. Alle modernen Browser, also Chrome, Firefox, Safari, Edge und Opera, unterstützen WebP vollständig. AVIF basiert auf dem AV1-Videocodec und geht noch einen Schritt weiter: Es erreicht bei gleicher Qualität Dateigrößen, die etwa 20 Prozent unter WebP liegen. Die Browserunterstützung wächst stetig, Chrome und Firefox unterstützen AVIF bereits seit 2021, Safari seit Version 16.
Core Web Vitals im Detail: Google hat 2020 die Core Web Vitals als offizielle Ranking-Signale eingeführt. Sie bestehen aus drei Metriken. Der Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte sichtbare Element vollständig gerendert ist. Google empfiehlt einen LCP-Wert unter 2,5 Sekunden. Auf den meisten Webseiten ist das größte sichtbare Element ein Bild, typischerweise ein Hero-Bild oder ein großes Produktfoto. Wenn dieses Bild zu groß ist, wird dein LCP-Wert automatisch schlecht. Die zweite Metrik ist Interaction to Next Paint (INP), die misst, wie schnell die Seite auf Nutzereingaben reagiert. Große Bilder, die den Hauptthread blockieren, können auch hier negativ wirken. Die dritte Metrik ist der Cumulative Layout Shift (CLS), der misst, wie stark sich das Layout beim Laden verschiebt. Bilder ohne definierte Breite und Höhe verursachen Layout-Verschiebungen, wenn sie nachladen. Von diesen drei Metriken betreffen Bilder den LCP am stärksten, weshalb Bildoptimierung der effektivste Hebel für bessere Core Web Vitals ist.
Bei der Kompression unterscheidet man zwischen verlustfreier und verlustbehafteter Kompression. Verlustfreie Kompression reduziert die Dateigröße, ohne dass Bilddetails verloren gehen. Das klingt gut, aber die Einsparungen sind begrenzt, oft nur 10 bis 30 Prozent. Verlustbehaftete Kompression kann die Dateigröße um 60 bis 80 Prozent reduzieren. Der Trick ist, die Qualitätsstufe so zu wählen, dass der Unterschied mit bloßem Auge kaum sichtbar ist. Für die meisten Webbilder reicht eine Qualitätsstufe von 75 bis 85 Prozent völlig aus. Unterhalb von 60 Prozent werden Artefakte oft deutlich sichtbar, besonders an Kanten und in Bereichen mit feinen Farbverläufen. Oberhalb von 90 Prozent sinkt die Dateigröße kaum noch, während die Qualität sich kaum verbessert. Der Sweet Spot liegt also wirklich bei 75 bis 85 Prozent.
So nutzt du das Compress-Tool von Formidex: Öffne das Tool und ziehe dein Bild per Drag-and-Drop in den Upload-Bereich oder wähle es über den Datei-Dialog aus. Du kannst auch ein Bild direkt aus der Zwischenablage einfügen. Im nächsten Schritt wählst du die gewünschte Qualitätsstufe über den Schieberegler. Starte mit 80 Prozent und vergleiche das Ergebnis mit dem Original. Wenn du keinen Unterschied siehst, kannst du die Qualität weiter reduzieren. Das Tool zeigt dir in Echtzeit die resultierende Dateigröße an, sodass du die Einsparung sofort siehst. Wenn du zufrieden bist, lädst du das komprimierte Bild herunter. Der gesamte Prozess findet in deinem Browser statt. Dein Bild wird zu keinem Zeitpunkt auf einen Server hochgeladen.
Responsive Bilder sorgen dafür, dass jedes Gerät die passende Bildgröße erhält. Es macht keinen Sinn, einem Smartphone ein 4000 Pixel breites Bild zu senden, wenn das Display nur 400 Pixel breit ist. Mit dem srcset-Attribut in HTML kannst du verschiedene Bildgrößen definieren, und der Browser wählt automatisch die passende. Eine sinnvolle Strategie ist, drei bis vier Varianten zu erstellen: 400 Pixel für Smartphones, 800 Pixel für Tablets, 1200 Pixel für Desktops und eventuell 1600 Pixel für Retina-Displays. Bei einem typischen Foto reduziert allein die Verkleinerung von 4000 auf 800 Pixel die Dateigröße um etwa 75 Prozent, noch bevor du überhaupt komprimierst. In Kombination mit verlustbehafteter Kompression erreichst du leicht Einsparungen von über 90 Prozent. Das Formidex Resize-Tool hilft dir, schnell alle benötigten Größen zu erzeugen.
Lazy Loading ist eine weitere effektive Technik. Dabei werden Bilder erst geladen, wenn sie in den sichtbaren Bereich des Browsers scrollen. Das bedeutet: Bilder unterhalb des sichtbaren Bereichs blockieren nicht mehr den initialen Seitenaufbau. In modernem HTML reicht dafür das Attribut loading="lazy" am img-Element. Für Bilder, die sofort sichtbar sind, also im sogenannten Above-the-fold-Bereich, solltest du kein Lazy Loading verwenden. Diese Bilder sollten priorisiert geladen werden, idealerweise mit dem fetchpriority-Attribut. Der Unterschied ist spürbar: Bei einer Seite mit 20 Bildern, von denen nur 3 im sichtbaren Bereich liegen, reduziert Lazy Loading die initiale Ladezeit drastisch.
Ein oft übersehener Aspekt ist das korrekte Setzen von Breite und Höhe im HTML. Wenn der Browser die Abmessungen eines Bildes kennt, bevor es geladen ist, kann er den entsprechenden Platz im Layout reservieren. Ohne diese Angaben springt das Layout, sobald das Bild nachlädt. Das verschlechtert den CLS-Wert deiner Core Web Vitals. Moderne Frameworks wie Next.js setzen Breite und Höhe automatisch, aber wenn du HTML manuell schreibst, solltest du diese Attribute immer angeben.
Für fortgeschrittene Optimierung lohnt sich ein Blick auf das picture-Element in HTML. Damit kannst du verschiedene Formate für verschiedene Browser anbieten. Der Browser wählt dann automatisch das beste verfügbare Format. So kannst du AVIF für Browser bereitstellen, die es unterstützen, WebP als Fallback und JPEG als letzte Option. In der Praxis sieht das so aus: Du erstellst drei Versionen jedes Bildes, AVIF, WebP und JPEG, und listest sie im picture-Element auf. Der Browser lädt nur die erste Version, die er unterstützt. So profitieren moderne Browser von den besten Formaten, während ältere Browser weiterhin funktionieren.
Auch die Bildabmessungen an sich spielen eine Rolle. Viele Webentwickler laden Bilder in der Originalgröße der Kamera hoch und lassen CSS die Größe anpassen. Das ist verschwendete Bandbreite. Wenn ein Bild auf deiner Seite maximal 1200 Pixel breit angezeigt wird, gibt es keinen Grund, ein 4000 Pixel breites Original auszuliefern. Skaliere das Bild vorher auf die tatsächlich benötigte Größe herunter. Für Retina-Displays reicht die doppelte Anzeigegröße, also 2400 Pixel für ein 1200-Pixel-Display.
Zusammengefasst ergibt sich eine klare Optimierungsstrategie: Wähle das richtige Format, wobei WebP für die meisten Fälle ideal ist. Komprimiere mit einer Qualität von 75 bis 85 Prozent. Erstelle responsive Varianten in verschiedenen Größen. Nutze Lazy Loading für Bilder unterhalb des sichtbaren Bereichs. Setze immer Breite und Höhe im HTML. Nutze das picture-Element für Format-Fallbacks. Und vergiss nicht, deine Bilder mit aussagekräftigen Alt-Texten zu versehen. Mit dem Formidex Convert-Tool kannst du Bilder bequem in WebP oder AVIF umwandeln. In Kombination mit Compress und Resize hast du alle Werkzeuge, die du brauchst, direkt im Browser und ohne dass deine Bilder auf einen fremden Server hochgeladen werden.