Qu'est-ce que le Device Pixel Ratio (DPR) ? Pourquoi les images sont floues sur les écrans Retina

Vous passez des jours à concevoir un site web. Vous importez un logo PNG parfaitement net, vous le prévisualisez sur votre moniteur de bureau, et tout paraît impeccable. Puis vous ouvrez exactement la même page sur un iPhone, un MacBook ou un écran 4K—et votre logo semble terne, mou et visiblement flou sur les contours.

Pendant ce temps, le texte de cette même page reste d’une netteté chirurgicale. Les titres semblent gravés dans le verre, alors que les photos, les icônes et les bannières principales semblent tout droit sorties d’un vieux site web de 2005.

Pourquoi un écran haut de gamme haute résolution rend-il les graphismes moins bons au lieu de les sublimer ?

La réponse tient en un seul concept chiffré : le Device Pixel Ratio (DPR) (ratio de pixels de l’appareil).

Comprendre le DPR est l’une des compétences les plus pratiques pour tout designer web, développeur frontend ou propriétaire de site. Une fois que vous aurez saisi comment les navigateurs gèrent les écrans haute densité, vous ne publierez plus jamais une image floue ni ne rencontrerez de difficultés avec l’affichage d’images responsives.

---

Le problème fondamental : Pixels matériels vs Pixels de mise en page

Pour comprendre le DPR, il faut observer comment fonctionnaient autrefois les écrans d’ordinateur.

Pendant des décennies, les écrans numériques obéissaient à un principe simple : un pixel dans votre code correspondait à une diode physique sur le moniteur.

Si votre écran avait une résolution native de 1024 × 768, il contenait 1 024 émetteurs de lumière RGB microscopiques à l’horizontale et 768 à la verticale. Si vous écriviez une ligne de CSS indiquant width: 200px;, votre navigateur ordonnait au moniteur d’allumer exactement 200 points matériels sur la dalle.

À cette époque, les écrans affichaient une densité d’environ 72 à 96 pixels par pouce (PPI / PPP). Un bouton de 100 pixels occupait à peu près la même taille physique sur quasiment tous les moniteurs de bureau de la planète.

La révolution des smartphones a brisé cette règle

Tout a basculé en 2010 avec l’arrivée sur le marché grand public des écrans haute densité (notamment le premier « Retina Display » d’Apple sur l’iPhone 4).

Les fabricants de matériel ont alors intégré quatre fois plus de pixels sur la même surface physique d’écran. Une dalle d’iPhone qui contenait auparavant 320 × 480 pixels intégrait soudainement 640 × 960 pixels physiques sur un écran de poche de 3,5 pouces.

Ce bond en avant a provoqué une crise immédiate pour le web.

Si les navigateurs avaient continué à traiter un pixel CSS comme un pixel physique :

• Un site web classique conçu pour ordinateur (960px de large) se serait retrouvé réduit à la taille d’un timbre-poste.
• Les liens de navigation et les boutons n’auraient mesuré que 2 ou 3 millimètres de large—impossibles à toucher avec un doigt humain.
• Le texte courant aurait nécessité une loupe pour être déchiffré.

Les navigateurs ne pouvaient pas se permettre de casser tous les sites web d’Internet. Pour surmonter ce problème, les ingénieurs des navigateurs et les groupes de standardisation du web ont scindé la notion de « pixel » en deux entités distinctes :

1. Pixels physiques (Pixels matériels) : Les points lumineux microscopiques réels intégrés physiquement à la dalle d’affichage.
2. Pixels CSS (Pixels logiques / Pixels de référence) : Une unité abstraite employée par les navigateurs web pour la mise en page, la typographie, les espacements et les media queries.

Le Device Pixel Ratio (DPR) est tout simplement le taux de conversion entre ces deux univers.

---

Qu’est-ce que le Device Pixel Ratio (DPR) exactement ?

Le Device Pixel Ratio (DPR) est le rapport entre les pixels matériels physiques et les pixels logiques CSS sur un affichage donné.

