Résolution d'image pour les nouveaux iPhone 6 et 6+, prise en charge @ 3x ajoutée?


141

J'ai regardé quelques articles et discussions comme celui-ci ici et ici sur les résolutions d'image que les nouveaux iPhones utiliseront des images @ 3x pour l'affichage. Est-ce vrai?

Cela veut-il dire que nous devrons conserver trois images? Disons par exemple que j'ai une image de 50 X 50, dois-je garder 3 images pour optimiser le look des nouveaux iPhones?

  • Normale (50 X 50)
  • @ 2x - Rétine (100 X 100)
  • @ 3x - Retina HD (150 X 150)

Ou les nouveaux téléphones utiliseront-ils uniquement des images @ 2x et il n'y a rien de tel que @ 3x?

J'ai testé en faisant un exemple de projet et tous les simulateurs semblent utiliser des images @ 3x, c'est déroutant.

Éditer

Voici quelques informations supplémentaires

  • 3GS (163 ppp donc utilisez Normal)
  • 4, 4s, 5 et 5s (326 ppp donc nous utilisons @ 2x)
  • 6 (326 ppp donc il semble qu'il utilisera @ 2x)
  • 6 plus (401 ppp ici réside la confusion)

Éditer

Sur la base des réponses données par Tsob et nitin, j'ai ajouté des images @ 3x à mon projet.

Edition informative

Je vois que peu d'utilisateurs ne savent pas pourquoi l'iPhone 6 utilise des images @ 2x même s'il a une résolution plus élevée, la raison en est

L'iPhone 6 peut avoir une résolution différente mais a la même densité de pouce par pixel (PPI)

  • La résolution concerne un nombre absolu de pixels.
  • La densité (aka Pixels par pouce - PPI) concerne un nombre relatif de pixels par pouce qui est le même dans le cas de l'iPhone 6 et des iPhone précédents, mais différent dans l'iPhone 6 plus.

En savoir plus à ce sujet ici dans ce fil

Par conséquent, l'iPhone 6 utilise l'image @ 2x comme les iPhones 4, 5 et 5S car il a le même PPI et l'iPhone 6 plus utilise @ 3x.


Alors à quoi sert le Retina 4 2x, si aucun appareil ne l'utilise?
Mrunal

1
Je suis d'accord que la densité est la même pour les iPhones 4, 5 et 6 mais comment résoudre différents problèmes de résolution? C'est donc une grande différence de 640x960 et 750 × 1334 pixels. Si j'ai besoin d'utiliser une image d'arrière-plan qui superpose tout l'écran. Comment puis-je définir des xcassets d'image dans ce cas?
Matrosov Alexander

@MatrosovAlexander comment avez-vous résolu ça?
Mário Carvalho

comme solution de contournement, j'ai également utilisé l'image de l'iphone 6 pour l'image @ 2x, mais il est surprenant que xcode n'ait pas d'image appropriée pour cela
Matrosov Alexander

Réponses:


54

J'ai essayé dans un exemple de projet d'utiliser des images standard, @ 2x et @ 3x, et le simulateur iPhone 6+ utilise l'image @ 3x. Il semblerait donc qu'il y ait @ 3x images à faire (si le simulateur reproduit réellement le comportement de l'appareil). Mais ce qui est étrange, c'est que tous les appareils (simulateurs) semblent utiliser cette image @ 3x lorsqu'elle se trouve sur la structure du projet, l'iPhone 4S / iPhone 5 aussi.
Le manque de communication d'Apple sur une structure potentielle @ 3x, alors qu'ils demandent aux développeurs de publier leurs applications iOS8, est assez déroutant, surtout quand on voit ces résultats sur le simulateur.

** Modifier à partir du site Web d'Apple **: également trouvé dans la section "Quoi de neuf sur iOS 8" sur l'espace développeur d'Apple:

Prise en charge d'une nouvelle échelle d'écran L'iPhone 6 Plus utilise un nouvel écran Retina HD avec une échelle d'écran de 3,0. Pour offrir la meilleure expérience possible sur ces appareils, incluez de nouvelles illustrations conçues pour cette échelle d'écran. Dans Xcode 6, les catalogues d'actifs peuvent inclure des images aux tailles 1x, 2x et 3x; ajoutez simplement les nouveaux actifs d'image et iOS choisira les actifs appropriés lors de l'exécution sur un iPhone 6 Plus. Le comportement de chargement d'image dans iOS reconnaît également un suffixe @ 3x.

Je ne comprends toujours pas pourquoi tous les appareils semblent charger le @ 3x. C'est peut-être parce que j'utilise des fichiers normaux et non des xcassets? J'essaierai bientôt.

Modifier après d'autres tests: Ok, il semble qu'iOS8 a un discours à ce sujet. Lors des tests sur un simulateur iOS 7.1 iPhone 5, il utilise correctement l'image @ 2x. Mais lors du lancement de la même chose sur iOS 8, il utilise le @ 3x sur l'iPhone 5. Je ne sais pas si c'est un comportement souhaité ou une erreur / bogue dans iOS8 GM ou des simulateurs dans Xcode 6.


2
Oui j'ai testé avec un simulateur, tous les appareils prennent des images @ 3x, déroutant en effet
Bhumit Mehta

Donc, en conclusion, à partir d'aujourd'hui, le meilleur chemin possible serait d'utiliser "@ 2x" dans les noms d'image, mais d'une manière ou d'une autre, vérifier le périphérique pour 6 Plus et utiliser une image 3x SANS le "@ 3x" pour ne pas empoisonner les périphériques 2x?
darkheartfelt

Il semble que le choix 3x sur iPhone 6 ne se produise que si l'actif en question est JPG au lieu de PNG.
emreberge

102

METTRE À JOUR:

Nouveau lien pour la taille de l'image des icônes par apple.

https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

entrez la description de l'image ici


Oui, c'est vrai ici, c'est Apple fournit une documentation officielle concernant la taille de l'icône ou de l'image

entrez la description de l'image ici

vous devez définir des images pour iPhone6 ​​et iPhone6 ​​+

Pour iPhone 6:

750 x 1334 (@2x) for portrait

1334 x 750 (@2x) for landscape

Pour iPhone 6 Plus:

1242 x 2208 (@3x) for portrait

2208 x 1242 (@3x) for landscape

Pour plus d'informations sur les images et sa résolution, c'est le meilleur article jamais utile

Pour définir la taille des images pour les commandes, vous pouvez définir 1x @ 2x et @ 3x comme suit:

entrez la description de l'image ici


8
si tous les appareils sont Retina 2x ou 3x, pourquoi le catalogue d'actifs demande-t-il des images 1x sur les projets pour le ciblage pour iPhone uniquement sur iOS 7/8? N'a pas de sens.
Canard du

1
peut-être que pour iphone4 @RubberDuck :) voir cet ipad 2 et iPad Mini qui ont besoin de 1x
Nitin Gohel

désolé mais vous n'avez pas lu ce que j'ai écrit. Je parle d'un projet iPhone uniquement pour iOS 7. Il n'y a pas d'iPhone avec 1x qui peut exécuter iOS 7 mais le catalogue d'actifs le demande toujours.
Canard du

@RubberDuck Sélectionnez votre ressource d'image, puis affichez le volet des utilitaires sur le côté droit de Xcode. L'un des onglets comporte un ensemble de cases à cocher. Peut-être que votre ou vos éléments ont trop de cases à cocher, ce qui fait apparaître 1x comme une option.
rmaddy le


10

J'ai testé en faisant un exemple de projet et tous les simulateurs semblent utiliser des images @ 3x, c'est déroutant.

Créez différentes versions d'une image dans votre catalogue d'actifs de sorte que l'image elle-même vous indique de quelle version il s'agit:

entrez la description de l'image ici

Maintenant, exécutez l'application sur chaque simulateur à tour de rôle. Vous verrez que l'image 3x n'est utilisée que sur l'iPhone 6 Plus.

La même chose est vraie si les images sont tirées du bundle d'applications en utilisant leurs noms (par exemple one.png , one@2x.png et one@3x.png ) en appelant imageNamed:et en les affectant à une vue d'image.

(Cependant, il y a une différence si vous attribuez l'image à une vue d'image dans Interface Builder - la version 2x est ignorée sur les appareils à double résolution. Il s'agit probablement d'un bogue, apparemment un bogue pathForResource:ofType:.)


1
Vous avez marqué l'actif comme «universel», c'est pourquoi vous voyez un comportement cohérent. Essayez plutôt de sélectionner "spécifique à l'appareil" dans le menu déroulant!
Nikolay Spassov le

1
@RalphZhouYuan Cela fonctionne maintenant très bien pour moi. Vous ne verrez pas la version 2x répertoriée , mais attribuez simplement la version 1x et la version 2x ou 3x sera correctement utilisée. Ou utilisez simplement un catalogue d'actifs.
mat

1
@RalphZhouYuan Voici mon exemple téléchargeable: github.com/mattneub/Programming-iOS-Book-Examples/tree/master/… - il affiche à la fois des fichiers image dans le bundle d'applications et des fichiers image dans le catalogue d'actifs et ils fonctionnent tous correctement.
mat

3
@matt Je trouve enfin que mon problème est lié aux paramètres de la cible de déploiement (qui est 6.0) de mon application. J'ai ouvert une question: stackoverflow.com/questions/26333278/… et j'ai envoyé un rapport de bogue à Apple.
inexcii

1
@RalphZhouYuan Wow, excellent travail de détective pour retrouver ça! Merci d'avoir répondu.
mat

2

ios essaiera toujours de prendre la meilleure image, mais reviendra à d'autres options .. donc si vous n'avez que des images normales dans l'application et qu'il a besoin de @ 2x images, il utilisera les images normales.

si vous ne mettez que @ 2x dans le projet et que vous ouvrez l'application sur un appareil normal, les images seront réduites pour les afficher.

si vous ciblez les appareils ios7 et ios8 et que vous voulez la meilleure qualité, vous auriez besoin de @ 2x et @ 3x pour le téléphone et normal et @ 2x pour les actifs ipad, car il n'y a plus de téléphone sans rétine ni d'ipad @ 3x.

il est peut-être préférable de créer les actifs dans l'application à partir d'un graphique vectoriel ... consultez http://mattgemmell.com/using-pdf-images-in-ios-apps/


il suffit d'utiliser l'incroyable PaintCode pour les vecteurs dans les applications
Fattie
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.