Bildgröße reduzieren, ohne dass die Qualität sichtbar leidet

Bilder sind oft der schwerste Teil einer Webseite, und ein einziges nicht optimiertes Foto kann mehr wiegen als HTML, CSS und JavaScript der Seite zusammen. Die gute Nachricht: Der größte Teil dieses Gewichts ist unsichtbar – Pixel, die niemand sieht, und Details, die das Auge nicht wahrnimmt. Wer das entfernt, macht Seiten schneller, vor allem auf Smartphones und in Mobilfunknetzen, ohne dass sie schlechter aussehen.

Die Bildgröße zu reduzieren läuft auf vier Dinge hinaus: die richtigen Abmessungen, das richtige Format, eine sinnvolle Komprimierung und das richtige Ladeverhalten.

Zuerst die schwersten Bilder finden

Öffnen Sie die Entwicklertools Ihres Browsers, wechseln Sie zum Netzwerk-Tab, filtern Sie nach „Img“, laden Sie die Seite neu und sortieren Sie nach Größe. Bei den größten Dateien sparen Sie am meisten. Der Website-Speed-Checker von Rudra führt Lighthouse für die Seite aus und listet die nicht bestandenen Prüfungen auf – darunter auch Bildprüfungen (etwa zu große oder schlecht komprimierte Bilder), sofern sie zutreffen. Bei Crawls der gesamten Website meldet Rudra außerdem Bilder ohne width- und height-Attribut sowie Seiten, die mehr als zehn Bilder ohne Lazy Loading laden.

Bildgröße reduzieren – Schritt für Schritt

1. Auf die tatsächliche Anzeigegröße skalieren

Das bringt meist am meisten. Ein 4000 Pixel breites Foto in einer 800 Pixel breiten Spalte enthält rund 25-mal mehr Pixel als nötig. Ermitteln Sie die größte Größe, in der das Bild tatsächlich angezeigt wird (untersuchen Sie es in den Entwicklertools), und exportieren Sie es in dieser Breite – oder in bis zu doppelter Breite, damit es auf hochauflösenden Displays scharf bleibt. Ein Bild per CSS zu verkleinern verringert den Download nicht. Es wird trotzdem die ganze Datei übertragen.

2. Das richtige Format wählen

• JPEG: Fotos und komplexe Bilder, wenn es auf maximale Kompatibilität ankommt.
• PNG: Bilder, die verlustfreie Qualität oder Transparenz mit scharfen Kanten brauchen, etwa Screenshots von Oberflächen oder Diagramme mit wenigen Farben. Für Fotos ist PNG eine schlechte Wahl.
• WebP: wird von allen aktuellen großen Browsern unterstützt und ist bei ähnlicher visueller Qualität in der Regel kleiner als JPEG oder PNG. Beherrscht auch Transparenz und Animation.
• AVIF: bei gleicher visueller Qualität oft noch einmal kleiner als WebP und von allen aktuellen großen Browsern unterstützt, allerdings langsamer beim Kodieren.
• SVG: Logos, Icons und einfache Illustrationen. Das Format ist vektorbasiert, bleibt also in jeder Größe scharf und ist oft winzig.
• Video statt GIF: Ein animiertes GIF ist meist um ein Vielfaches größer als derselbe Clip als MP4- oder WebM-Video. Verwenden Sie <video autoplay muted loop playsinline>.

3. Komprimieren und mit eigenen Augen prüfen

Bei verlustbehafteten Formaten (JPEG, WebP, AVIF) wägen Sie Dateigröße gegen Qualität ab. Für Fotos ist eine Qualitätsstufe im Bereich von 70–85 ein gängiger Ausgangspunkt, der oft genauso aussieht wie das Original. Der richtige Wert hängt jedoch vom Bild ab. Vergleichen Sie das Ergebnis deshalb in Originalgröße. Entfernen Sie außerdem Metadaten wie Kameradaten und GPS-Standort. Sie erhöhen das Gewicht und können mehr verraten, als Ihnen lieb ist. Nützliche Tools:

