API - Tailles d'image pour iOS et Android (Différentes tailles d'écran) - Optimisation

Question

Travailler sur une application qui affiche des images de différentes tailles comme des grilles, des listes (comme Instagram), des images qui occupent tout l'écran.

Ex. - vous avez peut-être une image en grille (pas très grande), mais cette même image est affichée sur un autre écran qui a presque la taille de tout l'écran. C'est comme une version explosée de ceci. Il y a aussi les plus petites vignettes de ces images.

Travailler avec l'équipe Backend pour trouver une solution optimale.

Questions:

1. Quelle est la manière la plus optimale pour traiter des images pour différentes tailles d'écran? Je sais que instagram envoie les URL pour les résolutions et les vignettes haute résolution.

2. Avons-nous besoin de plusieurs tailles pour chaque image? Exemple. vue grille (avons-nous besoin d'un 1x, 2x ou 3x) pour chaque image? ou une taille peut-elle servir toutes les tailles d'écran de téléphone et nous pouvons simplement définir le mode d'échelle dans le code? Serait-ce bien, même pour les plus petites tailles d'écran? Serait-ce une mauvaise expérience pour les petites tailles de téléphone, car ils ont besoin d'images. Pour moi, ce ne serait pas optimal puisque les petits téléphones comme SE n'ont pas la même puissance de traitement que l'iPhone 8 plus. Si nous utilisons la même API pour servir iPhone et Android - comment cette API peut-elle être un levier pour Android, étant donné qu'ils ont plus de tailles d'image à gérer.

Toute indication serait grandement apprécier.

Answer 1

HYPOTHÈSE:

Vous parlez des images depuis un serveur web. Pas svgs, pas interface graphiques. Il n'y a pas de documents officiels de ce domaine, juste des suppositions et des résultats d'expérience. Je partage le mien.

Si vous vouliez dire des graphiques d'interface, il y a des documentations officielles d'Apple et de Google. Si vous vouliez dire svgs, ils sont automatiquement mis à l'échelle. Si vous aviez l'intention d'y répondre, veuillez éditer le sujet ou en ouvrir de nouveaux

Une solution pourrait être, au lieu d'agir uniquement sur les tailles d'image, de changer la qualité des JPG. Vous pouvez utiliser une image de ~ 200x ~ 200 de qualité complète pour les petites vignettes (avatars, icônes photo), ce qui peut convenir à toutes les tailles de périphériques, résolutions et modèles, sans être trop lourd. Puis, pour les plus grands aperçus/image complète ouverte, vous pouvez conserver la même taille (l'original, ou une taille maximale que vous définissez) mais, en utilisant deux versions de l'image: une avec peu de qualité JPG (de sorte qu'elle puisse être chargé rapidement, consommer moins d'octets et montrer le contenu de l'image) et l'autre avec la qualité d'origine (qui nécessite le chargement et les octets, mais il est seulement montré par la demande).

Pour choisir la bonne valeur de la petite vignette (la ~ 200px), vérifiez la plus grande taille de pouce que vous avez. Si vous avez une bulle d'avatar de 96x96 sur les plus petites res, multipliez-la par 3 (96 * 3 = 288) et vous avez la taille! Il est vrai que le plus petit écran res exigera seulement une image 96x96, mais, étant donné que ce sont des petits nombres, la différence n'est pas pertinente (aussi, parce que nous parlons de photos et non d'images vectorielles vous laissez la mise à l'échelle à l'appareil, le résultat est le même).

J'ai trouvé des documents de Google, ce qui explique certaines choses sur les formats d'image et comment réduire la taille de téléchargement: https://developer.android.com/topic/performance/network-xfer.html Ils disent utiliser format jpeg, png, ou WebPs et montrer quelques exemples et des lignes directrices pour choisir le format

Answer 2

vous pouvez utiliser les ressources svg (qui est une image à base de vecteurs): Ce faisant, vous n'avez pas besoin de générer une ressource pour chaque résolution, et juste besoin d'une ressource. En temps réel, l'image svg s'étendra jusqu'à la résolution de l'appareil.

Selon la documentation, vous avez beaucoup à gagner ici:

en utilisant le vecteur dessinables au lieu de bitmaps réduit la taille de votre APK parce que le même fichier peut être redimensionnée pour différentes densités d'écran sans perte de la qualité d'image

J'ai utilisé ceci dans Android, et il résout votre problème dans Android.

Je ne l'ai pas utilisé sous iOS, mais il semble qu'il y ait un solution similaire.

Answer 3

Vos questions ont presque le même but. Donc, en gros, enregistrer 6 versions d'images comme 50px 100px 200px 400px 800px et 1600px etc

6 sera suffisant car vous pouvez couvrir presque toutes les tailles d'écran comme google fait dans android. qui est LDPI mdpi hdpi xhdpi xxhdpi et xxxhdpi

utiliser une API pour les demandes d'images, envoyez vos tailles d'écran à api comme paramètre ils réinvestissaient les images résultant largeur et hauteur. par exemple: pour un écran de 800x600 renvoyer une version 400px de celui-ci. Si vous ne le faites pas, vous devrez les redimensionner en fonction de la taille du client, ce qui est mauvais pour les performances et également une mauvaise approche pour la mise en page automatique dans IOS.

Answer 4

Vous pouvez utiliser des solutions de gestion d'image tierces telles que Cloudinary.

https://cloudinary.com/

Cloudinary génère des images de format différent qui peut être servir à tous les types d'appareils.