2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Expliquer la densité spatiale et Retina

2 Associés développement web et mobile à Montréal

Lors de mandats, il m’arrive de travailler avec des designers graphiques ayant une expérience plus traditionnel. Pour ces derniers, les concepts Web ne sont pas toujours compris ou évidents. Un des concepts ayant le plus de difficulté à être compris est celui de la résolution spatiale (aka «pixel density»)… Et le dernier iPhone n’arrangera pas les choses!

  • Densité spatiale («pixel density») : Nombre de pixels qu’un écran peut afficher à l’intérieur d’une distance.
  • Résolution : Nombre total de pixels en largeur et en hauteur d’un écran/dispositif.
  • Retina : Marque de commerce de Apple pour identifier ses produits ayant une haute densité. La densité diffère d’un dispositif à l’autre et en règle générale, plus l’écran du dispositif est petit, plus la densité sera grande.
Densités courantes à l’heure actuelle :
  • 120 DPI, ou ldpi («low density per inch»)
  • 160 DPI, ou mdpi («médium density per inch»). Cette densité qui a été popularisée par les premiers téléphones intelligents exemple iPhone.
  • 240 DPI, ou hdpi («high density per inch»)
  • 320 DPI, ou xhdpi («extra high densité per inch»). Retina et similaires.
  • 480 DPI, ou xxhdpi («extra extra high densité per inch»)…
  • 640 DPI, ou xxxhdpi, etc.

Donc, si vous voulez créer un document graphique pour le iPhone (160 DPI) par exemple, celui-ci ayant une résolution de 320 px par 480 px, vous devrez produire un document graphique de 320 px par 480 px. Maintenant, si vous voulez créer un document graphique pour le iPhone 4 (Retina 320 DPI), vous devrez avoir 2 fois plus de pixels que pour un iPhone (160 DPI) et pour ce faire, votre document devra avoir une résolution de 640 px par 960 px.

iPhone 6

Le iPhone 6 aura 480 DPI! Le multiplicateur sera donc de 3 fois le iPhone (160 DPI) soit une nouvelle résolution de 960 px par 1704 px. La hauteur ayant changée depuis le iPhone 5 et se poursuit avec le iPhone 6.

Préférez les documents vectoriels

Pour avoir testé plusieurs manières de faire, celle qui est la plus facile pour gérer ses documents graphiques multi-densités est celle de créer un gabarit de la plus haute résolution disponible, iPhone 6 de 960 px par 1704 px par exemple. Si vous utilisez Illustrator, lors de la sauvegarde, l’option «Image Size/New Size» est très utile pour changer la taille en largeuret ainsi créer les variantes pour les autres modèles, dans ce cas-ci iPhone 5. Pour passer du iPhone 4 au iPhone par exemple, un gabarit iPhone 4, ou un «artboard» sous Illustrator, de 640 px par 960 px fera l’affaire.

On retient les pixels… Oublions les DPI

  1. Un écran iPhone à une résolution de 320 px par 480 px.
  2. Un iPhone 4 à une résolution de 640 px par 960 px.
  3. Un iPhone 6 à une résolution de 960 px par 1704 px.

Commentez cet article

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés