Bilder komprimieren Website: Größe halbieren

Bilder komprimieren Website: So halbierst du die Dateigröße deiner Fotos ohne sichtbaren Qualitätsverlust – mit Zielwerten und Anleitung.

Ein einziges Foto vom Chef mit dem Team kann 6 MB wiegen – und genau so landet es oft auf der Startseite. Bilder komprimieren Website-seitig ist deshalb eine der schnellsten Maßnahmen, um die Ladezeit zu senken, ohne dass Besucher einen Unterschied sehen.

In diesem Artikel zeige ich dir, wie du die Dateigröße deiner Bilder meist halbierst oder besser, welche Zielwerte sich in der Praxis bewährt haben und wann du lieber nichts anfassen solltest.

Bilder komprimieren Website: Warum Fotos deine Seite ausbremsen

Bilder komprimieren Website: Waage mit schwerem und leichtem Foto

Bilder sind auf den meisten Firmenseiten der größte Posten im Datenvolumen. Auf dem Handy – und dort kommen heute die meisten Besucher – wirkt sich das direkt aus: Die Seite baut sich langsam auf, und viele springen ab, bevor sie etwas gelesen haben.

Besonders kritisch ist das Bild ganz oben (Slider, Titelbild). Es ist häufig das Element, das Google beim Messwert LCP (Largest Contentful Paint) bewertet, also der Zeit, bis der größte sichtbare Inhalt erscheint. Wie du das prüfst, steht im Artikel Core Web Vitals Test mit kostenlosen Google-Tools.

Typische Fehler aus Kundenprojekten, die wir immer wieder sehen:

  • Handyfotos direkt hochgeladen (4.000 × 3.000 Pixel, 5–8 MB), obwohl die Seite nur 1.200 Pixel Breite anzeigt
  • Hintergrundbilder und Slider in voller Kameraauflösung
  • PNG für Fotos statt JPEG oder WebP
  • Dasselbe Bild mehrfach in verschiedenen Größen im Medienarchiv, das Theme lädt aber immer das größte

Die Größe halbieren: Erst Pixel, dann Qualität

Der größte Hebel ist nicht die Komprimierung selbst, sondern die Abmessung. Ein Bild mit 4.000 Pixeln Breite hat über zehnmal so viele Pixel wie eines mit 1.200 Pixeln. Reihenfolge deshalb immer: zuerst verkleinern, dann komprimieren, dann das Format wählen.

Schritt 1: Auf die richtige Abmessung verkleinern

Als Faustregel für Firmenseiten gilt:

VerwendungBreite in PixelZielgröße (Richtwert)
Vollbild-Header / Hero1.920 (maximal)150–300 KB
Bild im Textbereich1.000–1.20080–150 KB
Teamfoto, Kachel, Vorschaubild600–80040–80 KB
Logo, Iconsals SVG, sonst 2× Anzeigegrößeunter 20 KB

Das sind Erfahrungswerte, keine Google-Vorgaben. Bei sehr detailreichen Fotos darfst du etwas drüber liegen, bei einfachen Motiven geht es kleiner.

Schritt 2: Die Komprimierung einstellen

Bei Fotos nutzt man verlustbehaftete Komprimierung: Das Bild verliert minimal Information, die das Auge kaum bemerkt. Als Ausgangspunkt funktionieren bei JPEG und WebP meist Qualitätswerte von etwa 75–80, bei AVIF oft etwas darunter. Google empfiehlt selbst, mehrere Qualitätsstufen auszuprobieren und das beste Verhältnis aus Größe und Qualität pro Bild zu finden (siehe web.dev: Choose the right image format).

Schau dir das Ergebnis immer in Originalgröße an – nicht als winzige Vorschau. Achte auf Farbverläufe (Himmel), Hauttöne und feine Kanten, dort fallen Artefakte zuerst auf.

Schritt 3: Das passende Format wählen

WebP und AVIF sind in der Regel deutlich kleiner als JPEG bei vergleichbarer Optik. Die Einsparung hängt stark vom Motiv ab, rechne grob mit 25–50 %. Welches Format für deine Seite sinnvoll ist, erkläre ich ausführlich in AVIF vs. WebP: Was ist der Standard?. Für die meisten Firmenseiten ist WebP der sichere Weg.

Bilder komprimieren Website: Diese Werkzeuge reichen aus

Du brauchst kein teures Programm. Je nach Aufwand gibt es drei sinnvolle Wege:

  • Einmalig, von Hand: Kostenlose Web-Tools wie Squoosh (von Google) oder TinyPNG. Gut für Header-Bilder und einzelne Fotos. Lade nur Bilder hoch, die ohnehin öffentlich sind.
  • Automatisch in WordPress: Ein Optimierungs-Plugin (z. B. ShortPixel, Imagify oder EWWW) komprimiert neue Uploads und wandelt sie in WebP um. Spart dauerhaft Arbeit, kostet je nach Bildmenge ein paar Euro im Monat oder einmalig Credits.
  • Am Rechner, vor dem Upload: Wer viele Fotos hat, verkleinert sie mit einem Stapelverarbeitungs-Programm, bevor sie ins Medienarchiv kommen.

