Bilder fürs Web vorbereiten: Qualitätscheck

Die meisten Bilder, die auf einer Website schlecht aussehen, sind keine schlechten Fotos. Sie wurden in der falschen Größe exportiert, im falschen Format, zum falschen Zeitpunkt geschärft oder mit einem Farbprofil geliefert, das der Browser stillschweigend ignoriert. Keines dieser Probleme ist schwer zu beheben. Man muss sie nur in der richtigen Reihenfolge prüfen.

Dieser Ratgeber liefert diese Reihenfolge. Er beginnt mit den zwei Entscheidungen, die den meisten Schaden anrichten – Anzeigegröße und Format – und arbeitet sich dann durch Farbe, Schärfung, Kompression und die kleinen Details vor, die eine Seite fertig wirken lassen. Am Ende steht eine wiederverwendbare Checkliste.

1. Von der Größe ausgehen, die der Browser braucht – nicht von der Dateigröße

Eine Kamera liefert viel mehr Pixel, als eine Webseite nutzen kann. Ein Foto mit 6000 px Breite in einer 720 px breiten Spalte verschwendet Bandbreite, macht die Seite langsamer und bringt sichtbar nichts. Umgekehrt ist es schlimmer: Ein 400 px breites Bild, das über eine volle Breite gestreckt wird, sieht weich aus, egal wie sorgfältig es bearbeitet wurde.

Arbeite dich vom Layout nach innen:

• Miss die größte Breite, die das Bild in CSS-Pixeln einnimmt. Bei einem bildschirmbreiten Header auf einer 1440-px-Seite ist das meist die Inhaltsbreite, sobald Ränder und Spalten abgezogen sind.
• Multipliziere mit 2 für hochauflösende Bildschirme, wenn das Bild wichtig ist. Ein Bild, das mit 720 px angezeigt wird, kann mit 1440 px exportiert werden, damit es auf einem Smartphone oder einem Notebook mit hoher Pixeldichte scharf bleibt.
• Setze eine Obergrenze dort, wo zusätzliche Pixel nicht mehr sichtbar sind. Bei redaktionellen Bildern ist diese Grenze schnell erreicht: Über etwa 2500 px an der langen Kante sind Bilder fast immer schwerer als nötig.

Erscheint dasselbe Motiv an drei Stellen – Karte, Abschnittsbild und Header –, exportiere drei Größen. CSS kann ein großes Bild verkleinern, aber der Browser lädt in jedem Platz trotzdem die größte Version herunter.

2. DPI ist ein Metadatum, keine Web-Einstellung

Die Idee der „72 DPI“ hält sich, weil sie leicht zu wiederholen ist. Sie beschreibt nicht, wie Browser Bilder anzeigen. Der Browser liest die Pixelabmessungen aus der Datei und legt das Bild in CSS-Pixeln aus; der DPI-Wert in den Metadaten fließt in dieses Layout nicht ein.

Zwei praktische Folgen:

• DPI von 300 auf 72 zu ändern macht eine Datei nicht kleiner oder schneller. Das gelingt nur durch erneutes Kodieren mit kleineren Pixelmaßen.
• Die Zahl, die im Exportdialog zählt, sind Breite und Höhe in Pixeln, nicht das DPI-Feld. Bietet der Dialog beides an, ändere die Pixel.

3. Das Format nach dem Inhalt wählen

Es gibt kein universell bestes Format, nur eine gute Passung zwischen Inhalt und Codec. Die nützliche Aufteilung sieht so aus:

Inhalt	Sinnvolles Ausgangsformat	Warum
Fotografien, strukturierte Szenen, weiche Verläufe	JPEG, WebP oder AVIF	Diese Formate kommen mit weichen Tonübergängen gut zurecht und komprimieren Fotos effizient
Flache Grafiken, Icons, Logos, Illustrationen mit harten Kanten	SVG, wenn vektoriell, sonst PNG oder WebP	Verlustbehaftete Kompression erzeugt sichtbare Säume und Unschärfe an harten Kanten
Screenshots und Bedienoberflächen	PNG oder WebP	Text und feine Linien überstehen eine verlustfreie oder sehr hochwertige Kodierung
Alles, was Transparenz braucht	PNG, WebP oder AVIF	JPEG hat keinen Alphakanal: transparente Flächen werden zu einer Volltonfläche
Bilder, die in möglichst vielen alten Programmen funktionieren müssen	JPEG oder PNG	Beide Formate werden überall verstanden

Zwei Formatfehler lohnen sich, ausdrücklich zu nennen. Der erste ist, einen Screenshot als JPEG in niedriger Qualität zu exportieren: Jeder Buchstabe und jede Tabellenlinie bekommt einen Hof, und das Bild ist nicht mehr lesbar. Der zweite ist, ein Foto in ein SVG zu packen. SVG ist ein Vektorformat – ein Rasterbild darin wird nicht schärfer, es wird nur in eine größere Datei verpackt.

Moderne Formate wie WebP und AVIF erzeugen bei vergleichbarer Qualität oft eine kleinere Datei, sind aber nicht automatisch besser, wenn der eigene Arbeitsablauf das Ergebnis nicht anzeigen kann. Exportiere, öffne die Datei und vergleiche sie in der Größe, in der sie tatsächlich erscheint.

4. Farbe vor dem Export korrigieren und vereinheitlichen

Die sichere Annahme für die Auslieferung im Web ist sRGB. Bildschirme, Browser und die meisten Veröffentlichungsplattformen behandeln sRGB als Bezugspunkt. Trägt ein Bild ein erweitertes Profil – etwa Display P3 –, kann es so angezeigt werden, als wäre es sRGB. Dadurch werden satte Farben übersättigt und feine Verläufe zu sichtbaren Stufen.

Ein sinnvoller Ablauf:

1. In dem Profil bearbeiten, das man braucht, wenn der Arbeitsplatz farbverwaltet ist.
2. Das Dokument vor dem letzten Export nach sRGB konvertieren, statt ihm ein sRGB-Profil ohne Konvertierung zuzuweisen. Zuweisen ändert nur das Etikett; Konvertieren ändert die Werte, damit sie zum neuen Ziel passen.
3. Die exportierte Datei noch einmal im Web in einem normalen Browser-Tab ansehen. Diese letzte Prüfung zeigt Streifen in Himmeln, ausgefressene Lichter und Profilfehler, die ein farbverwalteter Editor verbirgt.

Wer Grafiken mit exakten Markenfarben veröffentlicht, sollte das veröffentlichte Ergebnis mit der Pipette prüfen. Manche Farben verschieben sich beim Konvertieren aus einem erweiterten Farbraum leicht – besser, das vorher zu wissen, als wenn hundert Bilder online sind.

5. Nach dem Verkleinern schärfen, nie davor

Beim Verkleinern geht Detail verloren und das Bild wirkt leicht weich. Die übliche Gegenmaßnahme ist eine milde Ausgabeschärfung nach der Größenänderung, in den finalen Pixelmaßen. Vorher zu schärfen ist nicht gleichwertig: Die Größenänderung mittelt anschließend einen Teil der Schärfung weg, und Artefakte, die in voller Größe unsichtbar waren, können in der kleinen Datei stecken bleiben.

Halte die Ausgabeschärfung zurückhaltend. Text, feine Linien und kontrastreiche Kanten zeigen Überschärfung zuerst als helle oder dunkle Säume. Vergleiche das exportierte Ergebnis vor dem Hochladen bei 100 %. Ein leicht weiches Bild wirkt natürlich, ein überschärftes wirkt beschädigt.

Dieselbe Logik gilt für die Rauschreduzierung. Aggressive Entrauschung entfernt Korn und feine Textur zugleich. Wende sie deshalb in einer Größe nahe der finalen an und prüfe das Ergebnis dort.

6. Für das Ziel komprimieren und dann prüfen

Bei der Kompression tauscht man Qualität gegen Gewicht. Es gibt keine universell richtige Einstellung, aber einige Gewohnheiten halten diesen Tausch ehrlich:

• Mit einer Qualität beginnen, die bei 100 % sauber aussieht, nicht mit dem niedrigsten Wert, den ein Regler zulässt.
• In der Anzeigegröße beurteilen. Ein Bild, das in einer 300-px-Karte sitzt, muss nicht bei 300 % pixelgenau bestehen.
• Die Dateigröße zwischen Exportversuchen vergleichen: Dieselbe sichtbare Qualität ist häufig für deutlich weniger Bytes zu haben.
• Ein etwas kleineres Bild einem schlecht komprimierten vorziehen. Die Maße um 10 % zu reduzieren kostet meist weniger Qualität, als die Kompression bis zum selben Byte-Ziel zu treiben.

Als grober Anhaltspunkt bleiben viele redaktionelle Vorschaubilder nach korrekter Größenänderung bequem unter 100 KB, Abschnittsbilder unter 250 KB und bildschirmbreite Header unter 400 KB. Das sind Prüfpunkte, keine Regeln, die um jeden Preis zu treffen sind.

7. Transparenz bewusst behandeln

Braucht ein Bild einen transparenten Hintergrund, wähle ein Format, das ihn tatsächlich unterstützt – PNG, WebP oder AVIF – und prüfe das Ergebnis auf der Hintergrundfarbe, auf der es liegen wird. Halbtransparente Kanten können einen Saum zeigen, wenn das Bild mit einer Hintergrundfarbe exportiert wurde, die nicht zur Seite passt.

