Bilder für die eigene Website optimieren: Größe, Format und Qualität

Bilder sind auf den meisten Websites der größte Brocken beim Datenvolumen. Ein einzelnes Foto direkt vom Smartphone bringt typischerweise mehrere Megabyte mit, der gesamte Text einer Seite dagegen oft nur wenige Kilobyte. Wer solche Fotos unverändert hochlädt, zwingt jeden Besucher dazu, ein Vielfaches der nötigen Daten zu laden. Das merkt man vor allem mobil und bei schwacher Verbindung.

Die gute Nachricht: Bildoptimierung folgt einer festen Reihenfolge, und jeder Schritt hat einen klaren Hebel. Erst die Pixelmaße, dann das Format, dann die Qualitätsstufe, zum Schluss ein paar HTML-Details. In diesem Ratgeber gehst du die Schritte durch und erfährst, welche Werkzeuge von bild-tools.de sie direkt in deinem Browser erledigen, ohne dass ein Bild deinen Rechner verlässt.

Warum die Bildgröße das Tempo deiner Seite mitbestimmt

Ein Browser muss ein Bild erst vollständig herunterladen, bevor er es zeigen kann. Je größer die Datei, desto später erscheint der sichtbare Hauptinhalt. Genau das erfassen die Core Web Vitals, ein Satz von Messgrößen, mit denen Google die Nutzererfahrung einer Seite beurteilt. Für Bilder sind vor allem zwei davon wichtig:

• Largest Contentful Paint (LCP): Wie schnell der größte sichtbare Inhalt erscheint. Auf vielen Seiten ist das ein Titel- oder Produktbild, ein zu schweres Bild verzögert also direkt diesen Wert.
• Cumulative Layout Shift (CLS): Wie stark der Inhalt beim Laden verrutscht. Bilder ohne vorab bekannte Größe lassen den Text darunter springen, sobald sie eintreffen.

Schritt 1: Die Pixelmaße auf den echten Bedarf bringen

Der größte Hebel ist die Zahl der Pixel. Kameras und Smartphones liefern oft 4000 × 3000 Pixel, also 12 Megapixel. Erscheint das Bild auf deiner Seite aber nur 800 Pixel breit, steckt in der Datei das 25-Fache der benötigten Pixel: fünfmal so breit, fünfmal so hoch. Der Browser rechnet das Bild zwar passend herunter, lädt aber trotzdem alles.

Als Faustregel nimmst du die Breite, in der das Bild auf der Seite erscheint, und verdoppelst sie, damit es auf hochauflösenden Displays scharf bleibt. Ein Bild in einer 800 Pixel breiten Textspalte darf also bis zu 1600 Pixel breit sein, mehr bringt nichts. Für Bilder über die volle Seitenbreite gelten 1920 Pixel als vernünftiges Maximum, und genau diesen Wert setzt Bilder für WordPress optimieren als Obergrenze. Wie Pixelzahl, Auflösung und Dateigröße zusammenhängen, erklärt der Ratgeber Pixel, Auflösung, DPI und Dateigröße.

Mit Bild verkleinern trägst du bei „Neue Breite (px)“ den Wert ein, die Höhe wird proportional berechnet. Das Werkzeug verkleinert nur: Ist ein Bild schmaler als dein Wert, behält es seine Pixelmaße und wird nicht künstlich aufgeblasen.

Schritt 2: Das passende Format wählen

Das Format entscheidet, wie effizient die Pixel gespeichert werden. Eine ausführliche Gegenüberstellung findest du im Ratgeber JPG, PNG, WebP, AVIF und HEIC. Für Websites genügt die folgende Kurzfassung.

Liegen deine Fotos als JPG vor, wandelt JPG in WebP umwandeln sie in WebP um. Dort ist die Qualität fest auf 90 % eingestellt, einen Regler gibt es nicht.

Schritt 3: Die Qualitätsstufe nach Augenmaß wählen

Bei JPG und WebP legt die Qualitätsstufe fest, wie stark das Bild komprimiert wird. Für Website-Fotos ist ein Wert um 80 Prozent ein guter Startpunkt. So steht der Regler „Qualität“ in Bild komprimieren von Haus aus, er reicht dort von 10 bis 100 Prozent. Wie die Prozentzahl zustande kommt, erklärt der Ratgeber Bildkompression verstehen. Richte dich aber nicht blind nach der Zahl, sondern nach dem, was du siehst:

