Bilder komprimieren für Websites (Speed Guide)

Deine Website hat ein Geschwindigkeitsproblem. Und der Hauptschuldige sind fast sicher deine Bilder.

Bilder machen über die Hälfte des Gesamtgewichts der meisten Webseiten aus. Ein einzelnes nicht optimiertes Foto kann größer sein als dein gesamtes HTML, CSS und JavaScript zusammen. Dieses Extragewicht verlangsamt den Seitenaufbau, nervt Besucher und schadet deinen Suchmaschinen-Rankings.

Die gute Nachricht? Bilder komprimieren ist schnell, einfach und die Ergebnisse sind enorm. Dieser Guide zeigt dir genau, wie du Bilder fürs Web komprimierst. Die richtigen Einstellungen, die richtigen Formate und den richtigen Workflow für die kleinsten Dateien ohne sichtbaren Qualitätsverlust.

Warum machen unkomprimierte Bilder deine Website langsam?

Jedes Mal, wenn jemand deine Seite besucht, lädt der Browser jedes Bild herunter. Größere Dateien brauchen länger zum Download. Längere Downloads bedeuten langsamere Seiten.

Hier einige typische Zahlen. Ein Foto direkt von der Kamera kann 5-8 MB groß sein. Ein Screenshot von einem Retina-Display kann 2-3 MB haben. Selbst Bilder aus Design-Tools wie Figma oder Canva sind oft 500 KB bis 1 MB groß.

Jetzt multipliziere das mit der Anzahl der Bilder auf deiner Seite. Ein Blogpost mit 5 nicht optimierten Fotos kann leicht 15-25 MB allein an Bildern wiegen. Über eine mobile Verbindung dauert das 10+ Sekunden zum Laden. Die meisten Besucher gehen nach 3 Sekunden.

Googles Daten zeigen: Wenn die Ladezeit von 1 auf 3 Sekunden steigt, erhöht sich die Absprungrate um 32%. Von 1 auf 5 Sekunden steigt sie um 90%. Schwere Bilder sind der Hauptgrund, warum Seiten diese Schwellen überschreiten.

Komprimierung löst das. Ein gut komprimiertes Bild sieht fast identisch mit dem Original aus, wiegt aber 80-95% weniger. Das 5 MB große Produktfoto wird zu 150 KB. Deine Seite lädt in 2 Sekunden statt in 8.

Welche Qualitätseinstellung solltest du für Webbilder verwenden?

Der Qualitätsregler ist die wichtigste Einstellung beim Komprimieren. Zu hoch und die Dateien bleiben groß. Zu niedrig und sie sehen schlecht aus. So findest du den richtigen Wert.

Für Fotografien (Produktfotos, Blogbilder, Hintergründe) nutze 75-85% Qualität. In diesem Bereich sind JPEG- und WebP-Dateien 80-90% kleiner als das Original. Der Qualitätsunterschied ist für die meisten Menschen auf Bildschirmen unsichtbar.

Bei 85% kannst du keinen Unterschied zum Original erkennen. Bei 75% gibt es vielleicht minimale Weichzeichnung in sehr detailreichen Bereichen, aber kaum wahrnehmbar. Unter 60% tauchen Artefakte auf. Blockmuster an Kanten. Farbverläufe mit Stufen. Verwischte Feinheiten.

Für Grafiken und Illustrationen (Icons, Logos, Diagramme) nutze keine verlustbehaftete Komprimierung. Verwende PNG für scharfe Kanten und Text. Wenn Dateigröße wichtig ist, konvertiere zu verlustfreiem WebP. Ein verlustfreies WebP ist typischerweise 25% kleiner als das gleiche PNG.

Für Screenshots nutze PNG oder WebP mit Qualität 90%+. Text in Screenshots wird bei zu starker Komprimierung unscharf. Wenn der Screenshot lesbaren Text enthält, halte die Qualität hoch oder nutze verlustfrei.

Hier eine Übersichtstabelle:

Bildtyp	Format	Qualität	Erwartete Größe
Produktfoto	WebP oder JPEG	75-85%	50-200 KB
Blog-Hero-Bild	WebP oder JPEG	80-85%	100-200 KB
Thumbnail	WebP oder JPEG	70-80%	15-50 KB
Logo/Icon	PNG oder SVG	Verlustfrei	5-30 KB
Screenshot	PNG oder WebP	90-100%	100-400 KB

Diese Zielwerte funktionieren für die meisten Websites. Strebe unter 200 KB pro Bild an und unter 100 KB, wo es geht.

Solltest du Bilder vor dem Komprimieren skalieren?

Ja. Immer. Skalierung bringt den größten Gewinn bei der Dateigröße, und die meisten Leute überspringen diesen Schritt.

