Bilder für die Website optimieren

Warum Bilder über die Ladezeit entscheiden

Auf den meisten Websites machen Bilder den größten Teil der übertragenen Daten aus. Ein einziges unbearbeitetes Handyfoto kann mehr wiegen als der gesamte Code der Seite. Das spüren Besucher besonders im Mobilfunk: Die Seite baut sich zäh auf, Inhalte springen, und mancher springt ab, bevor das Titelbild erscheint.

Auch Google misst das. Bei den Core Web Vitals zählt unter anderem der Largest Contentful Paint – die Zeit, bis das größte sichtbare Element geladen ist. Das ist sehr häufig ein Bild. Wer seine Bilder optimiert, verbessert damit direkt einen der wichtigsten Messwerte.

Drei Stellschrauben: Format, Pixel, Qualität

• Format: WebP ist für Fotos und Grafiken im Web meist die beste Wahl. In unserem Test war ein Foto als WebP rund 28 % kleiner als das gleich gut optimierte JPG. Alle aktuellen Browser zeigen WebP an.
• Pixelmaße: Das bringt am meisten. Ein Foto in Kameraauflösung auf 1920 Pixel zu begrenzen, sparte in unserem Test allein 89 %.
• Qualität: „Ausgewogen“ ist für die meisten Bilder richtig, „Stark“ für Hintergründe und Vorschaubilder.

Warum Breiten über der Anzeigegröße? Hochauflösende Displays nutzen doppelt so viele Pixel. Ausführlich erklärt das der Ratgeber Bildgröße für Websites.

So optimierst du deine Bilder mit TinyThis

1. Sammle die Bilder für eine Seite oder einen Bereich in einem Ordner und zieh bis zu 50 auf einmal ins Feld.
2. WebP und 2560 Pixel sind voreingestellt. Für Bilder im Fließtext stellst du die Kante auf 1600 oder 1280 Pixel.
3. Bei Logos, Icons und Screenshots wähle „Alle Formate vergleichen“ – hier ist manchmal ein optimiertes PNG kleiner.
4. Prüfe Details im Vorher/Nachher-Vergleich, besonders bei Schrift im Bild.
5. Lade alles als ZIP herunter und ersetze die Bilder in deinem CMS oder Shop.

Häufige Fehler – und wie du sie vermeidest

• Bilder direkt aus der Kamera hochladen: Das CMS zeigt sie zwar kleiner an, ausgeliefert wird je nach System aber trotzdem das große Original.
• Fotos als PNG: PNG ist für Fotos viel zu groß. Fotos gehören als WebP oder JPG auf die Seite, PNG nur für Grafiken mit wenigen Farben.
• Ein Bild für alle Größen: Eine 2560-Pixel-Datei in einer 300-Pixel-Kachel verschwendet Daten. Erzeuge für Vorschaubilder eine eigene, kleine Version.
• Riesige Logos: Ein Logo als 2000-Pixel-PNG im Header ist ein Klassiker. Nutze, wenn möglich, SVG oder rechne es auf die doppelte Anzeigegröße herunter.
• Vergessene Metadaten: Kamera-EXIF-Daten blähen Dateien auf und können Aufnahmeorte verraten. TinyThis entfernt sie automatisch.

Automatisch optimieren mit Plugin und API

Einmal alle Bilder zu optimieren ist gut – dauerhaft optimierte Bilder sind besser. Für WordPress gibt es das TinyThis-Plugin: Es komprimiert Bilder direkt beim Hochladen, wandelt sie auf Wunsch in WebP um, verkleinert zu große Originale auf eine maximale Kantenlänge und optimiert per Massenoptimierung auch die bestehende Mediathek. Die Originale lassen sich sichern und wiederherstellen.

Für Shops, eigene CMS und Skripte gibt es die REST-API mit Parametern für Format, Qualität, maximale Breite und Höhe sowie Zielgröße. Ein kostenloses Konto enthält 100 automatische Optimierungen pro Tag. Wie das Zusammenspiel in WordPress aussieht, beschreibt der Ratgeber Bilder für WordPress optimieren.

Für Agenturen und Kundenprojekte

Wer Bilder von Kunden verarbeitet, sollte wissen, wohin sie gehen. Bei TinyThis ist das klar: Die Verarbeitung läuft auf Servern in Deutschland, es werden keine externen Optimierungsdienste eingebunden, die Dateien werden nach 15 Minuten gelöscht und nicht an Dritte weitergegeben. Das Werkzeug selbst setzt keine Cookies und kein Tracking ein. Mehr dazu unter So schützen wir deine Bilder.