Wie Sie Fotos für das Web optimieren (ohne Qualitätsverlust)

Um ein Foto für das Web zu optimieren, ohne sichtbar an Qualität zu verlieren, tun Sie drei Dinge: Sie skalieren es auf die tatsächliche Breite, in der es auf der Website erscheint (selten benötigen Sie mehr als 1600 px Breite), Sie speichern es im WebP-Format und komprimieren es auf etwa 80 % Qualität. In der Praxis wird aus einem 4-MB-Foto direkt vom Smartphone eine Datei mit 150–250 KB — mehr als 15-mal kleiner —, ohne dass das Auge den Unterschied bemerkt. Die Reihenfolge ist wichtig: erst skalieren, dann komprimieren.

Warum Geschwindigkeit zählt (und warum Fotos der Hauptschuldige sind)

Bei den meisten Websites, die wir sehen, sind Bilder mit Abstand das schwerste zu ladende Element — schwerer als der gesamte Text, Code und die Schriftarten zusammen. Eine Seite mit 6–8 nicht optimierten Fotos direkt vom Smartphone kann 15–25 MB wiegen. Bei einem Mobiltelefon mit schwachem Signal bedeutet das mehrere Sekunden weißen Bildschirm, und der Besucher verlässt die Seite, bevor überhaupt etwas erscheint.

Google misst das über Core Web Vitals — insbesondere den LCP (wie lange es dauert, bis das größte Bild im oberen Seitenbereich erscheint). Wir garantieren keinen „Platz 1 bei Google“, aber eine schnelle Website ist ein echtes Ranking-Signal und, wichtiger noch, hält den Besucher auf der Seite. Geschwindigkeit ist keine Kosmetik; sie ist das Erste, was ein Kunde spürt.

Schritt 1: Auf die tatsächliche Breite skalieren

Der häufigste Fehler: Sie laden ein Foto mit 4000×3000 px an einer Stelle hoch, an der es tatsächlich nur mit 600 px Breite angezeigt wird. Der Browser verkleinert es zwar bei der Anzeige, lädt aber trotzdem die gesamte Datei herunter. Unnötig.

Einfache Breitenregeln:

Für moderne (Retina-)Bildschirme ist es in Ordnung, mit der doppelten Anzeigegröße zu exportieren — ein Bild, das mit 600 px erscheint, exportieren Sie mit 1200 px. Mehr nicht.

Schritt 2: Wählen Sie das WebP-Format

WebP ist 2026 der Standard: Es wird von allen wichtigen Browsern unterstützt (über 94 % der Nutzer laut Kompatibilitätsdaten von Tinify) und erzeugt Dateien, die bei gleicher visueller Qualität 25–35 % kleiner sind als JPEG. Für Fotos und die meisten Bilder auf einer Präsentations-Website ist WebP die richtige und einfache Wahl.

Es gibt auch AVIF, ein neueres Format, das noch besser komprimiert (Dateien 20–40 % kleiner als WebP). Es eignet sich hervorragend für große Bilder, wird aber deutlich langsamer codiert und ist manuell schwerer zu handhaben. Unsere Empfehlung: Bleiben Sie bei WebP, wenn Sie Ihre Fotos selbst bearbeiten. AVIF ist sinnvoll, wenn die Website die Formate automatisch generiert.

Eine nützliche Regel: JPEG/WebP für Fotos, PNG/SVG für Logos, Icons und Grafiken mit Text. SVG ist vektorbasiert — bleibt bei jeder Größe scharf und wiegt nur wenige KB.

Schritt 3: Komprimieren (hier passiert die Magie)

Verlustbehaftete Kompression entfernt Details, die das Auge nicht wahrnimmt. Bei 80 % Qualität ist der Unterschied zum Original praktisch unsichtbar, aber die Dateigröße sinkt drastisch. Unter 60 % beginnen hässliche Artefakte sichtbar zu werden, besonders bei klarem Himmel oder Hauttönen.

Kostenlose Tools, die wir nutzen und empfehlen:

• Squoosh.app (Google) — Sie laden das Bild im Browser hoch, verschieben den Qualitätsregler und sehen den Unterschied sofort. Kostenlos, ohne Konto.
• TinyPNG / TinyJPG — Sie ziehen die Fotos hinein und laden sie komprimiert herunter. Schnell für kleine Mengen.
• ImageOptim (Mac) — installieren und die Fotos hineinziehen.

Schnelle Checkliste vor dem Hochladen

• [ ] Breite überschreitet nicht ~2× die Anzeigegröße
• [ ] WebP-Format (oder JPEG als Fallback)
• [ ] Qualität ~80 %, visuell überprüft
• [ ] Jede Datei unter ~250 KB (idealerweise unter 150 KB)
• [ ] Aussagekräftiger Dateiname: `haarschnitt-cluj.webp`, nicht `IMG_4821.jpg`
• [ ] Alt-Text ausgefüllt — gut für Barrierefreiheit und für lokales SEO

Ehrliche Kompromisse

Manuelle Optimierung braucht Zeit. Bei 10 Fotos ist es eine Sache von 15 Minuten; bei einem Shop mit 300 Produkten nicht mehr. Dort brauchen Sie entweder einen automatischen Prozess (die Website generiert WebP selbst beim Hochladen) oder Lazy Loading (Bilder weiter unten laden erst beim Scrollen). Viele moderne Plattformen machen das von Haus aus — aber nicht alle, und selten gut konfiguriert.

Es gibt noch einen echten Kompromiss: Wenn Sie es mit der Kompression übertreiben, um ein paar KB zu sparen, ruinieren Sie das Bild. Eine schnelle Website mit hässlichen Fotos verkauft nicht. Balance — nicht das Extrem — ist das Ziel.

Bei MPO Web Studio (Team in der Nähe von Cluj, in Cluj-Napoca, wir arbeiten 100 % remote in ganz Rumänien) liefern wir Websites mit bereits optimierten Bildern und automatisch generierten Formaten, damit die Seite schnell bleibt, ohne dass Sie sich mit jedem Foto einzeln beschäftigen müssen. Wenn Sie sehen möchten, wie Ihre Website richtig gemacht aussehen würde, erstellen wir Ihnen eine kostenlose Demo — schreiben Sie uns auf WhatsApp unter wa.me/40750257140, und wir legen los.