Warum das so wichtig ist: Ein Foto von einem modernen Smartphone hat 4000x3000 Pixel. Dein Blog zeigt es bei 800px Breite an. Das heißt, du sendest 15x mehr Pixel als der Bildschirm braucht. All diese Extra-Daten werden heruntergeladen und weggeworfen.

Skaliere das Bild zuerst auf die Anzeigegröße. Dann komprimiere. Die Ergebnisse sind enorm.

Nimm dieses 4000x3000 Foto mit 5 MB:

1. Skaliere auf 1200px Breite (gut für die meisten Blogs): sinkt auf ~1 MB
2. Komprimiere als WebP bei 80% Qualität: sinkt auf ~100 KB
3. Entferne Metadaten: spart weitere 20-30 KB

Endergebnis: etwa 80 KB. Das sind 98% weniger als die ursprünglichen 5 MB.

Für Retina-Bildschirme liefere Bilder in 2x Anzeigegröße. Wenn deine Blog-Spalte 600px breit ist, skaliere auf 1200px. Die zusätzlichen Pixel sorgen für scharfe Darstellung auf hochauflösenden Screens, ohne so verschwenderisch wie die vollen 4000px zu sein.

Vergiss responsive Bilder nicht. Nutze srcset, um verschiedene Größen für verschiedene Bildschirmbreiten zu liefern. Ein Mobilnutzer auf einem 375px-Screen braucht kein 1200px-Bild.

<img
  src="/foto-800.webp"
  srcset="/foto-400.webp 400w, /foto-800.webp 800w, /foto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Produktfoto"
>

Das liefert das richtig dimensionierte Bild an jedes Gerät. Mobilnutzer bekommen kleinere Dateien. Desktop-Nutzer bekommen volle Qualität. Alle bekommen eine schnellere Seite.

Welches Bildformat ist am besten für Website-Geschwindigkeit?

Die Formatwahl hat einen großen Einfluss auf die Dateigröße. Das gleiche Foto in verschiedenen Formaten kann sich um 50% oder mehr unterscheiden.

WebP ist heute die beste Allround-Wahl für Webbilder. Es komprimiert 25-35% besser als JPEG. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung. Es kann Transparenz. Und über 97% der Browser unterstützen es.

JPEG ist immer noch das am weitesten verbreitete Format für Fotos. Es komprimiert gut und funktioniert überall. Wenn du noch nicht auf WebP umsteigen willst, ist JPEG bei 75-85% Qualität immer noch eine gute Option.

PNG ist am besten für Bilder, die Transparenz oder pixelgenaue Genauigkeit brauchen. Logos, Icons, Screenshots mit Text. Aber PNG-Dateien sind 3-5x größer als gleichwertige JPEGs bei Fotos. Nutze PNG nicht für Fotografien.

AVIF bietet die besten verfügbaren Komprimierungsraten. Bis zu 50% kleiner als JPEG. Aber die Kodierung ist langsamer und die Browserunterstützung ist noch nicht ganz universell. Es lohnt sich zu testen, wenn dein Stack es unterstützt.

Für einen tieferen Blick darauf, wie jedes Format funktioniert, schau dir unseren kompletten Guide zur Bildkomprimierung an. Er behandelt verlustbehaftet vs. verlustfrei, wann welches Format und wie du häufige Fehler vermeidest.

Wie komprimierst du viele Bilder effizient auf einmal?

Ein Bild nach dem anderen zu komprimieren ist okay für eine schnelle Korrektur. Aber wenn du eine ganze Website optimierst, brauchst du einen schnelleren Workflow.

Option 1: Nutze einen Online-Stapelkomprimierer. Tools wie CompressIMG lassen dich bis zu 20 Bilder auf einmal hochladen. Qualität einstellen, komprimieren und als ZIP herunterladen. Keine Software nötig. Kein Konto nötig.

Das ist die schnellste Option für die meisten Leute. Lade deine Blogbilder hoch, stelle die Qualität auf 80% und lade den komprimierten Stapel herunter. Der ganze Vorgang dauert weniger als eine Minute.

Option 2: Nutze Build-Tools für automatisierte Komprimierung. Wenn du Entwickler bist, füge Bildoptimierung in deine Build-Pipeline ein. Next.js, Astro und andere Frameworks haben eingebaute Bildoptimierung. Sie skalieren, komprimieren und konvertieren Bilder automatisch beim Build oder auf Anfrage.

Option 3: Nutze eine API für automatisierte Workflows. Wenn deine Website Nutzer-Uploads verarbeitet oder Bilder aus einem CMS zieht, soll die Komprimierung automatisch passieren. Eine Bildkomprimierungs-API verarbeitet Dateien programmatisch. Keine manuellen Schritte nötig.

Option 4: Nutze ein CDN mit automatischer Optimierung. Dienste wie Cloudflare, Imgix und Cloudinary können Bilder on-the-fly komprimieren und skalieren. Du lädst das Original hoch, und das CDN liefert optimierte Versionen basierend auf Gerät und Browser des Besuchers.

