Bilder komprimieren und Websites ohne sichtbaren Qualitätsverlust beschleunigen

Bilder machen häufig einen großen Teil der übertragenen Seitendaten aus. Ein Kamerafoto kann mehrere Megabyte groß sein, obwohl es im Layout nur 600 Pixel breit erscheint. Gute Optimierung reduziert Übertragung und Dekodierzeit, ohne sichtbare Schäden erzwingen zu müssen.

Mit passenden Abmessungen beginnen

Ermittle vor der Komprimierung die größte tatsächliche Darstellungsbreite. Ein Bild, das nie breiter als 600 Pixel angezeigt wird, benötigt keine 4.000-Pixel-Datei. Für hochauflösende Displays kann ungefähr die doppelte CSS-Breite sinnvoll sein, aber nicht automatisch die volle Kameraauflösung.

Gib Breite und Höhe oder ein stabiles Seitenverhältnis an, damit der Browser Platz reserviert. Dadurch lassen sich Layoutverschiebungen und ein schlechter Cumulative Layout Shift vermeiden.

Das Format zum Inhalt wählen

• JPEG: gut für Fotos, einstellbare Qualität, keine Transparenz.
• PNG: für Transparenz und verlustfreie Details, häufig größere Dateien.
• WebP: bietet für Fotos und Grafiken oft kleine Dateien bei moderner Browserunterstützung.
• SVG: für kontrollierte Vektorlogos und Symbole, nicht für Fotos.

Das Format allein garantiert kein optimales Ergebnis. Prüfe die Ausgabe visuell und verwandle eine Aufnahme mit Text nicht in ein stark komprimiertes JPEG, wenn Kanten dadurch unscharf werden.

Wiederholbarer Komprimierungsablauf

1. Das Original außerhalb des öffentlichen Website-Ordners bewahren.
2. Eine Kopie auf die benötigten Abmessungen verkleinern.
3. Mit einer mittleren Qualität, etwa 80%, beginnen.
4. Gesichter, Text, Kanten und Verläufe bei 100% prüfen.
5. Qualität schrittweise senken und bei sichtbaren Fehlern eine Stufe zurückgehen.
6. Die mobile Seite anschließend erneut messen.

Der ToolBlur Bildkompressor verarbeitet Bilder lokal und zeigt den Größenvergleich. Für moderne Auslieferung kannst du zusätzlich eine WebP-Kopie erstellen. Bewahre bei dokumentarisch wichtigen Dateien immer das Original auf.

Richtiges Laden auf der Seite

Das große sichtbare Hauptbild sollte nicht unnötig verzögert werden, da dies den Largest Contentful Paint verschlechtern kann. Weiter unten liegende Bilder können dagegen verzögert geladen werden. Responsive Quellen verhindern, dass ein Smartphone dieselbe große Datei wie ein Desktop lädt. Versionierte Dateien profitieren zusätzlich von langer Cache-Dauer.

Häufige Fehler

• Ein riesiges Bild komprimieren, ohne die Pixelmaße zu reduzieren.
• Identische Kopien unter verschiedenen Namen ausliefern.
• Keinen Platz reservieren und Layoutsprünge verursachen.
• Nur für eine bessere Punktzahl eine sichtbar schlechte Qualität wählen.
• Ein dekoratives Bild verwenden, obwohl CSS oder SVG leichter wäre.

Häufig gestellte Fragen

Welche JPEG-Qualität ist perfekt?

Einen universellen Wert gibt es nicht. Inhalt, Abmessungen und reale Darstellung entscheiden.

Ist WebP immer kleiner?

Oft, aber jede Datei muss mit dem Original verglichen und auf Transparenz, Detail und Kompatibilität geprüft werden.

Verbessert Komprimierung allein die Core Web Vitals?

Sie hilft, doch Abmessungen, Ladepriorität, Cache, Server und blockierendes JavaScript sind ebenfalls wichtig.