Warum Ihr Bild nach dem Hochladen unscharf aussieht

Die fünf Ursachen auf einen Blick

Ein scharfes Foto sieht nach dem Hochladen meist aus einem von fünf Gründen unscharf aus. Finden Sie Ihr Symptom und lesen Sie dann den passenden Abschnitt unten.

Ursache 1: Plattform-Rekompression

Die meisten Webplattformen — soziale Medien, Website-Baukästen, CMS-Systeme, E-Commerce-Plattformen — komprimieren Bilder nach dem Hochladen, um Speicherkosten zu senken und Ladezeiten zu verbessern. Die angewandte Kompression ist oft aggressiv und auf eine durchschnittliche Dateigrößenreduktion optimiert, nicht auf Ihr spezifisches Bild.

Das Ergebnis ist eine Version Ihres Fotos, die durch zwei Kompressionsdurchgänge ging: einmal, als Sie es aus Ihrer Kamera oder Ihrem Editor exportierten, und erneut, als die Plattform es rekomprimierte. Jeder verlustbehaftete Durchgang fügt neue Artefakte zu den bestehenden hinzu. Weiche Verläufe entwickeln Banding. Scharfe Kanten werden weich. Feine Details verschwinden. Minderungsstrategien:

• Laden Sie in höherer Qualität hoch, als Sie zu brauchen meinen. Plattformen, die rekomprimieren, arbeiten mit Ihrer hochgeladenen Version. Wenn Sie in JPEG-Qualität 95 hochladen, startet die Rekompression der Plattform von einer saubereren Basis als bei Qualität 70.
• Laden Sie in den exakten Anzeigemaßen hoch, wenn Sie sie kennen. Eine Plattform, die ein Bild bereits in Zielgröße erhält, überspringt oder reduziert vielleicht die Skalierung, was einen der Degradationsschritte vermeidet.
• Prüfen Sie die Dokumentation der Plattform auf empfohlene Upload-Spezifikationen. Viele Plattformen veröffentlichen die Maße und das Format, die sie für beste Qualität empfehlen.

Ursache 2: ein kleineres Bild als die Anzeigegröße hochladen

Wenn Sie ein 600 Pixel breites Bild hochladen und es 1200 Pixel breit angezeigt wird, muss der Browser es hochskalieren, damit es in den Container passt. Ein Bild über seine ursprünglichen Maße hinaus hochzuskalieren — Upscaling — legt das zugrunde liegende Pixelraster frei. Das Bild sieht je nach Skalierungsalgorithmus weich, unscharf oder blockig aus. Die Lösung ist, ein Quellbild zu verwenden, das mindestens so groß wie die Anzeigegröße ist und vorzugsweise 2× so groß für hochdichte (Retina-) Bildschirme. Eine Anzeigebreite von 800 CSS-Pixeln auf einem Retina-Bildschirm braucht ein 1600-Pixel-Bild, um scharf zu erscheinen. Das passiert, wenn:

• Sie ein Foto vor dem Hochladen zu aggressiv verkleinern und kleiner als die Anzeigegröße werden
• Sie ein Foto verwenden, das auf einem alten Gerät mit einer Kamera niedriger Auflösung aufgenommen wurde
• Sie einen Screenshot auf einem Nicht-Retina-Display machen und ihn in einem Retina-Kontext anzeigen
• Sie eine miniaturbildgroße Version eines Bildes in einen Platz hochladen, der es groß zeigt

Ursache 3: Retina-/High-Density-Display-Diskrepanz

Retina- und hochdichte Displays (auch HiDPI oder 2×-Displays genannt) nutzen zwei physische Pixel, um jedes CSS-Pixel darzustellen. Ein Standardbereich von 100×100 CSS-Pixeln nutzt auf diesen Bildschirmen ein 200×200 physisches Pixelraster. Wenn Sie ein Bild bereitstellen, das nur 100×100 Pixel groß ist, für einen Platz, der 200×200 braucht, erscheint es auf Retina-Geräten unscharf, während es auf Standard-Displays gut aussieht.

Die meisten modernen Laptops, iPhones, iPads, High-End-Android-Telefone und viele Desktop-Monitore sind hochdichte Displays. Wenn Ihr Publikum moderne Geräte nutzt und Ihre Bilder auf Ihrem Monitor scharf, aber für andere unscharf aussehen, ist eine Retina-Diskrepanz die wahrscheinliche Ursache.

Die Lösung: Bilder in der 2-fachen CSS-Anzeigegröße bereitstellen. Für einen 400 Pixel breiten CSS-Platz laden Sie ein 800 Pixel breites Bild hoch.

Ursache 4: falsches Format verursacht visuelle Artefakte, die wie Unschärfe aussehen

Starke JPEG-Kompression kann Artefakte erzeugen, die eher als Unschärfe denn als Blockigkeit erscheinen — besonders in weichen Verlaufsbereichen wie Himmel, Haut und unscharfen Hintergründen. Was wie ein unscharfes Bild aussieht, kann tatsächlich ein stark komprimiertes JPEG sein, bei dem feine Details wegquantisiert wurden.

Der Test: Zoomen Sie auf eine scharfe Kante im Bild (ein Textzeichen, eine kontrastreiche Kontur). Wenn die Kante weich aussieht und von Farbrauschen umgeben ist, liegt das Problem an JPEG-Kompressionsartefakten. Wenn die Kante scharf ist, dem Gesamtbild aber Details fehlen, liegt das Problem an unzureichender Auflösung.

Beheben Sie JPEG-Artefakte, indem Sie in einer höheren Qualitätseinstellung hochladen oder zu WebP konvertieren, das Verläufe bei gleichwertigen Dateigrößen sauberer handhabt.

Ursache 5: die DPI-Verwirrung

Bildeditoren zeigen oft einen „DPI"- oder „PPI"-Wert in den Dateieinstellungen. Manche reduzieren diesen Wert in der Annahme, dass er die Dateigröße verringert oder ändert, wie das Bild auf dem Bildschirm aussieht. Er tut weder noch. DPI (dots per inch) ist nur für den Druck bedeutsam — es sagt einem Drucker, wie dicht er Tinte auftragen soll. Bildschirme nutzen Pixel, nicht dots per inch, und der DPI-Wert in einem JPEG oder PNG wird von allen Browsern ignoriert.

Ein Bild im Bildeditor von 300 DPI auf 72 DPI zu reduzieren, macht es auf dem Bildschirm nicht kleiner oder unschärfer — es sei denn, der Editor hat gleichzeitig auch die Pixelmaße neu abgetastet (skaliert). Prüfen Sie, ob sich die Pixelmaße geändert haben. Wenn nicht, hatte die DPI-Änderung keine Wirkung auf die Webversion.

Präventions-Checkliste

• Bilder in 2-facher CSS-Anzeigebreite für Retina-Schärfe hochladen
• In JPEG-Qualität 85+ oder WebP-Qualität 82+ vor der Plattform-Rekompression hochladen
• Vor dem Hochladen die empfohlenen Bildmaße der Plattform prüfen
• Niemals ein kleines Bild hochskalieren, um einen großen Platz zu füllen — von einer hochauflösenden Quelle ausgehen
• WebP oder AVIF statt JPEG verwenden, wo die Plattform es erlaubt — sie handhaben Qualitätskompression eleganter