$$\text{DPR} = \frac{\text{Pixels matériels physiques}}{\text{Pixels logiques CSS}}$$

Vous pouvez également concevoir le DPR comme la réponse à cette question fondamentale :

« Combien de points matériels physiques cet écran utilise-t-il pour afficher un simple carré de 1px défini dans ma feuille de style CSS ? »

Voici comment les catégories d’écrans les plus courantes traduisent cette formule :

1. Écrans standards (DPR = 1.0)

• Ce que cela signifie : 1 pixel CSS = 1 pixel matériel physique.
• Où on les trouve : Anciens moniteurs de bureau 1080p (24 ou 27 pouces), ordinateurs portables bureautiques d’entrée de gamme, téléviseurs plus anciens.
• Comment cela s’affiche : Une image de 100 × 100 pixels occupe exactement 100 × 100 diodes matérielles sur l’écran. Il n’y a aucun redimensionnement, aucune interpolation ni étirement.

2. Écrans High-DPI / Retina (DPR = 2.0)

• Ce que cela signifie : 1 pixel CSS = 2 pixels physiques sur chaque axe.
• Où on les trouve : MacBook Air, MacBook Pro, iPad, écrans 4K réglés à 200 % de mise à l’échelle, de nombreuses tablettes Android.
• Comment cela s’affiche : Les pixels étant comptabilisés en deux dimensions (largeur et hauteur), une zone de $1 \times 1$ pixel CSS repose sur une grille de $2 \times 2$—ce qui signifie que 4 pixels physiques sont mobilisés pour afficher une seule unité logique de mise en page !

3. Écrans mobiles à ultra-haute densité (DPR = 3.0)

• Ce que cela signifie : 1 pixel CSS = 3 pixels physiques sur chaque axe.
• Où on les trouve : De l’iPhone 13 Pro à l’iPhone 16 Pro, gamme Samsung Galaxy S, téléphones haut de gamme Google Pixel.
• Comment cela s’affiche : Une zone de $1 \times 1$ pixel CSS s’appuie sur une grille de $3 \times 3$ diodes matérielles. Cela représente 9 points matériels physiques allumés pour chaque pixel CSS individuel !

---

Tableau de référence du DPR : Appareils courants

Appareil	Résolution physique de l’écran	Taille du viewport CSS	Device Pixel Ratio (DPR)	Points physiques par pixel CSS
Moniteur de bureau standard 24”	1920 × 1080	1920 × 1080	1.0x	1 point ($1 \times 1$)
MacBook Air 13” (M2/M3)	2560 × 1664	1280 × 832	2.0x	4 points ($2 \times 2$)
MacBook Pro 16” (M3 Max)	3456 × 2234	1728 × 1117	2.0x	4 points ($2 \times 2$)
Écran 4K 27” (à 200 % d’échelle)	3840 × 2160	1920 × 1080	2.0x	4 points ($2 \times 2$)
PC portable Windows 14” (à 150 % d’échelle)	1920 × 1080	1280 × 720	1.5x	2.25 points
iPhone 15 / 16 (Standard)	2556 × 1179	393 × 852	3.0x	9 points ($3 \times 3$)
Samsung Galaxy S24 Ultra	3120 × 1440	384 × 832	3.0x	9 points ($3 \times 3$)
iPad Air 11”	2360 × 1640	1180 × 820	2.0x	4 points ($2 \times 2$)

Remarquez-vous un détail particulier sur les PC portables Windows ?
Observez le DPR de 1.5x sur le portable Windows. Alors qu’Apple s’en tient strictement à des multiplicateurs entiers (comme 2.0x et 3.0x), les paramètres d’affichage de Windows autorisent une mise à l’échelle fractionnaire (125 %, 150 %, 175 %). Cela implique que le DPR peut être un nombre à virgule tel que 1.25 ou 1.5 !

---

Pourquoi les images deviennent-elles floues sur les écrans à fort DPR ?

