Warum WordPress-Bilder nach dem Upload unscharf sind (und wie du es behebst)

In neun von zehn Fällen sind deine Bilder gar nicht wirklich unscharf — WordPress hat sie beim Upload verkleinert und liefert jetzt die gedeckelte Kopie aus. Seit WordPress 5.3 wird jedes Bild, das breiter oder höher als 2560px ist, klammheimlich durch eine -scaled-Version ersetzt, die an der längsten Kante auf 2560px gedeckelt ist — und genau diese kleinere Datei zieht dein Theme dann auf, um einen Hero, einen Block über die volle Breite oder ein Retina-Display zu füllen. Die Lösung besteht darin, erst nachzuweisen, dass genau das passiert ist, und dann entweder den Schwellenwert anzuheben oder aufzuhören, Bilder hochzuladen, die größer sein müssen als die Box, in der sie sitzen.

Warum das passiert

Wenn du ein Foto hochlädst, führt WordPress wp_create_image_subsizes() (in wp-admin/includes/image.php) aus. Ist die längste Kante größer als der big_image_size_threshold — standardmäßig 2560px — ruft es _wp_image_meta_replace_original() auf, erzeugt your-photo-scaled.jpg und schreibt die Anhang-Metadaten so um, dass die full-Größe nun auf die verkleinerte Kopie zeigt. Dein echtes Original bleibt als your-photo.jpg auf der Festplatte erhalten und ist über wp_get_original_image_path() referenziert, aber im Frontend wird es von nichts ausgeliefert. Jede Zwischengröße und jeder srcset-Kandidat wird aus der 2560px-Datei generiert, nicht aus dem, was du hochgeladen hast.

Und daher kommt die Unschärfe. Du lädst ein gestochen scharfes 4000px-Bild für einen randlosen Header hoch. WordPress deckelt es auf 2560px. Auf einem Standard-Display in einem 1600px breiten Container ist das kein Problem. Auf einem 2x-Retina-Bildschirm braucht der Browser rund 3200 echte Pixel, um diesen Container scharf zu füllen, hat aber nur 2560 und rechnet die Differenz hoch. Weiche Kanten, matschiger Text-im-Bild — exakt das Symptom „nach dem Upload unscharf”.

Die andere Hälfte desselben Problems ist ein srcset, das eine zu kleine Größe auswählt. Wenn dein Theme eine Content-Breite meldet, die nicht zur tatsächlich gerenderten Box passt, reicht WordPress dem Browser eine -1024x683- oder -1536x1024-Zwischengröße, und die wird hochskaliert. Gleiche Ursache — Anzeigebox größer als die verfügbaren Pixel — anderer Auslöser.

Prüfe, was WordPress tatsächlich ausgeliefert hat

Rate nicht. Rechtsklick auf das unscharfe Bild, in einem neuen Tab öffnen und den Dateinamen in der URL ansehen. Endet er auf -scaled.jpg oder ein Maßsuffix wie -1024x683.jpg, ist es bestätigt: Der Browser rendert ein herunterskaliertes Derivat, nicht deinen Upload. Du kannst das Element auch inspizieren und currentSrc auslesen, um genau zu sehen, welchen Kandidaten der Browser gewählt hat.

Um das ganze Bild zu sehen, bevor du irgendetwas neu hochlädst, wirf das Bild ins WordPress Bilder-Tool — es zeigt dir jedes Derivat, das WordPress aus genau dieser Datei generiert, einschließlich der Frage, ob eine -scaled-Kopie erstellt wird und in welchen Abmessungen. So weißt du vorab, ob deine Quelle groß genug ist für die Stelle, an der du sie platzierst.

Auf dem Server kannst du dir alle gedeckelten Dateien auflisten lassen:

find wp-content/uploads -name '*-scaled.*'

So behebst du es, der Reihe nach

1. Wenn deine Bilder tatsächlich größer als 2560px sein müssen (große Heros, Retina, druckfähige Galerien), hebe den Schwellenwert an:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

Oder schalte die Deckelung komplett ab:

add_filter( 'big_image_size_threshold', '__return_false' );

2. Lade die betroffenen Bilder neu hoch. Das ist der Schritt, den die meisten überspringen. Das Ändern des Schwellenwerts betrifft nur neue Uploads. Bilder, die schon in deiner Mediathek liegen, behalten ihre alten Metadaten, und ein Neuerzeugen der Vorschaubilder baut die Zwischengrößen aus der gedeckelten -scaled-Datei neu auf — es holt keine Auflösung zurück, die bereits weggeworfen wurde. Der zuverlässige Weg ist: Filter ändern, den Anhang löschen, erneut hochladen.

3. Wenn deine Quelle bereits ≤2560px ist und trotzdem unscharf, ist der Schwellenwert nicht dein Problem — die Anzeigebox ist größer als das Bild. Lade eine größere Quelle hoch oder verkleinere den Container. Für Retina-Schärfe muss deine Quelle etwa doppelt so breit sein wie die CSS-Pixelbreite der Box, die sie füllt.

4. Erst nach all dem die Vorschaubilder neu erzeugen, damit die Zwischengrößen konsistent sind — aber sei dir bewusst, dass das Aufräumen ist, keine Heilung.

Was du nicht tun solltest

Dreh die JPEG-Qualität nicht auf 100. WordPress komprimiert über wp_editor_set_quality auf eine Standardqualität von 82, und die Hälfte der Ratschläge im Netz sagt dir, du sollst das überschreiben:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

Das ist in Ordnung, um Kompressionsartefakte zu reduzieren, aber ein gedehntes, hochskaliertes Bild ist ein Auflösungsproblem, kein Kompressionsproblem. Von 82 auf 100 zu gehen bläht deine Dateien auf und bringt für die Unschärfe, die du siehst, so gut wie nichts.

Deaktiviere -scaled nicht reflexartig. Die Deckelung abzuschalten (dafür gibt es ein Tool) ist die richtige Entscheidung, wenn du Bilder über 2560px auslieferst — aber wenn dein eigentliches Problem eine zu kleine, gedehnte Zwischengröße ist, ändert das Abschalten nichts, und du verlierst die Bandbreiteneinsparung ohne Grund. Erst diagnostizieren.

Gib nicht dem Cache die Schuld und erzeuge nicht zuerst die Vorschaubilder neu. Das Neuerzeugen liest aus derselben gedeckelten Quelle und kann daher keine Details wiederherstellen. Ein CDN- oder Seiten-Cache zu leeren rührt an keiner Datei, die von vornherein klein auf der Festplatte lag.

Greif nicht zum CSS des Themes oder zu object-fit. Kein noch so ausgefeiltes Styling fügt Pixel hinzu. Wenn die ausgelieferte Datei auf -scaled oder ein Maßsuffix endet, ist die Datei das Problem, nicht das Layout.

Immer noch fest?

Wenn du bestätigt hast, dass die ausgelieferte Datei dein Upload in voller Auflösung ist — kein -scaled, kein Maßsuffix — und sie trotzdem weich ist, prüfe, ob ein Plugin (ein Optimizer, ein CDN-Bildresizer oder eine Lazy-Load-Bibliothek) deine src auf einen komprimierten Proxy umschreibt. Lass das Bild durch das Bilder-Tool laufen, um zu bestätigen, was WordPress eigentlich generieren sollte, und vergleiche das dann mit dem, was der Browser tatsächlich lädt. Wenn diese beiden nicht übereinstimmen, ist irgendetwas zwischen WordPress und dem Browser der Schuldige.