Pour ceux qui commencent à s’intéresser au développement d’applications iOS, vous avez peut-être déjà remarqué des images @2x comme celle-ci: exemple@2x.png. Mais vous vous demandez peut-être pourquoi y a-t-il l’image originale (prenons par exemple « default.png ») et une deuxième image, la même, avec @2x dans le titre de l’image ?

Les images @2x

En fait, depuis l’arrivée de l’iPhone 4 avec son écran rétina, toutes les résolutions sur le iPhone ont doublé, 320×480 pixels pour l’ancienne génération (iPhone 3GS et ultérieur) et 640×960 pixels pour la nouvelle génération (iPhone 4 et iPhone 4S).

Apple a ainsi simplifié le support des deux résolutions pour le développeur iOS. L’application que vous développez doit alors posséder les deux images distinctes dans les ressources de l’application lors de son développement. La première image étant l’image originale et la seconde, étant la version haute résolution de la même image.

Et vous n’avez pas besoin de spécifier nulle part que vous avez deux images, seulement ajouter @2x à l’image de haute résolution. C’est ce qui est si facile et pratique avec ça.

Je parle seulement de l’iPhone dans cet articlex mais les images @2x sont aussi utilisées pour le développement d’applications iPad avec l’écran rétina du nouvel iPad.

Par exemple:

Image originale: exemple.png
Haute résolution: exemple@2x.png

En fait, c’est seulement la classe UIImage qui fait tout le travail. Lorsqu’il va chercher votre image pour la faire apparaître, il reconnaît automatiquement si vous avez besoin de la version « haute résolution » de l’image ou pas, donc il détermine automatiquement la dimension de votre écran de iPhone, iPad, iPod touch, etc.

Donc, avec un exemple plus concret, si j’ajoute cette ligne de code à mon application:

UIImage* monImage = [UIImage imageNamed:@ »exemple »];

L’application ira chercher automatiquement votre image “exemple@2x.png” de plus grande résolution pour iPhone 4S ou iPhone 5. Et si jamais vous êtes sur un écran de résolution standard, il chargera notre image de base “exemple.png”.

Conclusion

Ce n’est pas plus compliqué que ça.

J’espère que cet article répond bien aux personnes qui m’ont contacté dans les dernières semaines et peut-être à certains qui se posaient justement cette question.

A+