Wird keine Transparenz gebraucht, spart das Entfernen Bytes. Ein Logo auf die exakte Hintergrundfarbe der Seite zu reduzieren erlaubt oft eine kleinere Datei und verhindert, dass ein blasses Rechteck um die Grafik auf einem anderen Hintergrund erscheint.

8. Text gehört nicht ins Bild

Text in einem Rasterbild hat drei Nachteile: Er wird unscharf, sobald das Bild skaliert wird, er lässt sich weder markieren noch übersetzen, und Suchmaschinen können ihn nicht lesen. Überschriften, Bildunterschriften, Bedienelemente und Beschriftungen gehören in HTML und CSS. Muss ein Textelement aus gestalterischen Gründen Teil eines Bildes sein, exportiere es in der Anzeigegröße und skaliere es danach nicht mehr.

Die Ausnahme ist der Screenshot einer echten Oberfläche, in dem Text das Produkt belegt und nicht Seiteninhalt ist. Auch dort sollte möglichst in der finalen Anzeigegröße aufgenommen werden.

9. Mit den Details abschließen, die eine Seite funktionieren lassen

Kleine Details sind keine Dekoration, sie verändern das Verhalten der Seite:

• Breiten- und Höhenattribute. Die intrinsischen Maße anzugeben lässt den Browser den Platz vor dem Laden reservieren, sodass das Layout nicht springt.
• Lazy Loading. Bilder unterhalb des ersten Bildschirms verzögert laden, damit der obere Bereich zuerst erscheint. Das Hauptbild nicht verzögern – es bestimmt meist das größte sichtbare Element.
• Alternativtext. Beschreibe, was das Bild zeigt und warum es da ist. Ein kurzer, konkreter Satz ist besser als eine Keyword-Liste; dekorative Bilder bekommen ein leeres alt.
• Dateiname. hero-photo-2026.jpg altert schlecht; team-werkstatt-raw-dateien-bearbeiten.jpg beschreibt die Szene auch Jahre später.
• Eine letzte Sichtprüfung auf einer echten Seite. Exportieren, auf einer Prüfseite veröffentlichen und das Bild im Kontext in einem Fenster in Smartphone-Größe ansehen. Eine Datei kann alle technischen Prüfungen bestehen und trotzdem die falsche Größe für das Layout haben.

10. Ein Arbeitsablauf, der in den Browser passt

Nichts davon verlangt eine Desktop-Anwendung. Wenn nur noch Zuschneiden, Geraderücken, Belichtung, Farbkonvertierung und ein richtig dimensionierter Export ausstehen, reicht ein Editor im Browser – und er verhindert das klassische Problem, ein Bildbearbeitungsprogramm zu öffnen und unterwegs „noch alles andere zu verbessern“. Der Foto-Editor von FreeAIGeneration läuft im Browser ohne Pflichtkonto, und der RAW-Foto-Editor übernimmt Dateien, die vor diesen letzten Schritten eine Rohdatenentwicklung brauchen.

Für Logos und einfache Linienzeichnungen erzeugt ein SVG-Export aus dem Vektor-Editor eine Datei, die in jeder Größe scharf bleibt und kaum Gewicht hat. Bewahre das Quelldokument neben dem exportierten Asset auf, damit die nächste Person das Bild aktualisieren kann, statt es neu zu bauen.

Verspricht ein Werkzeug, ein Bild mit einer KI-Funktion zu verbessern – Hochskalieren, Rauschentfernung, Objektersetzung –, lies das Versprechen genau, bevor du dich darauf verlässt. Unsere Erklärung dazu, was „KI-gestützt“ wirklich bedeutet, beschreibt, wie diese Funktionen dargestellt werden und was man prüfen sollte.

Die Checkliste

Bevor ein Bild online geht:

1. Anzeigegröße gemessen, Exportgröße entschieden, hochauflösende Variante gewählt, wo sie zählt.
2. Pixelmaße angepasst; DPI als Web-Einstellung ignoriert.
3. Format am Inhalt ausgerichtet; kein Text in einem Rasterbild außer bei einem Screenshot.
4. Farbe nach sRGB konvertiert und im Browser geprüft.
5. Ausgabeschärfung und Rauschreduzierung nach der Größenänderung angewendet.
6. Kompression in Anzeigegröße beurteilt, Dateigröße zwischen den Versuchen verglichen.
7. Transparenz bewusst behandelt oder entfernt.
8. Breite, Höhe, Alternativtext, Dateiname und Ladestrategie auf der Seite gesetzt.
9. Ein letzter Blick auf die veröffentlichte Seite in einem Fenster in Smartphone-Größe.

Sind diese neun Prüfungen erledigt, ist das Qualitätsproblem meist verschwunden, bevor irgendjemand einen Code-Editor öffnet.