Les cinq causes en un coup d’œil
Une photo nette paraît généralement floue après le téléversement pour l’une de cinq raisons. Trouvez votre symptôme, puis lisez la section correspondante ci-dessous.
| Cause | Comment le repérer | Solution |
|---|---|---|
| Recompression de la plateforme | Floue après téléversement, nette avant | Téléversez en qualité 85 ou plus |
| Image plus petite que l’emplacement | Floue ou pixelisée ; le navigateur l’a agrandie | Utilisez une source au moins à la taille d’affichage |
| Décalage retina | Nette sur ordinateur, floue sur téléphone | Fournissez 2× la largeur d’affichage CSS |
| Artefacts JPEG | Bruit de couleur autour des bords et dégradés | Augmentez la qualité ou passez au WebP |
| Confusion DPI | Vous avez changé le DPI et rien ne s’est amélioré | Ignorez le DPI ; seuls les pixels comptent |
Cause 1 : recompression de la plateforme
La plupart des plateformes web — réseaux sociaux, créateurs de sites, systèmes CMS, plateformes e-commerce — compressent les images après le téléversement pour réduire les coûts de stockage et améliorer les temps de chargement. La compression appliquée est souvent agressive et optimisée pour une réduction moyenne de la taille de fichier, pas pour votre image spécifique.
Le résultat est une version de votre photo passée par deux passes de compression : une fois quand vous l’avez exportée depuis votre appareil ou votre éditeur, et de nouveau quand la plateforme l’a recompressée. Chaque passe avec perte ajoute de nouveaux artefacts par-dessus les existants. Les dégradés doux développent du banding. Les bords nets s’adoucissent. Le détail fin disparaît. Stratégies d’atténuation :
- Téléversez dans une qualité plus élevée que ce que vous pensez nécessaire. Les plateformes qui recompressent travaillent avec votre version téléversée. Si vous téléversez en qualité JPEG 95, la recompression de la plateforme part d’une base plus propre qu’en qualité 70.
- Téléversez aux dimensions d’affichage exactes si vous les connaissez. Une plateforme qui reçoit une image déjà à la taille cible peut sauter ou réduire le redimensionnement, ce qui évite l’une des étapes de dégradation.
- Consultez la documentation de la plateforme pour les spécifications de téléversement recommandées. Beaucoup de plateformes publient les dimensions et le format qu’elles recommandent pour la meilleure qualité.
Cause 2 : téléverser une image plus petite que la taille d’affichage
Si vous téléversez une image de 600 pixels de large et qu’elle est affichée à 1200 pixels de large, le navigateur doit l’agrandir pour qu’elle remplisse le conteneur. Agrandir une image au-delà de ses dimensions d’origine — l’upscaling — révèle la grille de pixels sous-jacente. L’image paraît molle, floue ou pixelisée selon l’algorithme de mise à l’échelle. La solution est d’utiliser une image source au moins aussi grande que la taille d’affichage, et de préférence 2× plus grande pour les écrans haute densité (retina). Une largeur d’affichage de 800 pixels CSS sur un écran retina nécessite une image de 1600 pixels pour paraître nette. Cela arrive quand :
- Vous réduisez une photo trop agressivement avant le téléversement, en allant plus petit que la taille d’affichage
- Vous utilisez une photo prise sur un vieil appareil avec un capteur basse résolution
- Vous faites une capture d’écran sur un écran non-retina et l’affichez dans un contexte retina
- Vous téléversez une version de la taille d’une miniature vers un emplacement qui l’affiche en grand
Cause 3 : décalage d’écran retina / haute densité
Les écrans retina et haute densité (aussi appelés HiDPI ou écrans 2×) utilisent deux pixels physiques pour afficher chaque pixel CSS. Une zone standard de 100×100 pixels CSS utilise une grille de 200×200 pixels physiques sur ces écrans. Si vous fournissez une image de seulement 100×100 pixels pour un emplacement qui en nécessite 200×200, elle paraît floue sur les appareils retina tout en paraissant correcte sur les écrans standard.
La plupart des ordinateurs portables modernes, iPhones, iPads, téléphones Android haut de gamme et de nombreux moniteurs de bureau sont des écrans haute densité. Si votre public utilise des appareils modernes et que vos images paraissent nettes sur votre moniteur mais floues quand d’autres les voient, un décalage retina est la cause probable.
La solution : fournissez des images à 2× les dimensions d’affichage CSS. Pour un emplacement CSS de 400 pixels de large, téléversez une image de 800 pixels de large.
Cause 4 : un mauvais format crée des artefacts visuels qui ressemblent à du flou
Une forte compression JPEG peut produire des artefacts qui apparaissent comme du flou plutôt que comme de la pixelisation — en particulier dans les zones de dégradé doux comme le ciel, la peau et les arrière-plans flous. Ce qui ressemble à une image floue peut en fait être un JPEG très compressé où le détail fin a été quantifié et supprimé.
Le test : zoomez sur un bord net de l’image (un caractère de texte, un contour à fort contraste). Si le bord paraît mou et entouré de bruit de couleur, le problème vient des artefacts de compression JPEG. Si le bord est net mais que l’image globale manque de détail, le problème est une résolution insuffisante.
Corrigez les artefacts JPEG en téléversant avec un réglage de qualité plus élevé ou en convertissant au WebP, qui gère les dégradés plus proprement à tailles de fichier équivalentes.
Cause 5 : la confusion du DPI
Les éditeurs d’images affichent souvent une valeur « DPI » ou « PPI » dans les réglages du fichier. Certaines personnes réduisent cette valeur en pensant que cela réduira la taille de fichier ou changera l’aspect de l’image à l’écran. Cela ne fait ni l’un ni l’autre. Le DPI (points par pouce) n’a de sens que pour l’impression — il indique à une imprimante avec quelle densité déposer l’encre. Les écrans utilisent des pixels, pas des points par pouce, et la valeur DPI d’un JPEG ou PNG est ignorée par tous les navigateurs.
Réduire une image de 300 DPI à 72 DPI dans un éditeur d’images ne la rend ni plus petite ni plus floue à l’écran — sauf si l’éditeur a aussi rééchantillonné (redimensionné) les dimensions en pixels en même temps. Vérifiez si les dimensions en pixels ont changé. Si non, le changement de DPI n’a eu aucun effet sur la version web.
Liste de contrôle de prévention
- Téléversez les images à 2× la largeur d’affichage CSS pour une netteté retina
- Téléversez en qualité JPEG 85+ ou WebP 82+ avant la recompression de la plateforme
- Vérifiez les dimensions d’image recommandées par la plateforme avant de téléverser
- N’agrandissez jamais une petite image pour remplir un grand emplacement — partez d’une source haute résolution
- Utilisez WebP ou AVIF au lieu de JPEG là où la plateforme le permet — ils gèrent la compression de qualité avec plus d’élégance