images et icônes pour les écrans retina
Babyfoot34
Membre
Bonjour a toue et bonne année 2011
Je voudrais savoir si il est suffisant d'enregistrer une image simplement en multipliant la quantité de pixel par 2 et en modifiant le nom avec @2x.png ou si je dois aussi multiplier la taille par 2 (après le changement de pixels).
Je pose cette question car lorsque j'enregistre mon image (ou mon icône d'ailleurs) elle apparait 2 fois plus petite dans xcode.
sa taille REELLE sera t elle identique sur un iphone 4 ou 3 ou cette réduction se vera t elle vraiment sur l'iphone 4 si je ne modifie pas avec mon logiciel de dessin.
Je ne dispose pas de l'iphone 4 pour tester et j'ai un gros doute
Merci pour vos réponses
Je voudrais savoir si il est suffisant d'enregistrer une image simplement en multipliant la quantité de pixel par 2 et en modifiant le nom avec @2x.png ou si je dois aussi multiplier la taille par 2 (après le changement de pixels).
Je pose cette question car lorsque j'enregistre mon image (ou mon icône d'ailleurs) elle apparait 2 fois plus petite dans xcode.
sa taille REELLE sera t elle identique sur un iphone 4 ou 3 ou cette réduction se vera t elle vraiment sur l'iphone 4 si je ne modifie pas avec mon logiciel de dessin.
Je ne dispose pas de l'iphone 4 pour tester et j'ai un gros doute
Merci pour vos réponses
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
iPhone 3 => ex: 72 dpi, 100x100, image.png
iPhone 4 => ex: 72 dpi, 200x200, image@2x.png
Parce qu'une image en 100*100 que tu augmentes en 200*200, ben ça va pixelliser...
voila le resultat sur mon ecran avec un fichier (le plus grand) qui fait
64 x 64 pixels
18 x 18 millimetres
90 x 90 ppp
et avec un fichier (le plus petit) qui lui fait
64 x 64 pixels
10 x 10 millimetres
160 x 160 ppp
est ce que je dois redimensionner mon 2eme fichier pour que sa taille (en millimetre) soit identique au premier ?
Elles n'ont justement PAS la même taille puisque l'une fait 2 fois plus de pixels en largeur et hauteur que l'autre.
Mais elles ont la même résolution.
Mais sur les iphone, elles auront la meme taille ! Puisque la résolution du 4 est 2 fois supérieure à celle des précédentes générations...
C'est comme si tu mettais ton ordi en 800*600, tu ouvres ton image basse résolution. Tu mesures.
Ensuite, tu passes ta résolution en 1600*1200, tu ouvres ton image HD et tu mesures. Ca fera la meme taille...
iPhone 3 => ex: 72 dpi, 100x100, image.png
iPhone 4 => ex: 72 dpi, 200x200, image@2x.png
iPad => ex: 72 dpi, 400x100, image@4x.png ????
Donc mes images pour l'iphone 4 (dont le nom de fichier se termine par @2x.png) seront plus petites que les images pour l'iphone 3 (je parle, bien sur. des ces images lorsqu'elles s'affichent sur mon écran de mac.)
Merci a tous pour vos réponses mais ce n'est pas évident lorsque l'on ne dispose pas de l'iphone 4.
Un écran d'iPhone 4 fait la même taille physique (en millimètres pour reprendre ton analogie même si en informatique on ne parle pas avec ces unités) que l'écran d'un iPhone 3. Mais il a 2x plus de pixels.
Donc sous iPhone4, l'écran est composé de 640 pixels (minuscules carrés lumineux de ton écran, au sens physique du terme) alors que sur l'iPhone 3 il est composé que de 320 pixels pour la même largeur.
Donc pour qu'une image apparaisse à la même taille physique (en millimètres) sur les deux écrans, celle utilisée pour l'iPhone 4 (image@2x.png) doit faire deux fois plus de pixels que celle utilisée pour l'iPhone 3 (image.png).
image@2x.png doit faire 200x200 pixels et image.png 100x100 pixels pour avoir la même taille à l'écran.
En pratique ensuite dans ton code, on oublie les pixels et on parle en points, ce qui nous permet, dans cette unité, de manipuler les mêmes valeurs indépendamment de si on est sur un écran iPhone 3 ou iPhone 4 Retina. Ainsi une image qui prend toute la largeur de ton écran fera 100 points, que tu sois sur iPhone 3 ou iPhone 4. Quand tu manipules des CGRect et CGSize et autre, tu parles en points (encore heureux sinon faudrait pour toutes tes valeurs de taille dans ton code prévoir les 2 cas, l'horreur).
Donc ton écran d'iPhone fera toujours 320x480 points, et avec un iPhone 3 cela correspondra à 320x480 pixels, alors qu'avec un iPhone 4 cela correspondra à 640x480.
En pratique cela veut aussi dire que si tu demandes de dessiner à l'écran, sur un fond blanc, une ligne rouge de la taille d'un demi-point (donc ultra fine quoi), sur iPhone 4, 0.5 points correspondent physiquement à un pixel, donc tu pourras voir ta ligne à l'écran car ces petits pixels vont pouvoir s'allumer en rouge coincés entre deux pixels blancs, alors que sur iPhone 3, la résolution n'étant pas aussi fine puisqu'il y a moins de pixels pour la même taille d'écran, il n'est pas assez précis pour afficher une ligne de 0.5 points (qui correspondrait en théorie à 1/2 pixel, mais un pixel ne peut pas être à moitié allumé en rouge et à moité en blanc), donc la résolution de l'iPhone 3 est trop "grossière" pour afficher une ligne aussi fine que 0.5 points là où l'iPhone 4 peut l'afficher à l'écran car il a de plus petits pixels (et en a donc plus aussi). C'est aussi pour ça que tu vois moins les pixels sur iPhone 4, et aussi pour ça que le texte est plus "lisse" et plus joli sur un écran Retina d'iPhone 4.
En bref, dans le code tu manipules des points, ton écran d'iPhone faisant 320x480 points dans tous les cas. Pour une image qui doit faire 100x100 points, la version utilisée par l'iPhone 3 devra faire 100x100 pixels, celle utilisée par l'iPhone 4 devra faire 200x200 pixels. Sur ton écran d'ordinateur qui utilisera les mêmes pixels pour afficher image.png et image@2x.png quand tu les visualises dans Aperçu, Xcode ou Photoshop, l'image "image@2x.png" va te paraà®tre 2x plus grosse, mais c'est normal puisqu'elle est prévue pour s'afficher sur un écran qui a des pixels 2x plus petits que l'écran qui sera utilisé pour "image.png"
Doit-on coder pour les 2 noms de fichiers ou est-ce que le simple fait de mettre "@2x" suffit pour que XCode comprenne que c'est l'image pour l'iPhone 4 ?
neospirit
Au moins ce sera clair pour tout le monde.
neospirit
Specifying High-Resolution Images in iOS
Ainsi que Supporting High Resolution Screens et ses sous-articles, etc
dans le premier lien il y a ça :
et dans le deuxième il y a ça :
Alors que doit-on faire ?
- Les noms des fichiers sont Button.png pour la version basse-résolution et Button@2x.png pour la haute résolution (ou MyImage.png et MyImage@2x.png pour reprendre les noms du premier lien)
- Pour les utiliser tu n'utilises comme nom (pour imageNamed et les fonctions similaires) que "Button" (ou "Button.png" même ça marche aussi) et "MyImage" (ou "MyImage.png")
Après, si en plus d'une distinction entre résolution "normale" et résolution "Retina" tu veux en suppélement faire une distinction entre la version iphone et ipad, tu peux aussi rajouter "~iphone" et "~ipad" dans le nom, tout comme tu utilises "@2x" dans le nom pour indiquer que c'est la version Retina de l'image.
Perso j'ai jamais eu à utiliser les distinctions "~iphone" et "~ipad", mais en même temps j'ai rarement fait des applications Universal iPhone/iPad donc c'est normal. Par contre toutes mes images pour mes applis iPhone ont les variantes "Button.png" ET "Button@2x.png" histoire d'avoir une version pour iPhone 3 et une version plus jolie/adaptée pour l'écran Retina haute résolution des iPhone 4.
(Et pour mes applis iPad du coup comme il n'y a qu'un seul modèle d'iPad à ce jour avec une résolution unique, bah j'ai pas de variante pour mes images de mes applis iPad, y'a qu'une version par image)
J'ai déployé mon appli pour la tester sur mon iPhone 4 et sur le 3GS d'un ami.
J'ai seulement mis les images avec le nom normal sans @2x soit : bouton.png par exemple.
Dans les 2 cas, l'image qui s'affiche sur les 2 devices est la même. Elle n'est pas plus grande sur le 3GS que sur le 4. Effectivement elle parait moins nette mais du coup est-il vraiment utile d'avoir le même fichier 2 fois un avec @2x et l'autre normal ?
A moins que ce soit vraiment imposer par Apple je vois pas trop l'intérêt...
Et encore heureux, sinon toutes les applications qui ont été développées pour iPhone 3GS avant la sortie de l'iPhone 4 (et donc qui n'avaient de toute façon pas intégré les images @2x) ne marcheraient pas !
Rien ne t'y oblige, c'est juste que ceux qui on un iPhone 4 vont trouver tes images baveuses
C'est un peu comme si tu mettais ton ordi en 640x480 alors qu'il peut supporter 1280x960... Rien ne t'y empêche, ça marchera, ça t'empêchera pas d'utiliser ton ordi... ça sera juste moins joli et tu ne profiteras pas des possibilités offertes par l'iPhone 4 et de sa finesse de résolution.
C'est aussi un peu comme les jeux iPhone que tu lances sur ton iPad, si tu les mets en mode "2x" pour qu'elle prenne tout l'écran... bah tu vois que c'est quand même moche car pixellisé