Maintenant que vous savez qu’un iPhone ou un MacBook mobilise de 4 à 9 points matériels pour chaque pixel CSS de mise en page, l’origine des visuels flous devient limpide.

Suivons un exemple concret étape par étape :

Imaginez que vous disposiez du logo d’un client. Dans votre feuille de style CSS, vous lui attribuez une dimension définie :

.site-logo {
  width: 200px;
  height: 60px;
}

Pour occuper cet espace, vous exportez un fichier PNG nommé logo.png mesurant exactement 200 × 60 pixels, et vous l’insérez dans votre page :

<img src="logo.png" class="site-logo" alt="Acme Corp">

Voici ce qui se produit en coulisses en fonction de l’écran utilisé par votre visiteur :

Scénario A : Votre visiteur utilise un moniteur de bureau 1080p (DPR = 1)

• Le navigateur réserve un emplacement de 200 × 60 pixels CSS à l’écran.
• L’écran dispose de 1 point matériel par pixel CSS.
• Surface matérielle totale : $200 \times 60 = 12,000$ diodes matérielles.
• Votre fichier image fournit : $200 \times 60 = 12,000$ pixels d’image.
• Résultat : Correspondance parfaite 1 pour 1. Chaque pixel du fichier image tombe pile sur un pixel physique. Le logo apparaît totalement net.

Scénario B : Votre visiteur utilise un MacBook Pro ou un écran 4K (DPR = 2)

• Le navigateur réserve toujours un bloc de mise en page de 200 × 60 pixels CSS afin de préserver l’agencement de la page.
• MAIS l’écran possède un DPR de 2.0. Ce bloc s’étend désormais sur 400 × 120 pixels physiques matériels !
• Surface matérielle totale : $400 \times 120 = 48,000$ diodes matérielles.
• Votre fichier image ne compte toujours que : $200 \times 60 = 12,000$ pixels.
• Le navigateur se retrouve privé de 36 000 pixels de données visuelles !
• Résultat : Le navigateur n’a d’autre choix que d’étirer votre image au double de sa dimension d’origine. Il applique une interpolation bilinéaire ou bicubique pour deviner la couleur des pixels manquants. Les contours s’estompent, les lignes franches perdent leur rigueur et le logo paraît flou.

Scénario C : Votre visiteur utilise un iPhone 16 Pro (DPR = 3)

• Le bloc CSS de 200 × 60 recouvre maintenant 600 × 180 pixels physiques ($108,000$ diodes matérielles).
• Votre image de 12 000 pixels est étirée sur une surface 9 fois plus grande en pixels !
• Résultat : Flou prononcé, pixellisation et lettrage baveux.

Pourquoi le texte n’est-il pas affecté par ce phénomène ?

Vous pourriez vous demander : si les images sont étirées, pourquoi le texte HTML reste-t-il aussi net ?

Le texte n’emploie pas de pixels matriciels (bitmap). Les polices d’écriture sont des tracés vectoriels décrits mathématiquement par des courbes et des coordonnées (courbes de Bézier).

Lorsqu’un navigateur affiche un paragraphe de texte sur un écran 2x ou 3x, le système d’exploitation recalcule et dessine la géométrie des caractères directement à la résolution physique native de la dalle. Il calcule ces courbes parfaites en exploitant l’ensemble des 48 000 ou 108 000 pixels matériels disponibles.

C’est la raison pour laquelle une image matricielle floue choque particulièrement sur un écran haute densité : elle côtoie une typographie vectorielle à la netteté irréprochable !

---

Comment vérifier votre DPR actuel dans n’importe quel navigateur

Vous n’avez besoin d’aucun outil sophistiqué ni d’extension pour consulter le Device Pixel Ratio de l’écran sur lequel vous lisez ces lignes.

Méthode 1 : Utiliser la console du navigateur

1. Ouvrez les outils de développement de votre navigateur (appuyez sur F12 sous Windows/Linux, ou Cmd + Option + I sur Mac).
2. Cliquez sur l’onglet Console.
3. Saisissez :

   window.devicePixelRatio