• Squoosh (im Browser): Formate und Qualitätsstufen direkt nebeneinander vergleichen, jeweils für ein einzelnes Bild.
• ImageOptim (macOS) oder ähnliche Desktop-Tools: einen Ordner hineinziehen und verlustfrei oder verlustbehaftet optimieren.
• Kommandozeile: cwebp -q 80 photo.jpg -o photo.webp konvertiert nach WebP. magick photo.jpg -resize 1600x -quality 80 photo-1600.jpg skaliert mit ImageMagick und komprimiert neu.
• In einer Build-Pipeline: Bibliotheken wie sharp (Node.js) können jedes Bild beim Build oder beim Upload automatisch skalieren und konvertieren.

4. Unterschiedlichen Bildschirmen unterschiedliche Größen ausliefern

Ein Smartphone sollte nicht das Bild herunterladen, das für einen großen Desktop-Monitor gedacht ist. Mit srcset und sizes wählt der Browser die kleinste Datei, die noch scharf aussieht:

<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" width="1600" height="900" alt="Hikers crossing a ridge at sunrise">

srcset listet die Dateien mit ihren Breiten auf, sizes teilt dem Browser mit, wie breit das Bild angezeigt wird (800 Pixel auf großen Bildschirmen, sonst die volle Viewport-Breite). Um moderne Formate mit einem Fallback anzubieten, fassen Sie das Bild in ein <picture> ein, mit einem <source type="image/avif" srcset="..."> und einem <source type="image/webp" srcset="..."> vor dem <img>. Browser nehmen das erste Format, das sie unterstützen.

5. Bilder weiter unten per Lazy Loading laden – nur nicht das Hero-Bild

Versehen Sie Bilder weiter unten auf der Seite mit loading="lazy", dann lädt der Browser sie erst, wenn der Besucher in ihre Nähe scrollt. Verzichten Sie beim Hauptbild oben auf der Seite auf Lazy Loading: Es ist oft das Largest-Contentful-Paint-Element, und wenn es später kommt, fühlt sich die Seite langsamer an. Erwägen Sie für dieses Bild fetchpriority="high", damit der Browser es früh lädt.

6. Immer Breite und Höhe angeben

Dank der Attribute für Breite und Höhe kann der Browser den richtigen Platz reservieren, bevor das Bild eintrifft. So springt der Text beim Laden nicht – eine häufige Ursache für Layoutverschiebungen (CLS). Setzen Sie die Werte auf die natürliche Größe des Bildes und halten Sie Bilder mit img { max-width: 100%; height: auto; } in Ihrem CSS flexibel.

7. Automatisieren

Manuelle Optimierung überlebt den nächsten Upload nicht. Überlassen Sie die Arbeit Ihrer Plattform: WordPress erzeugt von jedem hochgeladenen Bild mehrere Größen und ergänzt srcset automatisch, und Optimierungs-Plugins können Komprimierung sowie die Konvertierung nach WebP oder AVIF beisteuern. Die <Image>-Komponente von Next.js skaliert, konvertiert und lädt standardmäßig per Lazy Loading. Und Bild-CDNs wandeln Bilder anhand von URL-Parametern in Echtzeit um. Kombinieren Sie das mit langen Cache-Laufzeiten für Bilddateien, damit wiederkehrende Besucher sie nicht erneut herunterladen.

Häufige Fehler

• Das Hero-Bild per Lazy Loading zu laden, was den wichtigsten Inhalt verzögert.
• Kamera- oder Smartphone-Fotos in voller Auflösung hochzuladen und das Verkleinern dem CSS zu überlassen.
• Fotos als PNG zu speichern.
• Wichtige Bilder als CSS-Hintergrund einzubinden, wo der Browser sie spät entdeckt und sie keinen Alt-Text haben können.
• Ein bereits komprimiertes JPEG wieder und wieder neu zu komprimieren, was jedes Mal sichtbare Artefakte hinzufügt.
• Breite und Höhe zu vergessen und damit Layoutverschiebungen zu verursachen.
• Produktfotos so stark zu komprimieren, dass die Details verschwinden, die Kunden sehen möchten.

Was Tools beurteilen können – und was nicht

Automatische Prüfungen erkennen zuverlässig Bilder, die größer sind als ihre Anzeigegröße, sowie fehlende moderne Formate oder fehlende Größenangaben, und sie schätzen, wie viel Sie einsparen könnten. Ob ein komprimiertes Bild für seinen Zweck noch gut genug aussieht, können sie Ihnen nicht sagen. Eine Blog-Illustration verträgt starke Komprimierung, ein Produktfoto oder ein Portfolio-Stück womöglich nicht. Die endgültige Entscheidung trifft das Auge.