Pourquoi vos images WordPress sont floues après l'upload (et comment corriger)

Neuf fois sur dix, vos images ne sont pas réellement floues — WordPress les a réduites à l’upload et sert désormais la copie plafonnée. Depuis WordPress 5.3, toute image dont la largeur ou la hauteur dépasse 2560px est remplacée en silence par une version -scaled limitée à 2560px sur son plus grand côté, et c’est ce fichier plus petit que votre thème étire pour remplir un hero, un bloc pleine largeur ou un écran retina. La solution consiste à prouver que c’est bien ce qui s’est passé, puis soit à relever le seuil, soit à cesser d’uploader des images plus grandes que la boîte dans laquelle elles s’affichent.

Pourquoi ça arrive

Quand vous uploadez une photo, WordPress exécute wp_create_image_subsizes() (dans wp-admin/includes/image.php). Si le plus grand côté dépasse le big_image_size_threshold — 2560px par défaut — il appelle _wp_image_meta_replace_original(), génère your-photo-scaled.jpg et réécrit les métadonnées du fichier joint pour que la taille full pointe désormais vers la copie réduite. Votre original réel reste conservé sur le disque sous le nom your-photo.jpg et référencé par wp_get_original_image_path(), mais rien côté front-end ne le sert. Chaque taille intermédiaire et chaque candidat srcset est généré à partir du fichier réduit à 2560px, et non de ce que vous avez uploadé.

Voilà d’où vient le flou. Vous uploadez une image nette de 4000px pour un en-tête pleine largeur. WordPress la plafonne à 2560px. Sur un écran standard, dans un conteneur de 1600px de large, tout va bien. Sur un écran retina 2x, le navigateur a besoin d’environ 3200 pixels réels pour remplir ce conteneur avec netteté, n’en a que 2560, et interpole la différence. Bords adoucis, texte incrusté baveux : exactement le symptôme « image floue après l’upload ».

L’autre moitié du même problème, c’est srcset qui choisit une taille trop petite. Si votre thème déclare une largeur de contenu qui ne correspond pas à la boîte réellement rendue, WordPress fournit au navigateur un intermédiaire -1024x683 ou -1536x1024 qui se retrouve étiré. Même cause — boîte d’affichage plus grande que les pixels disponibles — déclencheur différent.

Vérifiez ce que WordPress a réellement servi

Ne devinez pas. Faites un clic droit sur l’image floue, ouvrez-la dans un nouvel onglet et regardez le nom du fichier dans l’URL. S’il se termine par -scaled.jpg ou par un suffixe de dimensions comme -1024x683.jpg, c’est confirmé : le navigateur affiche un dérivé réduit, pas votre upload. Vous pouvez aussi inspecter l’élément et lire currentSrc pour voir exactement quel candidat le navigateur a retenu.

Pour avoir une vue d’ensemble avant de ré-uploader quoi que ce soit, déposez l’image dans l’outil de tailles d’images WordPress — il montre chaque dérivé que WordPress générera à partir de ce fichier précis, y compris si une copie -scaled est créée et à quelles dimensions, pour que vous sachiez d’emblée si votre source est assez grande pour l’endroit où vous la placez.

Côté serveur, vous pouvez lister tous les fichiers plafonnés :

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

Comment corriger, dans l’ordre

1. Si vos images ont légitimement besoin d’être plus grandes que 2560px (grands heros, retina, galeries de qualité impression), relevez le seuil :

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

Ou désactivez complètement le plafond :

add_filter( 'big_image_size_threshold', '__return_false' );

2. Ré-uploadez les images concernées. C’est l’étape que les gens sautent. Modifier le seuil n’affecte que les nouveaux uploads. Les images déjà présentes dans votre médiathèque conservent leurs anciennes métadonnées, et le fait de regenerate thumbnails reconstruit les tailles intermédiaires à partir du fichier -scaled plafonné — cela ne restaure pas la résolution qui a été jetée. La méthode fiable est la suivante : modifiez le filtre, supprimez le fichier joint, puis ré-uploadez.

3. Si votre source fait déjà ≤2560px et reste floue, le seuil n’est pas votre problème — la boîte d’affichage est plus grande que l’image. Uploadez une source plus grande, ou réduisez le conteneur. Pour une netteté retina, votre source doit faire environ le double de la largeur en pixels CSS de la boîte qu’elle remplit.

4. Seulement après tout cela, lancez regenerate thumbnails pour que les tailles intermédiaires soient cohérentes — mais comprenez bien qu’il s’agit d’un nettoyage, pas d’un remède.

Ce qu’il ne faut pas faire

Ne poussez pas la qualité JPEG à 100. WordPress compresse à une qualité par défaut de 82 via wp_editor_set_quality, et la moitié des conseils en ligne vous disent de la surcharger :

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

C’est bien pour réduire les artefacts de compression, mais une image étirée et sur-échantillonnée est un problème de résolution, pas de compression. Passer de 82 à 100 alourdit vos fichiers et ne change presque rien au flou que vous constatez.

Ne désactivez pas -scaled par réflexe. Couper le plafond (il y a un outil pour ça) est le bon choix si vous servez des images au-dessus de 2560px — mais si votre vrai problème est un intermédiaire trop petit qui se retrouve étiré, le désactiver ne change rien et vous perdez les économies de bande passante pour rien. Diagnostiquez d’abord.

N’accusez pas le cache et ne lancez pas regenerate thumbnails en premier. La régénération lit depuis la même source plafonnée, elle ne peut donc pas restaurer le détail. Vider un CDN ou un cache de page ne changera rien à un fichier qui était déjà petit sur le disque au départ.

Ne vous rabattez pas sur le CSS du thème ou sur object-fit. Aucun style n’ajoute de pixels. Si le fichier servi se termine par -scaled ou un suffixe de dimensions, le problème est le fichier, pas la mise en page.

Toujours bloqué ?

Si vous avez confirmé que le fichier servi est bien votre upload en pleine résolution — pas de -scaled, pas de suffixe de dimensions — et qu’il reste flou, vérifiez si un plugin (un optimiseur, un redimensionneur d’images via CDN, ou une bibliothèque de lazy-load) réécrit votre src vers un proxy compressé. Faites passer l’image dans l’outil de tailles d’images pour confirmer ce que WordPress devrait générer, puis comparez avec ce que le navigateur charge réellement. Quand ces deux éléments divergent, c’est que quelque chose entre WordPress et le navigateur est le coupable.