4. Appuyez sur Entrée.

Le nombre affiché correspond exactement au DPR actif de votre écran. Sur un écran classique, il renverra 1. Sur un MacBook Retina, il renverra 2. Sur un iPhone, il renverra 3.

Méthode 2 : Surveiller les variations de DPR en JavaScript

Saviez-vous que le DPR peut évoluer dynamiquement à tout moment ?

Si un utilisateur active le zoom dans son navigateur (Cmd + ou Ctrl +), déplace une fenêtre depuis son écran d’ordinateur portable vers un moniteur externe 1080p, ou ajuste la mise à l’échelle de l’affichage dans Windows, le DPR du navigateur est réactualisé instantanément.

Vous pouvez écouter ces changements de DPR en JavaScript moderne à l’aide de matchMedia :

const updateDprNotice = () => {
  console.log(`Le DPR actuel est désormais de : ${window.devicePixelRatio}`);
};

// Créer une media query correspondant à la résolution actuelle
const dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);

// Écouter les changements de résolution (ex. zoom ou déplacement d'écran)
dprQuery.addEventListener("change", updateDprNotice);

---

Comment corriger les images floues : 5 stratégies éprouvées

Passons à la mise en pratique. Comment garantir que nos graphismes et photos soient d’une netteté cristalline sur chaque écran, sans alourdir le chargement pour les écrans plus anciens ?

Voici les 5 techniques incontournables du développement web moderne :

1. Utiliser le format SVG pour les logos, icônes et graphismes simples

Chaque fois qu’une image est constituée de formes géométriques, de couleurs unies ou de logos, ne l’exportez jamais en PNG ou JPEG. Optez plutôt pour le format SVG (Scalable Vector Graphics).

À l’instar des polices typographiques, les fichiers SVG sont des fichiers vectoriels formés de coordonnées XML et non d’une grille matricielle de pixels. Qu’ils soient visualisés sur un moniteur 1x, un iPhone 3x ou une affiche géante imprimée en 16K, les fichiers SVG sont rendus à la résolution physique maximale de l’écran avec une précision mathématique parfaite.

<!-- Net sur tous les écrans du monde, poids de fichier minuscule -->
<img src="/logo.svg" width="200" height="60" alt="Logo de l'entreprise">

Règle pratique :

• Logos, icônes, badges d’interface, flèches et illustrations vectorielles $\rightarrow$ SVG.
• Photographies, captures d’écran réalistes et créations visuelles complexes $\rightarrow$ Matriciel avec srcset responsive (voir ci-dessous).

---

2. La règle du 2x pour les images matricielles (Solution rapide)

Si vous disposez d’une image matricielle (comme un avatar ou la photo d’un auteur) qui s’affichera toujours à une taille CSS fixe—par exemple 80px × 80px :

1. Exportez le fichier image au double de sa résolution : 160px × 160px.
2. Enregistrez-le dans un format moderne tel que WebP ou AVIF afin de minimiser le poids du fichier.
3. Contraignez explicitement les dimensions dans votre HTML ou CSS à la taille d’affichage souhaitée :

<!-- Le fichier physique fait 160x160, mais reste limité à 80x80 pixels CSS -->
<img src="/avatar@2x.webp" width="80" height="80" alt="Photo de profil">

Sur un écran 1x, le navigateur sous-échantillonne légèrement l’image, qui reste impeccable. Sur un écran Retina 2x, chaque diode matérielle reçoit une information visuelle native, offrant un cliché d’une netteté irréprochable.

---

3. Utiliser srcset avec les descripteurs de densité (1x, 2x)

Que faire si vous ne voulez pas contraindre les visiteurs disposant d’une connexion mobile lente ou d’un écran standard 1x à télécharger des fichiers image deux fois plus lourds ?

