Du kannst Bilder für Websites komprimieren, ohne dass sie sichtbar an Qualität verlieren. Dafür passt du zuerst die Bildabmessungen an, wählst ein geeignetes Dateiformat und optimierst anschließend die Komprimierung. So werden die Dateien kleiner, während die Bilder auf deiner Website scharf bleiben.
Grundsätzlich gibt es zwei Arten der Komprimierung: Die verlustfreie Komprimierung (lossless) erhält sämtliche Pixeldaten des Bildes. Die verlustbehaftete Komprimierung (lossy) entfernt dagegen bestimmte Details, um kleinere Dateien zu erzeugen. Mit sinnvollen Einstellungen fällt der Unterschied den meisten Besuchern nicht auf.
Der Weg zum optimierten Bild besteht aus drei Schritten: Größe anpassen, Format wählen, komprimieren.
Hinweis: Dieser Artikel kann Affiliate-Links enthalten. Wenn du über diese Links etwas kaufst, erhalten wir möglicherweise eine kleine Provision – für dich entstehen dabei keine zusätzlichen Kosten.
Table of Contents
Schritt 1: Bilder auf ihre Anzeigegröße skalieren
Oft sparst du durch das Verkleinern der Bildabmessungen mehr Speicherplatz als durch die Komprimierung allein.
Exportiere deine Bilder ungefähr in der Breite, in der sie später auf deiner Website angezeigt werden. Für hochauflösende Displays kannst du bei Bedarf bis zur doppelten Breite gehen. Vermeide es, unnötig große Kamerafotos hochzuladen.
Ein Beispiel:
- Ein Foto mit 4.000 × 3.000 Pixeln enthält 12 Millionen Pixel.
- Skalierst du es auf 1.200 × 900 Pixel, bleiben nur 1,08 Millionen Pixel übrig – rund elfmal weniger.
- Selbst bei 2.400 × 1.800 Pixeln enthält das Bild etwa 2,8-mal weniger Pixel als das Original.
Weniger Pixel bedeuten nicht automatisch, dass die Dateigröße im selben Verhältnis schrumpft. In der Regel werden die Bilder dadurch aber deutlich kleiner.
Mit dem kostenlosen Image Resizer von ByteTony kannst du exakte Abmessungen festlegen und dabei das Seitenverhältnis beibehalten.
Bei responsiven Websites benötigen unterschiedliche Geräte oft unterschiedliche Bildbreiten. WordPress erstellt automatisch mehrere Bildgrößen und kann mithilfe von srcset und sizes dafür sorgen, dass der Browser eine passende Version auswählt.
Das gilt auch für KI-generierte Grafiken. Wenn du eigene Bilder erstellen möchtest, findest du in unserem Ratgeber KI-Bilder kostenlos erstellen eine einfache Anleitung.
Schritt 2: Das passende Dateiformat wählen
Welches Format am besten geeignet ist, hängt vom Bildinhalt und vom Verwendungszweck ab.
| Format | Am besten geeignet für | Komprimierung | Transparenz |
|---|---|---|---|
| JPEG | Fotos und breite Kompatibilität | Verlustbehaftet | Nein |
| PNG | Screenshots und Grafiken, die pixelgenau bleiben sollen | Verlustfrei | Ja |
| WebP | Die meisten Website-Bilder | Beides | Ja |
| AVIF | Besonders kleine Bilddateien, sofern unterstützt | Beides | Ja |
WebP ist für die meisten Websites eine praktische Standardwahl. Laut der offiziellen WebP-Dokumentation von Google sind verlustbehaftete WebP-Dateien bei vergleichbarer gemessener Qualität etwa 25–34 % kleiner als JPEG-Dateien.
AVIF kann in manchen Fällen noch kleinere Dateien erzeugen. Die Ergebnisse hängen allerdings vom Bild und den Komprimierungseinstellungen ab. Moderne Browser unterstützen AVIF, manche Bildbearbeitungsprogramme und Upload-Dienste jedoch noch nicht.
Für Screenshots mit kleiner Schrift eignen sich PNG oder verlustfreies WebP. Bei Logos und Icons ist SVG eine gute Wahl, sofern es unterstützt wird. WordPress erlaubt SVG-Uploads standardmäßig nicht; dafür ist eine zusätzliche, sichere Konfiguration erforderlich.
Mit dem kostenlosen Bildkonverter von ByteTony kannst du deine Bilder direkt im Browser in verschiedene Formate umwandeln.
Schritt 3: Bilder für Websites komprimieren – ohne sichtbaren Qualitätsverlust
Wenn du Bilder für Websites komprimieren möchtest, solltest du mit einer moderaten Komprimierungsstufe beginnen und anschließend das Ergebnis überprüfen.
Für Fotos ist ein Qualitätswert von etwa 75–85 bei verlustbehafteter Komprimierung ein guter Ausgangspunkt – allerdings keine feste Regel. Der ideale Wert hängt vom Bild, vom Format und vom verwendeten Tool ab.
Höhere Werte können die Dateigröße deutlich erhöhen, ohne dass die Bildqualität sichtbar besser wird.
Bei Screenshots und Grafiken mit feiner Schrift hilft verlustfreie Komprimierung, scharfe Kanten und gut lesbaren Text zu erhalten.
Bevor du ein Bild hochlädst:
- Vergleiche das Original und die komprimierte Version in der 100-%-Ansicht.
- Achte auf feine Details, Text, Himmelsflächen, Farbverläufe und scharfe Kanten.
- Wenn du Unschärfe, sichtbare Farbstufen (Banding) oder Kompressionsartefakte entdeckst, erhöhe den Qualitätswert.
- Vergleiche die Dateigrößen und wähle die kleinste Version, die noch gut aussieht.
Ein paar Vorsichtsmaßnahmen helfen dir dabei:
- Bewahre das Originalbild auf. Du brauchst es möglicherweise für spätere Bearbeitungen.
- Vermeide mehrfaches verlustbehaftetes Speichern. Verwende möglichst die Originaldatei, damit sich Qualitätsverluste nicht aufsummieren.
- Prüfe die Metadaten. EXIF-Daten können Kamerainformationen und GPS-Koordinaten enthalten. Entferne unnötige Metadaten, wenn es sinnvoll ist, und kontrolliere, was dein Tool tatsächlich entfernt.
Mit dem kostenlosen Bildkomprimierer von ByteTony kannst du die Bildqualität anpassen oder eine gewünschte Dateigröße festlegen. Deine Bilder werden lokal im Browser verarbeitet und nicht auf die Server von ByteTony hochgeladen.
Häufig gestellte Fragen (FAQ)
Wie groß sollten Bilder auf einer Website sein?
Als grober Richtwert kannst du für Hero-Bilder eine Dateigröße unter 200 KB und für kleinere Artikelbilder unter 100 KB anstreben.
Das sind jedoch keine offiziellen Grenzwerte. Detailreiche Bilder benötigen möglicherweise mehr Speicherplatz, während einfache Grafiken oft deutlich kleiner ausfallen.
Wichtiger als eine feste Dateigröße sind passende Bildabmessungen, eine gute visuelle Qualität und die tatsächliche Ladegeschwindigkeit deiner Website.
Komprimiert WordPress Bilder automatisch?
Teilweise. WordPress erstellt kleinere Versionen hochgeladener Bilder und verwendet beim Kodieren unterstützter Bildformate eigene Qualitätseinstellungen.
Die Standardqualität liegt bei 82 für JPEG und bei 86 für WebP. Außerdem kann WordPress sehr große Bilder automatisch verkleinern, wenn ihre Breite oder Höhe den standardmäßigen Schwellenwert von 2560 Pixeln überschreitet. Das hängt vom Bildformat und der Website-Konfiguration ab.
Allerdings bedeutet das nicht, dass jedes Originalbild automatisch vollständig optimiert oder in WebP umgewandelt wird. Auch Themes, Plugins und Servereinstellungen können das Ergebnis beeinflussen.
Deshalb lohnt es sich weiterhin, Bilder bereits vor dem Hochladen zu skalieren und zu optimieren.
Fazit
Wenn du Bilder für Websites komprimieren möchtest, ohne sichtbare Qualitätsverluste in Kauf zu nehmen, kommt es auf drei Dinge an: passende Abmessungen, ein effizientes Dateiformat und sinnvolle Komprimierungseinstellungen.
Für die meisten Website-Bilder ist WebP ein guter Ausgangspunkt. Vergleiche das Ergebnis immer mit dem Original und bewahre deine Ausgangsdateien auf.
Probiere es an einem bestehenden Blogbild mit den kostenlosen Bildtools von ByteTony aus. Vergleiche die Dateigrößen vorher und nachher und finde heraus, wie viel Speicherplatz du sparen kannst, ohne dass deine Bilder sichtbar an Qualität verlieren.
Hat dir dieser Ratgeber gefallen? Unterstütze ByteTony und hilf uns, noch mehr einfache und einsteigerfreundliche Technik-Ratgeber zu erstellen.
☕ ByteTony unterstützen
