Démonstration de densité d’affichage et DPR

Ces trois images proviennent de la même source mais sont exportées en trois versions distinctes pour simuler un affichage 1x, 2x et 3x. Sur un iPhone ou un écran haute densité, les versions 2x et 3x seront nettement plus détaillées.

Affichage automatique selon la densité

Le navigateur choisit automatiquement la version la mieux adaptée grâce à srcset :

<img
  src="imgs/demo-base@1x.jpg"
  srcset="imgs/demo-base@1x.jpg 1x,
          imgs/demo-base@2x.jpg 2x,
          imgs/demo-base@3x.jpg 3x"
  width="1000"
  alt="Démonstration DPR">

Testez cette page sur un iPhone ou sur Firefox avec un écran retina pour voir la différence.