Le HTML intègre une prise en charge native de l’alternance d’images selon le DPR grâce à l’attribut srcset combiné aux descripteurs de densité (1x, 2x, 3x) :

<img 
  src="/hero-800.webp" 
  srcset="/hero-800.webp 1x, 
          /hero-1600.webp 2x, 
          /hero-2400.webp 3x"
  width="800" 
  height="450" 
  alt="Espace de travail moderne"
  loading="lazy">

Comment le navigateur évalue cette instruction :

• Un utilisateur sur un PC de bureau 1080p standard (DPR 1.0) télécharge hero-800.webp (~45 Ko).
• Un utilisateur sur un MacBook Pro (DPR 2.0) télécharge hero-1600.webp (~120 Ko).
• Un utilisateur sur un iPhone 16 Pro (DPR 3.0) télécharge hero-2400.webp (~220 Ko).

Chaque appareil reçoit rigoureusement la densité qu’il est en mesure d’afficher physiquement, ce qui préserve à la fois la bande passante et la netteté d’affichage de manière totalement automatique.

---

4. Images fluides et responsives avec srcset et sizes (Pour les mises en page dynamiques)

Sur les sites web responsifs, les images conservent rarement une largeur fixe. L’image d’une carte peut occuper 100 % de l’écran sur mobile, mais seulement 33 % de l’écran au sein d’une grille à 3 colonnes sur ordinateur.

Lorsque la largeur de l’image fluctue selon la dimension de l’écran, les descripteurs de densité (1x, 2x) ne suffisent plus. Il faut alors employer des descripteurs de largeur (w) associés à l’attribut sizes :

<img 
  src="/article-cover-800.webp"
  srcset="/article-cover-400.webp 400w,
          /article-cover-800.webp 800w,
          /article-cover-1200.webp 1200w,
          /article-cover-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 
         (max-width: 1024px) 50vw, 
         33vw"
  width="800" 
  height="450" 
  alt="Comprendre la résolution d'écran"
  loading="lazy">

Pourquoi ce système fonctionne à merveille :

Le navigateur multiplie la taille de l’emplacement CSS calculé par le Device Pixel Ratio de l’écran :

• Un téléphone mobile dispose d’un viewport de 390px (avec un DPR de 3.0). L’image occupe 100vw ($390\text{px}$). Le navigateur calcule : $$390\text{px} \times 3.0 = 1,170\text{ pixels physiques requis}$$ Il sélectionne l’image article-cover-1200.webp.
• Un utilisateur sur PC de bureau 1080p utilise une fenêtre de 1280px (avec un DPR de 1.0). L’image occupe 33vw ($422\text{px}$). Le navigateur calcule : $$422\text{px} \times 1.0 = 422\text{ pixels physiques requis}$$ Il sélectionne l’image article-cover-400.webp.

Aucune ligne de JavaScript n’est nécessaire. Le navigateur effectue ce calcul optimal avant même d’avoir affiché le premier pixel.

---

5. Arrière-plans CSS haute densité avec image-set() ou les Media Queries

Si vous définissez des images de fond dans votre feuille de style CSS, les media queries standards ou la fonction moderne image-set() vous permettent de distribuer des visuels haute densité sans difficulté.

Option A : Fonction moderne image-set() (Recommandé)

Prise en charge par l’ensemble des navigateurs modernes (Chrome, Safari, Firefox, Edge) :

.hero-banner {
  background-image: image-set(
    url("/hero-bg.webp") 1x,
    url("/hero-bg@2x.webp") 2x
  );
  background-size: cover;
  background-position: center;
}

Option B : Media Queries CSS avec min-resolution

Si vous avez besoin d’un contrôle précis à la fois sur les points de rupture (breakpoints) et sur la densité :

/* Arrière-plan standard 1x */
.card-header {
  background-image: url("/card-bg.webp");
  background-size: 300px 180px;
}

/* Arrière-plan Retina 2x */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-header {
    background-image: url("/card-bg@2x.webp");
  }
}

