Ein Bild kann eine Website aufwerten – oder sie spürbar langsamer machen. Häufig liegt das nicht am Motiv, sondern an falschem Dateiformat, unnötigen Pixelmaßen oder zu aggressiver (oder fehlender) Komprimierung. Wer Bilder bewusst vorbereitet, bekommt drei Vorteile gleichzeitig: schnellere Ladezeiten, stabilere Layouts und eine konsistente visuelle Qualität über Geräte hinweg.
In diesem Artikel geht es darum, wie sich Bildkompression praxisnah steuern lässt: Welches Format passt zu welchem Bildtyp, welche Export-Entscheidungen sind wirklich wichtig und wie sieht ein verlässlicher Workflow aus – unabhängig davon, ob Photoshop, Affinity Photo oder Figma genutzt wird.
Woran scheitert Bildqualität im Web am häufigsten?
Viele Probleme entstehen, weil Bilder wie für Print oder Social Media exportiert werden. Im Web gelten andere Spielregeln: unterschiedliche Displays, dynamische Layouts, variable Bandbreiten und Browser, die Bilder je nach Situation anders skalieren.
Typische Symptome und ihre Ursachen
Unscharfe Bilder entstehen oft, wenn ein zu kleines Bild im Frontend hochskaliert wird (z. B. 800 px breit hochgeladen, aber 1400 px breit angezeigt). Auch falsches Nachschärfen kann Details „matschig“ wirken lassen.
Artefakte (Blockbildung, „Mückenrauschen“ um Kanten) sind ein klassisches Zeichen für zu starke verlustbehaftete Komprimierung bei Fotos – oder für ein Foto, das fälschlich als PNG gespeichert wurde und dann später hart nachkomprimiert wird.
Zu große Dateien kommen häufig durch unnötige Pixelmaße (z. B. 5000 px Breite für ein Layout, das maximal 1600 px zeigt) oder durch Formate, die für den Inhalt ungeeignet sind (z. B. PNG für Fotomotive).
Warum „einfach WebP nehmen“ nicht immer reicht
WebP ist in vielen Fällen eine sehr gute Wahl – aber nicht in allen. Logos mit sehr harten Kanten, Screenshots mit feinen UI-Linien oder Motive mit Transparenz können je nach Inhalt und Kompressionsgrad sichtbar verlieren. Außerdem bleibt die Frage: Welche Qualitätseinstellung passt, und wann ist ein anderes Format besser?
PNG, JPG, WebP, SVG: Welches Format für welchen Zweck?
Eine gute Faustregel: Das Bildformat folgt dem Inhalt. Fotos, Grafiken, UI-Screenshots und Illustrationen haben unterschiedliche Eigenschaften. Darum ist die Formatwahl ein Design- und Performance-Thema zugleich.
JPG (JPEG): stark für Fotos ohne Transparenz
JPG ist verlustbehaftet: Es wirft Bildinformationen weg, um die Datei klein zu halten. Das funktioniert gut bei Fotos und weichen Verläufen. Problematisch wird es bei scharfen Kanten (z. B. Text im Screenshot) oder bei wiederholten Exporten, weil Qualität schrittweise verloren geht.
PNG: gut für harte Kanten und Transparenz, aber oft zu groß
PNG ist in der Regel verlustfrei und unterstützt Transparenz. Das macht es geeignet für Grafiken mit klaren Kanten oder wenn Transparenz zwingend ist. Für Fotos ist PNG meist unnötig groß. In der Praxis sind auch UI-Screenshots oft als PNG okay – allerdings lohnt sich hier häufig ein Test mit WebP (verlustfrei oder moderat verlustbehaftet).
WebP: flexibel, oft kleiner, aber Qualität bewusst einstellen
WebP kann sowohl verlustbehaftet als auch verlustfrei speichern. Für viele Websites ist es das Standardformat für Fotomotive, weil es bei ähnlicher Qualität oft deutlich kleinere Dateien liefert. Wichtig ist, die Qualitätseinstellung nicht „blind“ hochzudrehen oder zu stark zu reduzieren, sondern gezielt zu prüfen (vor allem an Kanten, Hauttönen und feinen Strukturen).
SVG: ideal für Logos, Icons und einfache Illustrationen
SVG ist Vektor und skaliert ohne Qualitätsverlust. Perfekt für Logos, Icons und einfache Formen. Für komplexe Illustrationen kann ein SVG allerdings groß werden. Außerdem sollte Text im SVG (wenn möglich) vermieden oder in Pfade umgewandelt werden, wenn es um exakte Darstellung geht. Für einen sauberen Export lohnt sich der Workflow aus SVG fürs Web – Export in Illustrator und Figma korrekt.
Qualität kontrollieren: Was beim Export wirklich zählt
Gute Ergebnisse entstehen nicht durch „maximale Qualität“, sondern durch passende Auflösung, sinnvolle Komprimierung und eine kurze Sichtprüfung an kritischen Stellen.
Pixelmaße: so groß wie nötig, nicht größer
Ein Bild sollte in seinen Pixelmaßen zur größten Darstellung im Layout passen (inklusive höherer Pixeldichte bei Retina-Displays). Praktisch bedeutet das: Für eine Darstellung von z. B. 800 px Breite ist eine Quelldatei von 1600 px oft sinnvoll, damit sie auf hochauflösenden Displays sauber bleibt. Alles darüber erhöht meist nur die Dateigröße.
Kompressionsgrad: lieber testen als raten
Ein zuverlässiger Weg ist ein kurzer A/B-Vergleich: zwei Exporte mit unterschiedlichem Kompressionsgrad, dann im Browser bei 100% Ansicht prüfen. Kritische Bereiche sind: feine Schrift im Bild, diagonale Linien, Hauttöne, Haarstrukturen und weiche Verläufe. Wenn dort Fehler sichtbar werden, ist der Kompressionsgrad zu aggressiv.
Nachschärfen: dezent, am Ende der Kette
Nachschärfen hilft, wenn Bilder beim Verkleinern weich werden. Zu viel Nachschärfen erzeugt Halos (helle Ränder) oder „knusprige“ Kanten. Wichtig: erst auf das finale Pixelmaß bringen, dann minimal nachschärfen, dann exportieren. So bleibt das Ergebnis kontrollierbar.
Ein schneller Entscheidungsweg für den Alltag
Damit die Formatwahl nicht jedes Mal neu diskutiert wird, hilft eine einfache Logik. Sie ist bewusst pragmatisch – und lässt Raum für Tests, wenn ein Motiv „aus der Reihe“ fällt.
- Ist es ein Logo/Icon oder eine einfache Illustration? Dann SVG prüfen (oder PNG, wenn Vektor nicht möglich ist).
- Ist es ein Foto ohne Transparenz? Dann WebP (verlustbehaftet) oder JPG testen.
- Ist Transparenz nötig (Freisteller, Overlay)? Dann WebP (mit Transparenz) oder PNG nutzen – je nach Ergebnis.
- Ist es ein UI-Screenshot mit Text und Linien? Dann PNG oder WebP (verlustfrei/moderat) testen.
- Wirkt es trotz Tests unruhig oder fleckig? Dann Kompression reduzieren oder auf ein anderes Format wechseln.
Praxis-Workflow: Bilder exportieren, prüfen, ausliefern
Ein stabiler Workflow reduziert Rückfragen und verhindert, dass „irgendwelche“ Dateien in der Mediathek landen. Besonders in Teams lohnt sich eine klare Reihenfolge vom Master bis zur Web-Version.
1) Master-Datei sauber halten
Die Ausgangsdatei sollte in hoher Qualität bleiben (z. B. PSD/AFPHOTO oder ein unkomprimiertes Original). Web-Exporte sind Ableitungen. Das verhindert, dass bei späteren Änderungen mehrfach komprimiert werden muss.
2) Export-Varianten klar benennen
Sinnvoll ist eine Benennung, die den Einsatz beschreibt, zum Beispiel: hero-produkt-1600.webp oder team-portrait-1200.jpg. So lässt sich später leichter entscheiden, ob ein Bild ersetzt werden muss.
3) Im Kontext prüfen: nicht nur im Export-Dialog
Ein Export kann „okay“ aussehen, aber im Layout trotzdem auffallen: weil er skaliert wird, weil ein dunkler Hintergrund Artefakte sichtbar macht oder weil Text über dem Bild liegt. Darum gehört ein kurzer Check im echten Frontend oder im Prototyp dazu. Für Layout-Prioritäten hilft außerdem Above the Fold im Webdesign – Inhalte priorisieren ohne Rätselraten, weil Bilder dort besonders streng bewertet werden (Ladezeit und Blickfang).
Kurze Arbeitsanleitung für den Export
- Finale Anzeigegröße im Layout klären (maximale Breite/Höhe).
- Bild auf diese Größe (oder moderat größer für Retina) skalieren.
- Format wählen: Foto → WebP/JPG, Grafik/Transparenz → WebP/PNG, Icon/Logo → SVG.
- Komprimierung in 2 Stufen exportieren (z. B. „moderat“ und „stärker“) und visuell vergleichen.
- Auf kritische Stellen zoomen: Kanten, Text, Hauttöne, Verläufe.
- Finale Datei benennen und in konsistente Ordnerstruktur ablegen.
Vergleich: WebP vs. JPG vs. PNG im Projektalltag
Die folgende Übersicht hilft, typische Entscheidungen schneller zu treffen. Sie ersetzt keinen Motiv-Test, macht aber die Stärken sichtbar.
| Format | Stärken | Schwächen | Typische Einsätze |
|---|---|---|---|
| JPG | Klein bei Fotos, breite Unterstützung | Keine Transparenz, Artefakte bei starker Kompression | Fotogalerien, Portraits, Editorial-Bilder |
| PNG | Transparenz, scharfe Kanten, oft verlustfrei | Große Dateien bei Fotos | UI-Screens, Grafiken, einfache Freisteller |
| WebP | Sehr gute Kompression, kann Transparenz, flexibel | Qualität muss aktiv geprüft werden (je Motiv) | Standard für viele Web-Fotos, gemischte Motive |
| SVG | Skaliert ohne Qualitätsverlust, sehr scharf | Nicht ideal für Fotos, kann bei komplexen Formen groß werden | Icons, Logos, UI-Symbole, simple Illustrationen |
Häufige Stolpersteine bei Bildern in WordPress
Auch wenn Bilder perfekt exportiert sind, können CMS- und Theme-Einstellungen die Qualität beeinflussen. Deshalb lohnt ein Blick auf typische Fallen.
Automatische Skalierung und falsche Zuschnitte
WordPress erzeugt mehrere Bildgrößen. Wenn im Theme eine Größe verwendet wird, die nicht zur Darstellung passt, kann das zu unnötiger Skalierung führen. Das Ergebnis wirkt dann weich oder lädt langsamer als nötig. Ein kurzer Check im Frontend (welche Bilddatei wird wirklich geladen?) verhindert das.
Zu viele unterschiedliche Bildstile
Wenn im Projekt manche Bilder sehr scharf und andere sichtbar komprimiert sind, wirkt das Design uneinheitlich. Hier hilft ein kleines „Bildprofil“: Standard-Exportformat pro Bildtyp, klare Maximalgrößen und ein Minimal-Check vor dem Upload. Für systematische Qualitätssicherung passt außerdem Webdesign-Fehler finden: UI-Checks vor dem Launch.
Text als Bild: selten eine gute Idee
Text im Bild ist schwer zu lesen, skaliert schlecht und ist für Barrierefreiheit ungünstig. Wenn Text zwingend ist (z. B. Kampagnenmotiv), sollte die Kompression besonders vorsichtig gewählt werden, damit Buchstaben nicht ausfransen. Besser ist fast immer: Text als HTML setzen und das Bild als Hintergrund/Visual nutzen.
Qualität und Performance zusammen denken
Bildoptimierung ist kein reines Technik-Thema. Es ist ein Teil von UI/UX, weil Ladezeiten und visuelle Klarheit direkt beeinflussen, wie vertrauenswürdig und „wertig“ eine Seite wirkt. Wer außerdem im Layout mit vielen visuellen Ebenen arbeitet, sollte Bildqualität mit Tiefenwirkung abstimmen – zum Beispiel mit gezielten Schatten und Kontrasten. Dazu passt UI-Design mit Schatten und Tiefe – moderne Layer-Effekte planen.
In der Praxis lohnt sich ein einfacher Standard: pro Bildtyp ein bevorzugtes Format, klare Größen, kurzer Sichtcheck im Layout. So wird Dateigröße reduzieren zur Routine, ohne dass die Gestaltung darunter leidet.
