Warum wirken meine Website-Bilder unscharf?

Finde heraus, wann das Bild unscharf wird

Ein Bild wird aufgenommen oder gestaltet, exportiert, hochgeladen, automatisch verarbeitet und schließlich angezeigt. Suche den Schritt, bei dem erstmals Details verloren gehen, und ändere nicht alles gleichzeitig.

Öffne das Original bei 100 % Zoom, dann die tatsächlich hochgeladene Datei und zuletzt das Bild der veröffentlichten Seite. Vergleiche dieselbe Stelle: ein Auge, ein Etikett oder kleine Schrift. Miniaturen können Unterschiede verbergen; starke Vergrößerung zeigt auch bei guten Fotos einzelne Pixel. Ist bereits das Original verwackelt oder falsch fokussiert, brauchst du eine schärfere Vorlage oder ein neues Foto. Ist nur der Export schlecht, korrigiere ihn zuerst.

Ordne das Symptom dem nächsten Prüfschritt zu

Prüfe die Datei, die deine Seite wirklich lädt

Ein großes hochgeladenes Foto kann in der Mediathek liegen, während ein Inhaltsblock oder Theme nur eine Miniatur abruft. Öffne in den Browser-Entwicklerwerkzeugen die Bildanfrage im Netzwerkbereich. Prüfe die Datei, ihre Pixelmaße und die tatsächliche Anzeigegröße.

Eine 300 Pixel breite Miniatur wird in einer 900 Pixel breiten Artikelspalte vergrößert. Das volle Original wäre möglicherweise unnötig groß: Wähle eine passende Zwischenversion im Editor oder Template, statt die Miniatur erneut zu komprimieren.

Bei mehreren Bildquellen kann die gewählte Datei mit der Fenstergröße wechseln. Prüfe Smartphone und Desktop. Unser Leitfaden für responsive Bilder behandelt die Umsetzung; MDN erläutert Bildauswahl und Pixeldichte.

Wähle genügend Pixel für den vorgesehenen Platz

Für ein Foto mit 600 CSS-Pixeln Anzeigegröße kannst du Versionen mit 600 und 1200 Pixeln Breite vergleichen, auch auf einem Smartphone mit hoher Pixeldichte. Prüfe Detail und Dateigröße. Das sind Testgrößen, keine allgemeingültige Vorgabe.

Erstelle mit dem Bildgrößen-Werkzeug eine Kopie aus einem ausreichend großen Original und sperre das Seitenverhältnis. Eine Vergrößerung von 300 auf 1200 Pixel erzeugt keine verlorenen Fotodetails. Weitere Beispiele findest du unter geeignete Bildgrößen für Websites. Ein enger Gesichtsausschnitt aus einem großen Gruppenfoto kann trotzdem zu wenige Pixel enthalten: Prüfe die Maße nach dem Zuschnitt.

Prüfe Kompression und kleine Schrift getrennt

Klötzchen in Farbverläufen, verschmierte Strukturen und Störungen um Buchstaben können auf zu starke verlustbehaftete Kompression hinweisen. Exportiere aus der besten Vorlage bei gleichen Abmessungen mit weniger Kompression. Ein beschädigtes JPG als PNG zu speichern stellt verlorene Details nicht wieder her.

Lies bei Screenshots und Diagrammen die kleinste wichtige Schrift in der vorgesehenen Anzeigegröße. Vergleiche PNG mit dem bisherigen Export; unser JPG-PNG-Vergleich hilft bei der Wahl. Zu kleine Schrift braucht eventuell ein anderes Layout statt höherer Qualität. Erzeuge getrennte Varianten aus dem Original und kennzeichne Maße und Format im Dateinamen, statt verlustbehaftete Downloads wiederholt umzuwandeln.

100 % bedeutet hier die tatsächliche Pixelgröße im Bildbetrachter: Ein Bildpixel wird als ein Bildschirmpixel angezeigt. Der Seitenzoom des Browsers ist eine andere Einstellung.

Beispiel: ein scharfer Upload erscheint im Artikel unscharf

Dein Foto mit 2400 × 1600 Pixeln ist lokal scharf, im 600 Pixel breiten Artikelblock aber weich. Die Seite lädt eine Miniatur mit 300 × 200 Pixeln. Das ist ein erklärendes Beispiel, kein Messergebnis einer bestimmten Website.

1. Bewahre das Original auf und bestätige, dass die Seite die Miniatur verwendet.
2. Wähle im Inhaltsblock oder Template eine passende größere Version.
3. Vergleiche 600 × 400 und 1200 × 800 Pixel bei gleicher Anzeigegröße.
4. Prüfe Smartphone und Desktop sowie die tatsächlich übertragenen Dateigrößen.
5. Behalte die kleinste Version, die alle wichtigen Details zeigt.

Die Lösung ist die passende Bildversion: Weitere Kompression ergänzt keine fehlenden Details. Wird noch die alte Version angezeigt, prüfe die angeforderte Adresse und aktualisiere den betreffenden Cache, bevor du erneut exportierst.

Häufige Fragen

Macht ein anderer DPI-Wert mein Website-Bild schärfer?

Die Auflösungsangabe allein fügt keine Pixel hinzu. Prüfe Pixelmaße, Anzeigegröße und geladene Version. Der Leitfaden zu DPI, PPI und Pixeln erklärt den Unterschied.

Beseitigt WebP die Unschärfe?

Ein anderes Format holt verlorene Details nicht zurück. Beginne mit dem scharfen Original und vergleiche Klarheit und Dateigröße der Exporte.

Warum sieht das Bild in der Mediathek gut aus?

Mediathek und Website können unterschiedliche Versionen in unterschiedlichen Größen anzeigen. Vergleiche die veröffentlichte Datei mit der geprüften Vorschau.