Pourquoi 192dpi ?
La résolution de référence standard en CSS est définie à 96 points par pouce (DPI). Multipliez cette valeur par deux pour un écran 2x, et vous obtenez $96 \times 2 = 192\text{dpi}$ (ou 2dppx, qui signifie dots per pixel unit ou points par unité de pixel).

---

Le piège méconnu : Canvas et WebGL sur écrans haute densité

Si vous utilisez l’élément HTML5 <canvas> (pour des graphiques interactifs, visualisations de données, jeux vidéo ou signatures électroniques), vous ferez face au problème de flou du DPR sous une forme encore plus prononcée.

Par défaut, un élément canvas HTML crée un tampon de dessin (buffer) basé exclusivement sur ses attributs HTML :

<!-- Canvas par défaut : Crée un tampon de dessin de 300x150 -->
<canvas id="chart"></canvas>

Si vous stylisez ce canvas en CSS pour l’adapter à votre agencement :

#chart {
  width: 300px;
  height: 150px;
}

Sur un MacBook ou un écran 4K, le texte et les tracés à l’intérieur du canvas paraîtront particulièrement flous.

Pourquoi ? Parce que le canvas a généré un tampon bitmap de seulement 300 × 150 pixels, et que le navigateur a étiré ce petit bitmap sur une zone matérielle physique de 600 × 300 points !

La méthode adéquate pour rendre un Canvas HTML net sur écran Retina :

Pour remédier à cela, vous devez redimensionner le tampon interne du canvas en le multipliant par window.devicePixelRatio, tout en verrouillant sa taille d’affichage CSS :

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");

// Taille de mise en page voulue en pixels CSS
const cssWidth = 300;
const cssHeight = 150;

// Récupérer la densité actuelle de l'écran
const dpr = window.devicePixelRatio || 1;

// 1. Définir la taille du tampon physique multipliée par le DPR
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;

// 2. Verrouiller la dimension visuelle sur la page via les pixels CSS
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

// 3. Adapter l'échelle des opérations de tracé pour conserver les coordonnées CSS
ctx.scale(dpr, dpr);

// Vous pouvez maintenant dessiner vos formes normalement : rendu ultra net garanti !
ctx.fillStyle = "#2563eb";
ctx.fillRect(20, 20, 100, 50);

Ce court extrait de code assure que vos bibliothèques de graphiques, moteurs de jeu et outils de dessin vectoriel s’affichent avec une netteté irréprochable sur les écrans Retina.

---

Performance vs Netteté : Trouver le juste milieu

Maintenant que vous maîtrisez la diffusion d’images 2x et 3x, une question capitale s’impose : Faut-il systématiquement fournir des images 3x à tous les smartphones récents ?

Dans la quasi-totalité des situations, la réponse est non.

Voici pourquoi :

1. Rendements décroissants pour l’œil humain :
   Sur un smartphone moderne consulté à une distance de lecture naturelle (25 à 30 cm), l’œil humain est incapable de discerner les pixels individuels dès que la densité excède environ 300 à 350 PPI. Une image 2x affichée sur un smartphone 3x est strictement impossible à distinguer d’une véritable image 3x pour 99 % des utilisateurs.

2. Explosion du poids des fichiers :
   La surface en pixels croît de façon quadratique :

   • Une image 1x contient 1x données.
   • Une image 2x contient 4x données ($2 \times 2$).
   • Une image 3x contient 9x données ($3 \times 3$) !

   Délivrer de véritables images 3x pour de grandes photographies peut transformer un fichier WebP raisonnable de 120 Ko en un fichier monstrueux de 800 Ko. Cela pèse sur les forfaits mobiles, dégrade vos Core Web Vitals (particulièrement le Largest Contentful Paint / LCP) et ralentit le chargement de vos pages.

Les bonnes pratiques recommandées pour 2026 :

