web-dev-qa-db-fra.com

Meilleures pratiques en matière de taille d'image pour les applications mobiles

Je crée une application mobile qui ciblera l'iPhone/iPad et les téléphones Android. L'application impliquera les utilisateurs de prendre des photos et de les télécharger sur mon serveur et plus tard, les utilisateurs pourront regarder ces photos sur leurs appareils mobiles (mais pas nécessairement leurs propres photos, donc un Android peut regarder une photo prise avec un iPhone).

Quelles tailles dois-je enregistrer les photos pour pouvoir couvrir la plupart des cas d'utilisation? Les iPad sont à 1,333 W/H, la plupart des téléphones mobiles sont à 1,5 ou 1,333 W/H avec quelques rares 1,666 W/H. Plus précisément:

iPad: 1024x768, iPad3: 2048x1536, iPhone et certains autres téléphones: 960x640, 480x320, 800x480.

Pour pouvoir le gérer, je dois décider de certaines tailles d'image et enregistrer les photos dans ces tailles. Je ne cherche pas vraiment d'aide sur le plan technique. Je peux faire une mise à l'échelle de l'image côté serveur, etc. Je recherche des recommandations/meilleures pratiques/leçons apprises sur les tailles d'image avant d'aller trop loin dans la construction.

  • Dans quelles tailles dois-je enregistrer les photos pour couvrir la plupart des cas d'utilisation?
  • Recommandez-vous une mise à l'échelle côté client avant le téléchargement sur le serveur pour économiser sur le temps de transfert (par exemple, réduire les photos de l'iPad à 2048x1536) ou dois-je toujours transférer les originaux?
  • Comment dois-je gérer les tailles d'images incompatibles (montrant une photo prise avec un iPad sur un Android par exemple)? Dois-je prédécouper ces images sur mon serveur avant de les envoyer au client ou dois-je laisser le téléphone client gère le redimensionnement de l'image?
  • Il y a aussi le problème de l'interface utilisateur. Il y aura d'autres choses sur la page que la photo, peut-être un bouton ou deux pour la navigation. Dois-je opter pour quelque chose de plus petit que la taille plein écran tout en conservant le même rapport hauteur/largeur lors de l'enregistrement des images?

Je sais que certaines de ces questions n'ont pas de réponse unique et les réponses sont relatives, mais je voulais obtenir des opinions. Merci.

41
cetioren

Pour Android, je pense que le meilleur endroit pour commencer serait ici, il contient beaucoup d'informations, y compris des tailles d'écran standard et comment afficher des images tout en les conservant dans la meilleure qualité possible.

http://developer.Android.com/guide/practices/screens_support.html

Je suggère également de faire autant de manipulation d'image que possible sur votre serveur. Les images sont difficiles à travailler sur Android en raison des contraintes de mémoire et de la fragmentation. Deux téléphones peuvent stocker des photos prises de la même manière avec des orientations différentes, et il n'y a pas de moyen simple de gérer les rotations, même si cela peut être fait (heureusement, je n'ai pas encore rencontré un téléphone qui enregistre de manière incorrecte les données Exif, mais je ne serais pas surpris si elles existaient ...) Plus vous comptez sur le téléphone pour le faire, plus vous avez de chances pour les erreurs dues aux fabricants qui mettent les enveloppes et personnalisent autrement la façon dont il gère les supports.

Quant à la façon d'afficher, idéalement si votre back-end fait déjà un tas de redimensionnements différents, vous pouvez inclure la densité de votre écran lorsque vous demandez les images et envoyez la meilleure taille en fonction du guide de développement. Si vous souhaitez réduire au minimum les différences, prenez au moins en charge la moyenne ou la haute densité pour les téléphones et la très haute densité pour les tablettes.

Juste mes deux cents, je suis sûr que vous aurez beaucoup d'opinions. Bonne chance.

11
MattDavis

Je n'ai pas de réponse complète pour vous, mais j'ai quelques réflexions ...

1) Je suggère de réduire la taille des images avant de les télécharger. Si j'utilisais votre application et que je devais télécharger une photo de 4 mégaoctets, chaque fois que je voulais utiliser votre application, je passerais probablement. Et au fur et à mesure que nous progressons, nous utilisons une technologie bien meilleure en termes de téléphones-appareils photo; Nokia a publié un appareil photo de 41 mégapixels, qui, je suppose, créera des images plutôt grandes. Les utilisateurs devant télécharger une image de 4 à 6 Mo ne sont pas non plus une bonne idée. Juste quelques réflexions d'un point de vue utilisateur.

2) Je ne couperais pas les images. Vous ne savez pas nécessairement quelles parties de l'image ne sont pas importantes, alors comment savoir où la recadrer? Laissez le téléphone dimensionner les images en conséquence et comptez sur la possibilité de zoomer sur les images pour voir les choses à une plus grande taille.

3) Vous pouvez essayer de créer une interface utilisateur qui masque les boutons. Si vous avez quelque chose de vraiment simple (comme simplement avancer ou reculer), vous pouvez vous fier aux commandes gestuelles (glisser) pour vous déplacer dans votre application. Vous pouvez implémenter des tiroirs coulissants et des menus qui occupent temporairement de l'espace lors de leur utilisation, mais vous redonnent de l'espace lorsque vous souhaitez consulter le contenu principal (images, dans votre cas). J'ai généralement constaté que masquer les boutons ne fonctionnait pas bien et que les gens semblaient vouloir/rechercher des boutons qui leur permettaient de naviguer, mais la galerie Android fonctionne très bien avec le menu + glisser uniquement, donc qui sait vraiment.

6
Gophermofur