Les écrans HiDPI, également connus sous le nom d’écrans Retina chez Apple, offrent une résolution plus élevée en affichant davantage de pixels, ce qui permet une qualité graphique supérieure. Cela se traduit par une plus grande précision dans l’affichage des images, bien que celles-ci puissent sembler plus petites lorsqu’elles sont visualisées sur des logiciels tels que Photoshop. Pour remédier à cela, il est recommandé d’agrandir l’affichage des images à 200 % (sélectionnez Afficher > 200 %).

En ce qui concerne la création de pages web, l’utilisation d’écrans HiDPI nécessite de produire des images deux fois plus grandes que leur taille finale souhaitée, puis de les réduire de moitié en spécifiant l’attribut width dans le code HTML. Il est important de noter que la propriété min-device-pixel-ratio, autrefois utilisée dans les media queries, a été retirée des normes du Web. De même, l’usage de la propriété srcset n’est plus recommandé.

Actuellement, la meilleure approche pour servir des images adaptées à différentes résolutions d’écran demeure l’utilisation de JavaScript combiné à des media queries. Cette méthode offre une flexibilité optimale pour garantir que les images s’affichent de manière optimale selon la résolution de l’appareil utilisé.