Pourquoi les images de mon site sont-elles floues ?

Repérez l’étape où la netteté disparaît

Une image passe par la prise de vue ou la création, l’export, l’envoi, le traitement automatique et l’affichage. Cherchez où les détails disparaissent pour la première fois, sans modifier tous les réglages à la fois.

Ouvrez l’original à 100 %, puis le fichier envoyé et enfin celui que la page publiée charge. Comparez le même œil, la même étiquette ou les mêmes lettres. Une miniature masque parfois les différences ; un fort zoom révèle les pixels même dans une bonne photo. Si l’original souffre d’une mauvaise mise au point ou de flou de mouvement, utilisez une meilleure source ou refaites la photo. Si seul l’export est mauvais, corrigez-le avant le site.

Choisissez la vérification adaptée au symptôme

Vérifiez le fichier réellement chargé

Le gestionnaire de contenu peut conserver le grand original mais afficher une miniature ou une version intermédiaire. Dans les outils de développement du navigateur, ouvrez la requête de l’image dans le panneau Réseau. Notez ses dimensions et comparez-les à l’espace occupé sur la page.

Une miniature de 300 pixels affichée dans une colonne de 900 pixels est agrandie. Charger l’original entier peut être excessif : choisissez une version intermédiaire adaptée dans l’éditeur ou le modèle, plutôt que de recompresser la miniature.

La source choisie peut changer selon la fenêtre. Testez téléphone et ordinateur. Consultez notre guide des images adaptatives et la documentation MDN sur les sources et la densité de pixels.

Prévoyez assez de pixels pour l’affichage

Pour une photo affichée sur 600 pixels CSS de largeur, comparez des fichiers de 600 et 1200 pixels, notamment sur un téléphone à forte densité. La version plus grande peut montrer davantage de détails, mais vérifiez son poids. Ce sont des essais, pas une règle universelle.

Créez une copie avec l’outil de redimensionnement depuis un original suffisamment grand, en verrouillant les proportions. Passer de 300 à 1200 pixels ne reconstitue pas les détails. Le guide des dimensions d’image pour les sites propose d’autres exemples. Un recadrage serré autour d’un petit visage réduit aussi les pixels disponibles : contrôlez les dimensions après la coupe.

Examinez la compression et les petits caractères

Des dégradés en blocs, des textures étalées et des parasites autour des lettres peuvent signaler une compression trop forte. Repartez de la meilleure source avec les mêmes dimensions et moins de compression. Enregistrer un JPG abîmé en PNG conserve les défauts.

Lisez les plus petits caractères utiles d’une capture ou d’un schéma à la taille prévue. Comparez PNG et l’export actuel avec le guide JPG ou PNG. Un texte trop petit peut nécessiter une nouvelle mise en page. Gardez des essais distincts issus de l’original, nommés par dimensions et format, plutôt que de convertir plusieurs fois une copie avec perte.

Ici, 100 % signifie la taille réelle en pixels dans un logiciel de visualisation : un pixel de l’image correspond à un pixel de l’écran. Le zoom de la page dans le navigateur est un réglage distinct.

Exemple : une photo nette devient floue dans un article

Votre photo de 2400 × 1600 pixels est nette localement, mais floue dans un bloc de 600 pixels. La page charge une miniature de 300 × 200 pixels. Cet exemple illustre une démarche, sans présenter une mesure réelle.

1. Conservez l’original et confirmez que la page utilise la miniature.
2. Choisissez une version plus grande dans le bloc ou le modèle.
3. Comparez 600 × 400 et 1200 × 800 à largeur affichée identique.
4. Vérifiez téléphone et ordinateur, ainsi que le poids des fichiers réellement chargés.
5. Gardez la plus petite version qui montre les détails nécessaires.

La bonne version corrige le problème ; recompresser la miniature n’ajoute aucun détail. Si l’ancienne image reste visible, vérifiez l’adresse demandée et actualisez le cache concerné avant de refaire un export.

Questions fréquentes

Changer les DPI rend-il l’image plus nette ?

L’étiquette de résolution n’ajoute pas de pixels. Vérifiez les dimensions, l’affichage et la version chargée. Consultez le guide DPI, PPI et pixels.

WebP corrige-t-il le flou ?

Un changement de format ne récupère pas les détails perdus. Partez d’une source nette et comparez la qualité et le poids des exports.

Pourquoi la médiathèque montre-t-elle une image nette ?

La médiathèque et la page peuvent utiliser des versions et des tailles différentes. Comparez le fichier publié à l’aperçu vérifié.