Pourquoi ai-je besoin d'images @ 1x, @ 2x et @ 3x iOS?
Pourquoi avons-nous besoin de ces 3 types d’images?
Si j'ai un bouton sur mon application avec une image d'arrière-plan, par exemple, 50 pixels x 50 pixels, pourquoi ai-je besoin de 3 versions de cette image? Qu'est-ce qui m'empêche de créer une image beaucoup plus haute en résolution, disons, 700 x 700, de sorte que, si elle se réduit sur n'importe quel iPhone, elle ne tombera pas sous la résolution maximale souhaitée par l'appareil?
La seule chose à laquelle je peux penser, c'est que cela prend simplement plus de place, mais pour les applications simples/un simple bouton, il semble que cela ne poserait aucun problème. Je l'ai essayé sur quelques appareils et je ne vois aucune différence entre eux lorsque je le simule et que je fais cette méthode. Cependant, à mesure que je plonge davantage dans les applications et tout le reste, je suis sûr que cette technique a de la substance.
Si vous n'avez pas la taille exacte, deux choses peuvent se produire:
pscaling
@3x ou @2x peut être redimensionné à partir de @1x, mais le résultat visuel est généralement flou, avec des lignes épaisses et une apparence médiocre. L'augmentation de la valeur @3x de @2x peut être encore pire car des sous-pixels doivent être utilisés.
Downscaling
En général, les résultats sont bien meilleurs qu'avec la conversion ascendante, mais cela ne s'applique pas à toutes les images. Si vous avez une bordure 1px sur une image @3x, après l'avoir réduite à @1x, la bordure ne sera pas visible (0.33 pixels). La même chose s'applique pour tous les petits objets dans l'image. La réduction d'échelle détruit tous les détails.
En règle générale, pour qu'une image ait une apparence parfaite, vous voulez éviter à la fois la réduction et la réduction. Vous pouvez toujours utiliser uniquement les images @2x ou @3x et ajouter d'autres échelles uniquement si vous constatez des problèmes visuels. L'utilisation d'une résolution plus élevée n'améliorera pas la réduction d'échelle. Les résolutions élevées ne sont utilisées que pour éviter la montée en gamme. La réduction d'une échelle élevée (par exemple, @100x) à @1x ne créera pas de meilleurs résultats que la réduction à l'échelle de @3x.
Vous avez besoin de 3 types d’images dans les ressources image car, en termes de mise à l’échelle ou de pixels, il existe 3 types de Apple périphériques (iPhone et iPad):
Périphérique normal appelé 1 pixel = 1 point @ 1x (anciens appareils iPhone et iPad)
Appareil Retina qui se nomme à 4 pixels(2 x 2) = 1 point @ 2x (iPhone 4+)
Retina iPhone6 et iPad désignant 9 pixels (3 x 3) = 1 point @ 3x (iPhone6 +)
Ainsi, pour fournir la même image en 3 échelles, iOS décide quelle image afficher pour quels appareils. L'espoir peut vous aider à comprendre.
EDIT
En effet, si vous fournissez un graphique haute résolution, vous perdez de l'espace sur le périphérique d'un utilisateur. Grâce au découpage d'application, l'appareil télécharge (depuis l'App Store) uniquement les composants compatibles avec l'appareil (pour que l'appareil Retina ne télécharge pas de graphiques non rétines). C'est pourquoi Apple a créé des catalogues d'actifs et ce type de règles à suivre. Ils le décrivent dans leurs sessions.
En bref, il s'agit de réduire l'utilisation de la mémoire/du disque, il est donc essentiel d'accroître les performances et l'expérience utilisateur
Tout d'abord, vous devez connaître le comportement points/pixels. Sur les appareils autres que la rétine, le rapport point/pixel est 1point = 1pixel. Sur les dispositifs de rétine, il existe deux rapports: 1 point = 2x2 pixels en fonction de la taille de l'écran et 1 point = 3x pixels, en raison de la densité de pixels, ce qui est quadruplé .
C’est pourquoi vous avez besoin de ces 3 types d’images, qui seront affichées avec sa résolution maximale.
En complément de ce que Sulthan a dit:
Comme vous n'avez pas propitié les images appropriées à un périphérique spécifique, celui-ci doit être dégradé ou rétrogradé. Ces processus will utilisent votre mémoire et votre traitement, ce qui peut entraîner une baisse des performances, en fonction du nombre d'images à la fois que vous réalisez et de la taille de l'image.
Si vous ne fournissez qu'une seule grande image, vous rencontrez plusieurs problèmes:
- La réduction d'échelle entraîne une perte de qualité (même si elle n'est pas énorme)
- Il faut plus de puissance de calcul pour réduire l'image que pour afficher l'image déjà pré-rendue
- La taille de votre fichier binaire augmente et vous ne pouvez plus bénéficier de l’amincissement d’applications introduit avec iOS 9.
Comme vous pouvez le constater, la production d'une seule image aura une incidence sur les performances et la qualité de votre application, ce qui affectera de manière disproportionnée les utilisateurs dotés d'appareils plus anciens. Ceci est dû au fait:
- Ils ont besoin de réduire davantage. En outre, les performances de leurs appareils ne sont pas aussi bonnes que celles des nouveaux. Ils sont donc beaucoup plus susceptibles de remarquer les décalages avec votre application.
- Ils n’ont pas autant d’espace de stockage, vous voulez donc vraiment pouvoir utiliser l’affinement des applications pour les aider.
- La perte de qualité sera la plus grande pour eux et compte tenu du fait que la résolution de leurs appareils est faible, ils le remarqueront.
En raison de cela, les utilisateurs risquent d’être malheureux et c’est mauvais pour vous. D'après mon expérience, les utilisateurs mécontents ont 10 fois plus de chances d'évaluer votre application que les utilisateurs satisfaits. Tu ne veux pas de ça, n'est-ce pas? :)