• Betrachte das Ergebnis in voller Größe, nicht als verkleinerte Vorschau. Fehler zeigen sich zuerst in Himmelsflächen, Hauttönen und rund um Schrift.
• Senke die Stufe in 5er-Schritten, bis dir etwas auffällt, und gehe dann eine Stufe zurück.
• Beobachte das Feld „Gespart“: Bringt der Sprung von 80 auf 70 nur noch wenige Prozent, lohnt sich der Qualitätsverlust nicht.

Der Workflow: vom Kamerabild zur fertigen Website-Grafik

So kommst du ohne Einstellungs-Chaos ans Ziel:

1. Kopiere die Originale in einen Arbeitsordner. Die optimierten Dateien sind nur für die Website gedacht, die Originale bleiben unberührt als Archiv.
2. Viele Bilder auf einmal für WordPress? Öffne Bilder für WordPress optimieren, ziehe die Dateien in das Feld und klicke auf „Bilder optimieren“. Die Voreinstellung ist fest: höchstens 1920 px Breite, WebP, 80 % Qualität. Die Ergebnisse holst du dir mit „Alle als ZIP herunterladen“.
3. Brauchst du andere Werte, etwa 800 px für Textbilder? Nimm Bild komprimieren: Trage bei „Maximale Breite (optional)“ die Breite ein, stelle den Regler „Qualität“ ein und klicke auf „Bild komprimieren“. Verkleinern und Komprimieren passieren dabei in einem Durchgang, das Bild wird nur einmal neu gespeichert.
4. Willst du nur die Maße ändern und das Format behalten, genügt Bild verkleinern. Unter „Neue Abmessungen“ siehst du anschließend die genauen Pixelmaße.
5. Lade die Dateien hoch und prüfe die Seite am Smartphone. Mit dem kostenlosen Dienst PageSpeed Insights oder dem Core-Web-Vitals-Bericht der Search Console siehst du, ob Bilder noch als Schwachpunkt auftauchen.

Zwei HTML-Details für Ladezeit und Layout

Baukästen und Themes erledigen das meiste selbst. Neuere WordPress-Versionen versehen Bilder aus der Mediathek in der Regel automatisch mit Größenangaben und verzögertem Laden. Schreibst du HTML von Hand oder nutzt ein anderes System, solltest du beides prüfen:

• Breite und Höhe angeben: Die Attribute width und height am Bild teilen dem Browser die Pixelmaße vorab mit. Er reserviert den Platz, und der Text springt beim Laden nicht mehr. Die passenden Zahlen liefert dir „Neue Abmessungen“ in Bild verkleinern.
• Lazy Loading: Das Attribut loading mit dem Wert lazy sorgt dafür, dass Bilder weiter unten erst geladen werden, wenn der Besucher sich ihnen nähert. Das spart Daten, die sonst nie gebraucht würden.

Typische Fehler, die du dir sparen kannst

Diese Fehler begegnen dir auf fremden und eigenen Seiten immer wieder:

• Ein 4000 Pixel breites Foto hochladen und per Layout auf 600 Pixel schrumpfen lassen: Die Datei bleibt riesig.
• Fotos als PNG ausliefern: Dieselbe Aufnahme ist oft ein Vielfaches größer als JPG oder WebP, ohne dass man es sieht.
• Screenshots mit Text als JPG speichern: Die Schrift franst aus.
• Ein bereits komprimiertes Bild erneut komprimieren, statt vom Original auszugehen. Jede Runde kostet Qualität.

Was Bildoptimierung nicht leisten kann

Schnelle Seiten hängen nicht nur an Bildern. Hosting, Caching, Schriften und eingebundene Skripte, etwa für Statistik oder Werbung, spielen ebenfalls hinein. Optimierte Bilder sind trotzdem meist der günstigste Hebel, weil du ihn ohne Eingriff in die Technik deiner Seite selbst bedienen kannst.

Auch die Werkzeuge haben Grenzen: Sie schreiben JPG, PNG und WebP, aber kein AVIF, und sie erzeugen keine Reihe unterschiedlich großer Fassungen für verschiedene Bildschirme. Das übernimmt in der Regel dein System. WordPress etwa rechnet aus jedem Upload mehrere Größen aus, eine Quelldatei mit 1920 Pixel Breite ist dafür eine solide Basis. Ladezeiten messen die Werkzeuge ebenfalls nicht, ob sich eine Änderung gelohnt hat, siehst du erst in einem Messdienst.

Häufige Fragen