Images Retina : Afficher des graphiques nets sur écrans High-DPI

Mis à jour le: June 28, 2026

Les écrans Retina et haute densité de pixels contiennent plus de pixels dans le même espace physique, un image dimensionnée pour un écran standard apparaît donc douce et pixélisée dessus. Servir des images nettes sur ces écrans signifie préparer des versions à résolution supérieure et indiquer au navigateur quand les utiliser. Ce guide couvre le flux de travail 2x et 3x, la syntaxe srcset qui fournit le bon fichier, et l'équilibre entre la netteté et le poids de la page.

Réponse rapide : comment rendre les images nettes sur les écrans Retina ?

Créez une version de l'image à deux (et pour les téléphones, trois) fois les dimensions en pixels d'affichage, puis utilisez l'attribut srcset pour proposer les deux versions. Le navigateur ne charge le fichier haute résolution que sur les écrans qui peuvent l'afficher, de sorte que les affichages standard ne téléchargent pas les octets supplémentaires. Une photo affichée à 400 pixels de large a besoin d'une source de 800 pixels (2x) pour un Retina. Exportez les deux avec une compression appropriée — le fichier 2x est plus grand mais pas double, car l'efficacité de la compression s'améliore avec la résolution.

Qu'est-ce qu'un écran Retina ou haute densité de pixels ?

Un écran Retina est un terme marketing pour un écran avec une densité de pixels suffisamment élevée pour que l'œil ne puisse distinguer les pixels individuels à distance de vision normale. Apple a inventé ce terme, mais le concept s'applique à la plupart des téléphones, tablettes et ordinateurs portables modernes. La mesure pratique est le ratio de pixels de l'appareil (DPR) — combien de pixels physiques représentent un pixel CSS.

• Un écran 2x a besoin du double des pixels linéaires (quatre fois le total) pour paraître net.
• Un écran de téléphone 3x a besoin de trois fois les pixels linéaires.
• Les écrans standard 1x téléchargent l'image de base et ne perdent rien.

Le guide Mozilla sur le ratio de pixels de l'appareil documente la manière dont les navigateurs signalent et utilisent le DPR, qui est le fondement de toute stratégie d'image Retina.

Comment créer des versions d'images 2x et 3x ?

Commencez à partir d'une source haute résolution et redimensionnez jusqu'à chaque cible plutôt que de mettre à l'échelle un petit fichier. Une photo destinée à un emplacement d'affichage de 400 pixels a besoin d'une version 400px (1x), d'une version 800px (2x) et d'une version 1200px (3x) pour les téléphones.

1. Commencez à partir d'une source au moins aussi grande que votre plus grande cible (3x).
2. Redimensionnez jusqu'à 1x, 2x et 3x de largeur.
3. Compressez chaque version — les fichiers 2x et 3x se compressent mieux par pixel.
4. Exportez en WebP pour les fichiers les plus petits et de haute qualité.
5. Servez toutes les versions et laissez le navigateur choisir.

• Ne jamais mettre à l'échelle une petite image en 2x — elle reste douce et devient juste plus lourde.
• Le fichier 2x est généralement inférieur au double des octets du 1x grâce à une meilleure compression.
• Les versions 3x sont les plus importantes pour les téléphones avec de petits écrans denses.

Comment servir la bonne version avec srcset ?

L'attribut srcset sur une balise <img> indique au navigateur quel fichier charger en fonction du DPR de l'écran. C'est le navigateur qui gère la sélection, vous fournissez donc les options et la syntaxe.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Texte alternatif descriptif"
  width="400" height="300"
/>

• Les descripteurs 1x, 2x, 3x associent les fichiers aux ratios de pixels de l'appareil.
• Le navigateur ne charge que la version qui correspond à l'écran.
• Incluez toujours la largeur et la hauteur pour éviter le décalage de mise en page.
• L'attribut src est la valeur par défaut (fallback) pour les navigateurs plus anciens.

Pour les images réactives qui changent également de dimensions selon la largeur de l'écran, combinez srcset avec l'attribut sizes et les descripteurs de largeur (400w, 800w) au lieu des descripteurs DPR. Le guide sur les images réactives couvre ce modèle plus avancé, et le guide SEO pour les images explique comment des images nettes et correctement dimensionnées aident également la performance de recherche.

Quand utiliser SVG au lieu du rastérisé ?