• Interfaces vectorielles (Logos et icônes) : Utilisez toujours du SVG. Aucun flou et poids de fichier microscopique.
• Photos courantes et bannières principales : Plafonnez votre srcset responsive à 2.0x. Fournir des images 2x aux mobiles 3x assure 95 % de la netteté visuelle tout en économisant jusqu’à 60 % de bande passante !
• Compression moderne : Encodez systématiquement vos images haute résolution en WebP ou AVIF. Puisque les écrans haute densité concentrent les pixels très étroitement, vous pouvez appliquer sans risque une compression un peu plus soutenue (réglage de qualité autour de 75–80) sans dégradation visuelle perceptible.

---

Foire aux questions (FAQ)

Quelle est la différence entre PPI, DPI et DPR ?

• PPI (Pixels Per Inch / Pixels par pouce) : La densité matérielle physique—le nombre d’émetteurs de lumière réels présents sur un pouce linéaire de la dalle.
• DPI (Dots Per Inch / Points par pouce) : À l’origine un terme d’imprimerie qualifiant le nombre de points d’encre déposés par une imprimante par pouce. En développement web, il est fréquemment employé comme synonyme de PPI.
• DPR (Device Pixel Ratio / Ratio de pixels de l’appareil) : Un multiplicateur logiciel utilisé par les navigateurs et les systèmes d’exploitation pour convertir les unités logiques de mise en page (pixels CSS) en pixels matériels physiques.

Pourquoi mon écran 4K indique-t-il une résolution de 1920 × 1080 ?

Si vous disposez d’un écran 4K (3840 × 2160) et que Windows ou macOS applique une mise à l’échelle de 200 %, votre système d’exploitation signale aux navigateurs web que votre largeur de bureau est de 1920 × 1080 pixels logiques, avec un Device Pixel Ratio de 2.0.

Votre écran affiche bel et bien une réelle image 4K ! Le système d’exploitation regroupe simplement les pixels physiques par blocs de 4 ($2 \times 2$) pour rendre chaque pixel logique du bureau, afin que les textes et les fenêtres restent parfaitement lisibles et confortables.

Le DPR peut-il être un nombre décimal comme 1.25 ou 1.5 ?

Oui. Sur les appareils équipés de Windows ou ChromeOS, les utilisateurs peuvent choisir des pourcentages de mise à l’échelle personnalisés comme 125 %, 150 % ou 175 %. Lorsqu’un utilisateur configure son échelle d’affichage à 150 %, la propriété window.devicePixelRatio du navigateur prend la valeur 1.5.

Le zoom du navigateur modifie-t-il le DPR ?

Oui ! Lorsque vous faites un zoom avant avec Ctrl + ou Cmd + sur une page web, les navigateurs modernes n’étirent pas bêtement l’image comme une loupe. Ils augmentent la valeur de window.devicePixelRatio, ce qui déclenche un recalcul de la mise en page et amène les attributs srcset responsifs à charger des versions plus nettes de vos images.

---

Points clés à retenir

1. Deux types de pixels coexistent : Les pixels physiques sont les diodes matérielles de l’écran ; les pixels CSS sont les blocs de construction de mise en page exploités par les navigateurs.
2. Le DPR est le facteur de conversion : Le DPR indique combien de points physiques sont sollicités pour dessiner un unique pixel CSS.
3. L’origine du flou : Lorsqu’une image ne fournit qu’un pixel de données pour une zone couverte par 4 ou 9 points physiques, le navigateur doit l’étirer, ce qui crée du flou.
4. Privilégiez le SVG en priorité : Toute forme, icône ou logo pouvant être vectorisé doit être au format SVG.
5. Visez 2x pour les photos : Pour les visuels photographiques matriciels, proposer des variantes en 2x via srcset assure la netteté Retina sans pénaliser le poids de vos pages.

Vous souhaitez vérifier ce qu’indique votre propre appareil en ce moment ? Rendez-vous sur notre outil en page d’accueil sur WhatIsMyScreenResolutions.com pour découvrir en temps réel votre viewport, votre résolution d’écran et votre Device Pixel Ratio mesurés instantanément.