Ehrlich gesagt: Wenn du eine Handvoll Bilder auf einer kleinen Seite hast, brauchst du kein Plugin. Zwei Stunden Handarbeit reichen. Bei Shops, Portfolios oder Blogs mit regelmäßig neuen Fotos lohnt sich die Automatik.

Das kannst du heute tun: 6 Schritte in 60 Minuten

  • Teste deine Startseite in PageSpeed Insights und notiere, welche Bilder als „zu groß“ markiert sind.
  • Öffne das Medienarchiv und sortiere nach Dateigröße. Alles über 500 KB ist ein Kandidat.
  • Verkleinere diese Bilder auf die passende Breite aus der Tabelle oben.
  • Komprimiere sie mit Squoosh oder TinyPNG und vergleiche Vorher und Nachher in Originalgröße.
  • Lade die neuen Dateien hoch und ersetze die alten. Prüfe, dass nichts unscharf wirkt, vor allem auf dem Handy.
  • Messe erneut. Bei vielen Seiten sinkt die Gesamtgröße bereits spürbar.

Wie du Messwerte richtig liest, findest du in Ladezeit Website messen: So deutest du die Werte richtig. Und wenn die Seite auf dem Smartphone trotz kleiner Bilder noch hakt, hilft Website langsam auf dem Handy: Die 7 größten Bremsen.

Wenn du nicht sicher bist, wie deine eigene Seite dasteht, kannst du sie kostenlos analysieren lassen – du bekommst innerhalb von 24 Stunden eine persönliche Auswertung.

Zwei Einstellungen, die oft vergessen werden

Auch gut komprimierte Bilder bremsen, wenn sie falsch ausgeliefert werden. Zwei Punkte lohnen den Blick in die Einstellungen von Theme oder Page-Builder:

  • Lazy Loading: Bilder weiter unten auf der Seite werden erst geladen, wenn der Besucher dorthin scrollt. Das große Bild ganz oben darfst du dagegen nicht verzögern laden, sonst erscheint der sichtbare Hauptinhalt später.
  • Responsive Bildgrößen: WordPress erzeugt automatisch mehrere Größen eines Bildes. Ob dein Theme auf dem Handy die kleine Variante ausliefert, siehst du im Quelltext am Attribut srcset. Fehlt es, bekommt das Smartphone das Desktop-Bild.

Außerdem lohnt sich ein Blick ins Medienarchiv: Alte, nicht mehr genutzte Bilder belegen Speicherplatz und machen Backups größer. Räum auf, aber lösche nur, was sicher nirgends mehr eingebunden ist.

Wann Komprimieren nicht reicht

Manchmal liegt das Problem woanders. Wenn deine Bilder schon klein sind und die Seite trotzdem langsam bleibt, schau auf Hosting, Plugins und Caching. Laufende Betreuung inklusive Hosting und Verwaltung nimmt dir solche technischen Fragen generell aus der Hand, damit du dich nicht selbst darum kümmern musst.

Auch beim Thema Auffindbarkeit spielen Bilder eine Rolle: Dateiname, Alt-Text und Größe beeinflussen, ob du in der Google-Bildersuche auftauchst. Das erkläre ich in Bilder SEO: So bringt die Bildersuche Kunden.

Soll die Seite ohnehin neu gebaut werden, lohnt es sich, Bildgrößen und Formate von Anfang an richtig zu planen. Das gehört zu einem sauberen Webdesign. Wie solche Projekte in der Praxis aussehen, siehst du in den Referenzen von Jonas Reuber.

Häufige Fragen

Wie stark kann ich Bilder komprimieren, ohne dass man es sieht?

Bei Fotos sind oft 50–70 % Einsparung möglich, wenn du erst verkleinerst und dann komprimierst. Entscheidend ist der Blick auf das Ergebnis in Originalgröße.

Welches Format ist am besten für Bilder auf der Website?

Für Fotos sind WebP und AVIF meist die beste Wahl, JPEG dient als Fallback. Für Logos und Grafiken eignet sich SVG, für Bilder mit Transparenz WebP oder PNG.

Wie groß darf ein Bild auf der Website sein?

Als Richtwert gelten 80–150 KB für Bilder im Text und 150–300 KB für das große Header-Bild. Das ist ein Erfahrungswert, kein fester Grenzwert.

Verlieren Bilder bei der Komprimierung Qualität?

Verlustfreie Komprimierung verändert nichts, spart aber nur wenig. Verlustbehaftete Komprimierung entfernt Details, bei moderaten Einstellungen fällt das im Alltag kaum auf.

Previous Post

Next Post

Lade nächsten Post...
Suche Trending
Beliebte Artikel
Loading

Anmeldung in 3 Sekunden …

Anmelde 3 Sekunden...