Pour les logos, icônes et illustrations aux formes plates, vous pouvez contourner tout le problème 2x/3x en utilisant SVG. Les graphiques vectoriels s'adaptent à l'infini sans pénalité de résolution — le même fichier SVG est d'une netteté parfaite sur un moniteur 1x et un téléphone 3x, car il est dessiné à partir de mathématiques plutôt que stocké comme des pixels.

SVG est la bonne réponse chaque fois que l'image est composée de formes plutôt que de détails photographiques. L'inconvénient est que les SVGs doivent être optimisés — les métadonnées inutilisées et le superflu d'édition les gonflent — et le guide SVG vers PNG couvre le flux de travail lorsque vous avez besoin d'une sauvegarde rastérisée pour un environnement qui ne peut pas afficher de vecteurs. Pour un site de marque avec un logo dans l'en-tête, un SVG élimine entièrement la question du Retina pour cet élément.

Tester vos images Retina

Générer les fichiers n'est que la moitié du travail ; vérifier qu'ils se chargent réellement correctement est l'autre moitié. Quelques vérifications confirment que le système fonctionne plutôt que de servir silencieusement le mauvais fichier.

1. Ouvrez la page sur un appareil Retina ou réglez le DPR du navigateur à 2x dans les outils de développement.
2. Inspectez l'élément image et confirmez que le currentSrc chargé est le fichier 2x ou 3x.
3. Passez à un DPR 1x et confirmez qu'il charge le fichier 1x à la place.
4. Vérifiez l'onglet réseau pour confirmer qu'une seule version est téléchargée par écran.
5. Affichez à 100% sur l'écran Retina et confirmez que l'image est nette, pas douce.

La fonction de remplacement du ratio de pixels de l'appareil dans les outils de développement du navigateur vous permet de tester sans appareils physiques, bien qu'un véritable écran Retina soit la preuve finale. Un mode de défaillance courant est une faute de frappe dans le srcset qui force le navigateur à revenir au src de base, ce qui paraît doux sur un Retina sans générer d'erreur. L'onglet réseau détecte cela immédiatement — si vous voyez le fichier 1x se charger sur un écran 2x, le srcset n'est pas correctement configuré.

Équilibrer netteté et poids de page

Le piège des images Retina est de servir des fichiers haute résolution à tous les écrans, ce qui double ou triple le poids de la page pour les utilisateurs qui ne peuvent pas voir la différence. L'approche srcset évite cela, mais seulement si vous générez réellement les versions plus petites et que vous y faites référence. Un seul fichier 3x servi à tout le monde est l'erreur la plus courante.

Le guide web.dev sur les images réactives documente l'impact sur la performance d'une bonne gestion, et le guide Core Web Vitals relie directement le poids de l'image à la métrique LCP qui affecte le classement. Le but est la netteté là où elle apparaît et la retenue partout ailleurs — laissez le navigateur choisir, et générez toutes les versions afin qu'il ait quelque chose de bon à choisir.

Questions fréquemment posées

Comment rendre les images nettes sur les écrans Retina ?

Servez des versions 2x (et optionnellement 3x) d'images rastérisées à la taille d'affichage, en utilisant srcset pour que le navigateur choisisse le bon fichier en fonction du ratio de pixels de l'appareil. Une image 1x sur un écran Retina paraît douce ; la variante 2x restaure la netteté.

Ai-je besoin d'images 2x pour chaque graphique ?

Pour les graphiques nets et les photos de héros, oui — les écrans Retina montrent sinon de la douceur. Pour les images décoratives ou sous le pli (below-the-fold), un seul fichier 1x est souvent suffisant. Servez les deux avec srcset afin que les appareils non-Retina ne téléchargent pas le grand fichier.

Quand devrais-je utiliser SVG au lieu de rastérisé 2x ?

Pour les logos, icônes et graphiques plats, oui — SVG est indépendant de la résolution et reste net quelle que soit la taille sans fichiers supplémentaires. Pour les photographies, le rastérisé (avec des variantes 2x) est toujours le bon choix. Voir le guide SVG vers PNG.

Comment servir des images Retina ?

Utilisez srcset avec des sources 1x et 2x (et optionnellement 3x), laissant le navigateur choisir en fonction du ratio de pixels de l'appareil. Envoyez le 1x comme src par défaut afin que les anciens navigateurs puissent revenir proprement à cette valeur. Le navigateur ne télécharge que la variante dont il a besoin.

Est-ce que srcset ralentit la page ?

Non — le navigateur ne télécharge que la seule variante dont il a besoin, un petit écran reçoit donc le petit fichier. Sans srcset, chaque appareil télécharge le plus grand fichier. srcset économise des octets, il n'en ajoute pas.