Für die meisten Content-fokussierten Websites reicht Option 1. Bilder hochladen, komprimieren, fertig. Für größere Sites mit häufigen Content-Updates sparen die Optionen 2-4 Zeit durch Automatisierung.

Der Vergleich von TinyPNG, Squoosh und CompressIMG zeigt, welches Tool zu welchem Workflow passt. Manche können Stapelverarbeitung. Manche geben dir tiefe Kontrolle über Einstellungen. Wähle das, das zu deiner Arbeitsweise passt.

Welche Dateigröße solltest du pro Bildtyp anstreben?

Gute Zielwerte helfen dir zu wissen, wann ein Bild „fertig" ist. Hier sind realistische Richtwerte:

Hero-Bilder und Banner in voller Breite: Unter 200 KB. Das sind die größten Bilder auf der Seite und meistens das LCP-Element. Wenn du sie unter 200 KB hältst, hilft das deinen Core Web Vitals.

Blogpost-Bilder: Unter 100 KB. Inhaltsbilder innerhalb von Textspalten müssen nicht riesig sein. 800-1200px breit bei 80% Qualität erreicht diesen Wert leicht.

Produkt-Thumbnails: Unter 50 KB. Kleine Bilder in Rastern oder Karussells. Skaliere auf die Anzeigegröße (oft 300-400px) und komprimiere auf 70-80%.

Icons und Logos: Unter 20 KB. Einfache Grafiken mit wenigen Farben. Nutze SVG wenn möglich. Sonst PNG oder verlustfreies WebP.

Gesamtes Bildgewicht der Seite: Unter 500 KB für den initialen Viewport. Lazy-geladene Bilder unterhalb zählen nicht zum initialen Laden, beeinflussen aber die insgesamt übertragene Datenmenge.

Googles PageSpeed Insights markiert Bilder, die weiter optimiert werden könnten. Nach dem Komprimieren starte den Test, um zu sehen, ob noch Bilder nachgebessert werden müssen. Der Hinweis „Bilder in modernen Formaten bereitstellen" bedeutet, du solltest von JPEG oder PNG zu WebP oder AVIF wechseln.

Verschlechtert Komprimierung die Bildqualität?

Das ist die häufigste Sorge. Die ehrliche Antwort: Ja, technisch. Aber nein, nicht visuell.

Verlustbehaftete Komprimierung entfernt Daten. So werden Dateien kleiner. Aber moderne Algorithmen sind clever darin, was sie entfernen. Sie streichen Details, die deine Augen nicht sehen können. Winzige Farbvariationen. Sub-Pixel-Muster. Daten, die für Computer wichtig sind, aber nicht für Menschen.

Bei 80% Qualität ist ein komprimiertes JPEG oder WebP auf dem Bildschirm visuell identisch mit dem Original. Du müsstest auf 400% heranzoomen und Pixel für Pixel vergleichen, um Unterschiede zu finden. Kein Besucher wird je etwas bemerken.

Die Qualitätsstufe, ab der Artefakte sichtbar werden, hängt vom Bildinhalt ab. Fotos mit weichen Verläufen vertragen mehr Komprimierung als Bilder mit scharfen Kanten und Text. Darum unterscheidet sich die empfohlene Qualität je nach Bildtyp.

Die wichtigste Regel: Starte immer von deiner qualitativ besten Quelle. Komprimiere kein bereits komprimiertes JPEG erneut. Jede Runde verlustbehafteter Komprimierung verschlechtert die Qualität weiter. Wenn du nur einmal vom Original komprimierst, bleibt die Qualität ausgezeichnet.

Nutze ein Tool mit Vorher-Nachher-Vorschau, um die Ergebnisse vor dem Download zu prüfen. CompressIMG zeigt das Original und das komprimierte Bild mit einem Schieberegler, den du hin- und herziehen kannst. Wenn du einen Unterschied siehst, drehe die Qualität hoch. Wenn nicht, bist du fertig.

Bereit, deine Website zu beschleunigen?

Bildkomprimierung ist der schnellste Weg, deine Website flotter zu machen. Es dauert Minuten, kostet nichts und die Verbesserungen sind messbar.

Fang mit deinen größten Bildern an. Deine Hero-Banner, Produktfotos und Blogbilder. Skaliere sie auf ihre Anzeigegröße. Komprimiere auf 75-85% Qualität. Konvertiere zu WebP, wenn möglich.

CompressIMG erledigt alles in deinem Browser. Lade bis zu 20 Bilder hoch, stelle deine Qualität ein und lade optimierte Dateien herunter. Kein Konto nötig.

Eine schnellere Website bedeutet zufriedenere Besucher, bessere Rankings und mehr Conversions. Deine Bilder sind der schnellste Hebel.