›

images et icônes pour les écrans retina

Babyfoot34Babyfoot34 Membre
22:28 modifié dans Apple Developer Programs #1
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

Réponses

  • muqaddarmuqaddar Administrateur
    22:28 modifié #2
    On a déjà  dû en parler 100 fois mais bon...

    iPhone 3 => ex: 72 dpi, 100x100, image.png
    iPhone 4 => ex: 72 dpi, 200x200, image@2x.png
  • LeChatNoirLeChatNoir Membre, Modérateur
    22:28 modifié #3
    D'ailleurs, pour un meilleur résultat, tu as intérêt à  bosser tes images en 200*200 (c'est juste l'exemple d'Alex que je reprend) et à  les nommer @2x et les diminuer en 100*100 pour la version pas HD...
    Parce qu'une image en 100*100 que tu augmentes en 200*200, ben ça va pixelliser...
  • Babyfoot34Babyfoot34 Membre
    22:28 modifié #4
    Merci muquadar je sais que vous en avez deja parler 100 fois et j'ai bien compris les resolutions dpi et pixel mais en terme de taille est ce que dois avoir en finale la meme taille sur mon ecram imac ?

    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 ?

  • Babyfoot34Babyfoot34 Membre
    22:28 modifié #5
    je vous met les 2 images ici
  • Babyfoot34Babyfoot34 Membre
    22:28 modifié #6
    la premiere pardon
  • Babyfoot34Babyfoot34 Membre
    22:28 modifié #7
    Ha donc d'après la réponse du chat noir mes 2 images en finale doivent bien être de même taille en millimètre (même largeur et même hauteur)
  • muqaddarmuqaddar Administrateur
    22:28 modifié #8
    Pourquoi tu parles en millimètre ? On est pas dans la presse là , mais sur des écrans.

    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.
  • LeChatNoirLeChatNoir Membre, Modérateur
    22:28 modifié #9
    eh oui. Sur ton ordi, qui ne change pas de résolution, tes 2 images auront effectivement une taille différente (l'une sera 2 fois plus grande que l'autre).
    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...
  • neospiritneospirit Membre
    22:28 modifié #10
    Et quid de l'iPad si on fait une appli commune iphone/iPad.

    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 ????

  • Babyfoot34Babyfoot34 Membre
    22:28 modifié #11
    Merci je croix que j'ai compris cette fois.

    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.



  • AliGatorAliGator Membre, Modérateur
    22:28 modifié #12
    pixels != points


    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"
  • neospiritneospirit Membre
    22:28 modifié #13
    Et pour compléter le sujet, dans le code concrètement comment cela se passe ?

    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
  • LeChatNoirLeChatNoir Membre, Modérateur
    22:28 modifié #14
    Nzn. Tu mets le nom de fichier simple (genre toto.png) et c'est iOS tout seul qui au runtime sur un retina, va regarder s'il a un @2x ou pas. Si oui, il prend, sinon, il prend la version SD...
  • neospiritneospirit Membre
    22:28 modifié #15
    Ok donc on met bien les 2 images (image.png et image@2x.png) dans le projet et ensuite dans le code on met que image.png ?

    Au moins ce sera clair pour tout le monde. 

    neospirit
  • AliGatorAliGator Membre, Modérateur
    janvier 2011 modifié #16
    Et sinon tu lis la doc, toutes ces questions ont déjà  leur réponse ;)

    Specifying High-Resolution Images in iOS
    When you want to load an image, do not include the @2x or any device modifiers when specifying the image name in your code. For example, if your application bundle included the image files from the preceding list, you would ask for an image named MyImage.png. The system automatically determines which version of the image is most appropriate and loads it. Similarly, when using or drawing that image, you do not have to know whether it is the original resolution or high-resolution version


    Ainsi que Supporting High Resolution Screens et ses sous-articles, etc
  • neospiritneospirit Membre
    22:28 modifié #17
    Et bien du coup en lisant cette doc, j'ai encore plus de question  :o :

    dans le premier lien il y a ça :
      *MyImage.png - Default version of the image resource, which is also used for iPad.
        *MyImage~iphone.png - Version of the image for iPhone and iPod touch.
        *MyImage@2x~iphone.png - High-resolution version of an image for iPhone and iPod touch devices with Retina displays.


    et dans le deuxième il y a ça :
    Loading Images into Your Application

    The UIImage class handles all of the work needed to load high-resolution images into your application. When creating new image objects, you use the same name to request both the standard and the high-resolution versions of your image. For example, if you have two image files, named Button.png and Button@2x.png, you would use the following code to request your button image:

    UIImage* anImage = [UIImage imageNamed:@Button];


    Alors que doit-on faire ?
  • AliGatorAliGator Membre, Modérateur
    22:28 modifié #18
    Je comprend pas la question, qu'est ce qui te pose problème ? Les deux citations disent la même chose :
    - 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)
  • neospiritneospirit Membre
    22:28 modifié #19
    Je reviens sur ce topic car j'ai encore une nouvelle interrogation.

    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... :'(
  • AliGatorAliGator Membre, Modérateur
    22:28 modifié #20
    Bien sûr que non ce n'est pas obligatoire et imposé !
    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é ;)
Connectez-vous ou Inscrivez-vous pour répondre.