[RESOLU] Taille des images

Luc-ALuc-A Membre
novembre 2017 modifié dans Dev. iOS, watchOS, tvOS #1

Bonjour à  tous !


 


J'ai besoin de précision sur la taille des éléments, pour pouvoir insérer des images.


Je sais que la résolution de l'iPhone SE est de 1136 x 640. Pourtant, lorsque je regarde la taille des éléments dans le storyboard, et notamment la view d'un viewController, celle-ci est divisée par deux par rapport à  la taille réelle. Concrètement, Xcode me dit que la taille de la view d'un viewController pour l'iPhone SE est de 568 x 320.


 


Pour redimensionner mes images, et être sûr que leur taille sera correcte, dois-je multiplier la taille obtenu par Xcode par deux ? Aurais-je dans ce cas une taille correcte ?


 


Je vous remercie pour votre aide.


Réponses

  • LeChatNoirLeChatNoir Membre, Modérateur

    C'est le principe du retina. Donc oui, dans une vue de 100x100 sous Xcode, tu vas mettre une image de 200x200 pour avoir une qualité HD.


    Et tu vas la suffixer de @2x.

  • XCode ou plutôt iOS, via ses CGRect/CGSize te donnera toujours une taille en points.

    Mais le Retina rajoute un multiplicateur, que tu dois pouvoir obtenir en faisant `[[UIScreen mainScreen] scale]`. Il est 2 ou 3 normalement en fonction des devices (il était de 1 avant le Retina).


  • DrakenDraken Membre
    novembre 2017 modifié #4


    Pourtant, lorsque je regarde la taille des éléments dans le storyboard, et notamment la view d'un viewController, celle-ci est divisée par deux par rapport à  la taille réelle.


     




    Tu confonds deux unités de mesure différentes : les pixels et les points.


     


    Ce que tu appelles "taille réelle" est le nombre de pixels d'une image. iOS et Xcode ne mesure pas la taille des éléments graphiques en pixel, mais avec des points. Un point est une unité de mesure virtuelle conçue par Apple pour permettre la création d'interfaces sans se soucier de la résolution réelle d'un device.


     


    Selon le type de device cela peut représenter 2x2 pixels ou 3x3 pixels. Ne te préoccupe pas de ça. Pense uniquement en point, iOS s'occupera tout seul d'adapter la taille physique des images à  la dimension logique en Point.


     


    C'est d'ailleurs la raison de l'existence des formats graphiques @1x, @2x et @3x. En tant que développeur, tu es sensé fournir les ressources graphiques dans les 3 formats. En installant une application sur un device, l'AppStore ne télécharge que le type de ressources correspondant à  la résolution réelle de l'écran :


     


    - @2x pour les iPhones de taille normale (SE, 6, 7 et 8) et les iPads


    - @3x pour les 6+,7+,8+ et X).


     


    EDIT : J'ai corrigé la liste des devices. J'étais persuadé que les iPad étaient en @3x, mais non en fait !

  • iLandesiLandes Membre
    novembre 2017 modifié #5

    A ce propos exit-t-il un moyen de gérer la taille des images que l'on souhaite utiliser en fonction de l'écran.


     


    Car que c'est expliqué plut haut tout fonctionne bien de manière transparente pour le dev pour les images embarquées dans l'application. Mais lorsqu'il s'agit d'utiliser des images téléchargées depuis un serveur par exemple. On peut vouloir télécharger des images différentes en fonction du device de l'utilisateur.


     


    Il-y-a-t-il une fonction qui permette de connaitre le coefficient pixels / points ?


     


    J'avoue j'ai pas cherché car je n'en ai pas un besoin immédiat


  • DrakenDraken Membre
    novembre 2017 modifié #6


     


    Il-y-a-t-il une fonction qui permette de connaitre le coefficient pixels / points ?


     




     


    iPhone SE : 2


    iPhone 6 : 2


    iPhone 6+ (et assimilé) : 3


    iPhone X : 3


    iPad Pro 9,7 pouces : 2


    iPad Pro 12,9 pouces : 2


    etc..


     


     


     


    UIScreen.main.nativeScale


  • Bonjour à  tous !


     


    Je vous remercie pour vos réponses !


     


    J'ai un nouveau projet. J'ai besoin d'avoir une image dans un bouton lui-même dans une tableView, et d'une autre image, plus grande, dans une UIImageView, elle-même dans une tableView.


     


    J'ai bien compris que je devais mettre toutes les images dimensionnées correctement dans les assets, plutôt que de ne mettre qu'une seule image qui sera redimensionnée ou des images qui seront chargées par Wifi ou 4G.


     


    Donc, il faut que je dimensionne mes images pour les deux vues (le bouton et l'UIImageView), pour les dimensions en portrait et en paysage, et pour les @x1, @x2 et @x3.


     


    C'est un sacré boulot, et je n'ai pas fini moi !! Si j'ai bien compté, cela fait 12 dimensions différentes pour chaque image !!


  • Joanna CarterJoanna Carter Membre, Modérateur
    Ou tu peux les créer en pdf avec une seule taille par image
  • CéroceCéroce Membre, Modérateur
    novembre 2017 modifié #9

    Donc, il faut que je dimensionne mes images pour les deux vues (le bouton et l'UIImageView), pour les dimensions en portrait et en paysage, et pour les @x1, @x2 et @x3.

    Dans les image assets de Xcode, les images peuvent être découpées en 9 tranches pour s'adapter à  la taille d'un bouton, par exemple. En bas à  droite, il y a un texte "Show Slicing" pour ça.

    Par ailleurs, je n'ai jamais fait de versions spéciales pour paysage ou portrait. À la rigueur pour l'image au lancement, mais avec le Default.storyboard (ou xib), ça n'a plus tellement d'intérêt.

    Enfin, les logiciels comment Sketch ou Affinity Designer sont capables d'exporter vers les trois tailles automatiquement.
  • Joanna Carter, peut importe que ce soit en PDF ou en PNG. L'important pour moi est que les images soient bien dimensionnées, enregistrées dans l'application directement, et surtout que l'application ne redimensionne pas les images.


    Pour ça, il faut choisir "Render as Original Image", c'est bien ça ?


     


    Céroce, je te remercie pour toutes ces informations !


    Pour portrait ou paysage, je pense qu'il faut que j'adapte la taille de l'UIImageView. Il faut aussi que je centre l'image. Et avec Render as Original Image", je pense que c'est bon. D'ailleurs, j'hésite encore à  mettre une image sur un bouton, ou supprimer le bouton et mettre carrément ladite image directement en image de fond des rows. J'ai vu une application comme ça, mais je ne sais pas comment faire pour vous faire une capture d'écran à  partir de mon iPhone...


     


    J'utilise Sketch pour faire mes images, justement ! Mais je ne sais pas encore faire des maquettes...


    Pour exporter les images, je les redimensionne à  la main. Je vais voir ça aussi !


  • Joanna CarterJoanna Carter Membre, Modérateur

    Si tu crées tes images en PDF, il ne faut que créer une taille de chaque image et le système s'occupera de les redimensionner sans distortion ou dégradation de qualité. Comme tu dis, il faut choisir "Render as Original Image"; si non, les couleurs de tes images seront remplacées avec la couleur monochrome de "tint"


     


    Mais, pour les boutons ou des autres types de vue avec les bordures dont tu veux garder l'épaisseur, il faut suivre les conseils de Céroce en utilisant les images "bitmap" avec le "slicing"


  • Bonjour !


     


    Je vous remercie pour vos réponses !


     


    Pour le moment, je n'ai fait un test que sur une seule image... Elle est en PNG. Dois-je la convertir en PDF ??


    J'ai encore une question : dois-je faire une image pour tous les devices confondus, c'est-à -dire une image pour @x1, @x2 et @x3, ou une image pour chaque taille d'écran, c'est-à -dire une image pour les 5, 5c, 5s, SE ; une autre pour les 6, 7 et 8 , une pour le X, une pour les PLUS et pareil pour les iPad ?


     


    Pour le bouton, je pensais regarder la taille du bouton, et faire une image à  la taille du bouton, tout simplement.


     


    Merci !


  • Joanna CarterJoanna Carter Membre, Modérateur

    Dans un mot - non, non, non !


     


    Si tu commences avec une image en "bitmap" (png, jpg, etc) tu devrais commencer avec la plus grande taille que tu prévois utiliser, puis tu devrais la redimensionner pour faire toutes les autres tailles.


     


    Si tu commences avec une .png et tu la convertis en PDF, tu auras un fichier vectoriel qui contiendra un bitmap à  une seule taille. En la redimensionnant, tu augmenteras ou réduiras la taille de pixels dans le fichier, pas l'image soi-même.


     


    Tu ne devrais jamais créer les PDFs des bitmaps. Si tu veux utiliser les images PDF, tu devrais commencer en créant un fichier PDF. Tu peux, aussi, convertir un fichier SVG en PDF, parce que les deux sont vectoriels.


     


    Mais, si tu prévois créer les images pour les boutons, il ne faut pas les redimmensioner parce que, en le faisant, tu augmenteras ou réduiras l'épaisseur des bordures. Normalement, avec les boutons, on ne change pas les bordures, seulement la taille de l'intérieur.


     


    Pour les boutons, il faut créer une bitmap avec quatre coins et une "croix" d'un pixel d'épaisseur entre les coins. Puis, tu peux utiliser le "slicing" dans les assets.


     


    Qu'est-ce que veux créer comme images ? Avec quels objectifs ?


  • Bonjour à  tous !


     


    Je suis désolé pour le retard, mais j'ai été pris par une nouvelle application...


     


    Joanna Carter, je suis désolé, mais je me suis mal exprimé.


    Je vais être le plus explicite et le plus précis possible.


     


    Je suis en train de travailler sur une application, que je vous présenterai plus tard, et qui je l'espère, devrais plaire...


    La première page de mon application est une tableView avec une liste. Pour que les choses soient simples, imaginez une liste de restaurant, comme l'application Michelin.


    Pour cette première page, 2 possibilités s'offrent à  moi :


    Soit je me le nom du restaurant et un bouton avec une image.


    Soit je met une photo du restaurant en image de fond de la view, et je m'arrange pour que la couleur du texte soit toujours visible.


     


    J'ai également une autre page qui montre les détails des restaurants, et qui permet d'agir : voir l'adresse, par exemple.


    Dans cette page, j'ai inclus une image dans une UIImageView.


     


    J'ai compris : il me faut des images en PDF.


     


    Pour les images, ce que je pensais faire, c'est les redimensionner moi-même, c'est-à -dire regrouper les iPhones selon leur résolution (les iPhones 5 et SE ont la même résolutions, les 6,7 et 8 aussi,...), récupérer la taille du bouton et de l'UIImageView sur les simulateur, la multiplier par 2 ou par 3 selon le device, et enregistrer le tout dans les assets.


    Mais d'une part, c'est un travail monstre, que je vais mettre un certain temps à  réaliser, et d'autre part, même si je parviens à  créer un système qui va sélectionner l'image pour l'iPhone SE au lieu du 6 (@x2), il y a plein d'image qui ne seront pas utilisée.


     


    Donc, je pense que je vais regarder la taille de l'UIImageView sur l'iPhone SE, la multiplier par deux pour avoir une taille réelle (@x2), m'arranger avec la hauteur, et utiliser cette taille d'image pour tous les devices @x2, sacahnt que pour l'iPhone 8 par exemple, l'image paraitra plus petite, mais je vais la centrer, ce qui fait que la disposition sera correcte.


    Pour l'image de la première page, c'est-à -dire de la tableView, j'hésite encore à  faire soit l'image sur un bouton, soit supprimer le bouton et mettre directement l'image comme background de la tableView.


     


    Puis-je mettre une image dans une UIImageView sans la redimensionner, mais en conservant la taille réelle et en coupant automatiquement l'image si elle dépasse des bords ? Comment faire cela ?


     


    Les images montrent des bâtiments. Le but est de les reconnaitre, et aussi pour le design de l'application.


     


    Joanna Carter, je te remercie pour toutes ces précisions !


  • Bonjour à  tous !


     


    Je fais encore appel à  vous, car malgré mes recherches, je n'ai pas trouvé comment faire.


     


    Puis-je insérer une image dans un bouton ou dans une UIImageView, sans la redimensionner, mais l'afficher de manière à  ce qu'elle soit coupée automatiquement ?


     


    Je vous remercie pour votre aide !


  • Joanna CarterJoanna Carter Membre, Modérateur
    Cà  dépend l'image. C'est une image de quoi ?


  •  


    Puis-je insérer une image dans un bouton ou dans une UIImageView, sans la redimensionner, mais l'afficher de manière à  ce qu'elle soit coupée automatiquement ?


     




    Oui ..


    Je n'en dirais pas davantage tant que tu n'auras pas montré un exemple précis de ce que tu veux obtenir. Ta demande est bien trop flou. Le cas échant utilises un logiciel graphique pour créer les images avant et aprés.

  • Luc-ALuc-A Membre
    novembre 2017 modifié #18

    Draken, je suis désolé, c'est vrai que ma demande est trop floue.


     


    Je vais être plus explicite, et j'ai même fait une maquette avec Sketch.


    Sur la maquette, il y a deux photos. La première est le résultat que j'obtiens. La seconde est le résultat que je souhaite obtenir. La première image est écrasée, ce qui la rend moche. La seconde image n'est pas écrasé, mais elle a été coupé à  gauche et à  droite pour tenir. C'est ce que je veux obtenir : une image qui soit coupé automatiquement et centrée, donc coupé en haut et en bas aussi.


    Le reste, sauf les titres correspond à  ce que j'ai fait, c'est-à -dire la couleur de fond et le contenu de la première page de mon application.


     


    J'ai encore une autre question, d'une très grande importance. Les image sont en PNG. Or, elles pèsent leur poids : environ 4 Mo chacune. Le problème, est un problème de RAM, car j'arrive vite à  plus de 130 Mo de RAM !


    Comment puis-je supprimer les images de la RAM au fur est à  mesure que les cell disparaissent ? Les images sont dans une tableView.


     


    J'ai déjà  cherché, et j'ai trouvé un moyen pour que les images soient chargées au fur et à  mesure. Au début, je suis à  60 Mo de RAM, mais ça augmente très vite, sans diminuer.


     


    Pour cela, j'ai utilisé le code suivant :



    func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let cell = tableView.dequeueReusableCell(withIdentifier: TableCell.identifier, for: indexPath) as! TableCell
    cell.photos.image = nil
    }

    Mais je ne sais pas comment faire pour effacer de la RAM les images qui ne sont plus affichées...


     


    Je vous remercie pour votre aide !


  • DrakenDraken Membre
    novembre 2017 modifié #19


    Draken, je suis désolé, c'est vrai que ma demande est trop floue.


     


    Je vais être plus explicite, et j'ai même fait une maquette avec Sketch.


    Sur la maquette, il y a deux photos. La première est le résultat que j'obtiens. La seconde est le résultat que je souhaite obtenir. La première image est écrasée, ce qui la rend moche. La seconde image n'est pas écrasé, mais elle a été coupé à  gauche et à  droite pour tenir. C'est ce que je veux obtenir : une image qui soit coupé automatiquement et centrée, donc coupé en haut et en bas aussi.


    Le reste, sauf les titres correspond à  ce que j'ai fait, c'est-à -dire la couleur de fond et le contenu de la première page de mon application.


     




     


    Il suffit de modifier deux paramètres de l'imageView avec Storyboard.


    a


    - 1) Fixer la propriété Content Mode à  Aspect Fill


    - 2) Cocher la case Clip to Bounds


     

    Aspect Fill indique à  l'imageView qu'elle doit conserver la plus petite dimension de l'image à  l'identique. Tu devrais jouer avec la valeur de Content Mode pour voir comment cela affecte l'affichage de l'image.

     

    Dans certains cas, l'image déborde du cadre de l'imageView, d'où l'utilisation du paramètre Clip to Bounds qui force l'affichage à  rester à  l'intérieur du contrôle graphique en coupant tout ce qui dépasse.

     

    Pour la gestion mémoire des images, crée un autre topic. C'est un sujet très différent.

  • Je vous remercie pour votre aide !


     


    Pour la gestion mémoire des images, j'ai créé un autre sujet.


  • Joanna CarterJoanna Carter Membre, Modérateur
    novembre 2017 modifié #21


    J'ai encore une autre question, d'une très grande importance. Les image sont en PNG. Or, elles pèsent leur poids : environ 4 Mo chacune. Le problème, est un problème de RAM, car j'arrive vite à  plus de 130 Mo de RAM !


    Comment puis-je supprimer les images de la RAM au fur est à  mesure que les cell disparaissent ? Les images sont dans une tableView.




     


    La plus grande taille d'image nécessaire pour remplir l'écran d'un iPad Pro 12,9", c'est 2048 x 2732.


     


    Je viens de redimmensioner une de mes photos à  cette taille et, en JPG, ça m'a donné un fichier de 1,6Mo en qualité supérieure.


     


    Et cette image est assez grande pour remplir l'intégralité de l'écran.


     


    Si tu ne veux que mettre tes images dans les cellules d'une UITableView, tu n'as aucune raison de créer les fichiers à  cette taille.


     


    La plus grande taille que j'ai utilisé dans mon appli est pour les cellules sur un iPad @2x (dimensions 1536px à— 1024px) pour une taille de fichier aux environs de 103Ko.


     


    1. N'utilises pas PNG quand un fichier JPG serait beaucoup plus petit.


    2. Vérifies les dimensions dont tu as besoin et qui conviennent les cellules.


     


    Si tu ne faisais pas les grandes images, tu n'aurais pas les problèmes de mémoire.


  • Oui et non, nounours. C'est vrai pour les images disques, mais une fois chargée en mémoire les ressources graphiques sont stockés sous une forme bitmap non compressée. L'occupation en RAM d'une image dépend de sa taille réelle et non du format graphique sous laquelle elle était stockée sur le disque.

  • Joanna CarterJoanna Carter Membre, Modérateur
    novembre 2017 modifié #23


    Oui et non, nounours. C'est vrai pour les images disques, mais une fois chargée en mémoire les ressources graphiques sont stockés sous une forme bitmap non compressée. L'occupation en RAM d'une image dépend de sa taille réelle et non du format graphique sous laquelle elle était stockée sur le disque.




     


    Ce que je voulais dire, c'est que les images PNG d'une taille qui font les gros fichiers, comme dit Luc-A, ne sont pas nécessaire pour les cellules.


     


    Si on a une cellule d'un hauteur de 100pts, la taille maximum d'une image serait 300px. Et une image de cette taille ne pèse que très peu, même décompressées.


  • Ok, je suis d'accord.

  • Joanna Carter, je suis d'accord avec toi.


    J'ai en effet comparé la taille des PNG et celle des JPG. On gagne de la place !


     


    Pour mon projet, je vous ai montré ce que c'est. J'ai effectivement des titres qui prennent toutes la largeur de la page, et des photos qui prennent aussi toutes la largeur de la page, sans marge.


    Il y a aussi une chose que je n'ai pas pris en compte... Mon projet est relativement volumineux. En effet, si j'arrive au bout, je vais devoir enregistrer plus de 1 000 images dans mon application !! Ce qui est beaucoup pour la RAM mais aussi pour la capacité de stockage !


     


    Joanna Carter, j'ai téléchargé ton application. Je peux peut-être faire comme toi, c'est à  dire avoir une image dont la largeur fait la moitié de la tableView, et mettre le titre sur l'autre moitié. Comme ça, les images seront plus petites.


     


    Il faut aussi que je trouve un système pour traité les différentes résolutions, car même si Apple à  mis en place les assets @x1, @x2 et @x3, il y a tout de même des différences. Sauf si je prend les résolutions les plus petites : il y aura alors des marges pour les plus grandes résolutions.


     


    Il y a aussi une autre solution : créer une API, et télécharger les images au fur et à  mesure. Mais là , je pense que je vais avoir besoin d'une bonne connexion !


     


    Je vous remercie beaucoup ! Il faut que je réfléchisse à  tout ça !


  • LeChatNoirLeChatNoir Membre, Modérateur

    Il n'y a aucune raison de stocker 1000 images dans une appli...


     


    Tu n'as qu'à  stocker des références vers des images stockées sur un serveur dans ce cas.


     


    Et utilise https://github.com/rs/SDWebImagepour l'affichage.


  • Bonjour !


     


    LeChatNoir, je te remercie beaucoup pour le lien !


    J'ai déjà  créé une API pour mon projet, et elle fonctionne bien.


    J'ai aussi trouvé un moyen rapide pour gérer les images : utiliser un script PHP !


    Créer une page où je pourrai télécharger les images, et un script pour redimensionner mes images. Comme ça, j'irai bien plus vite qu'en redimensionnant les images à  la main, et surtout, je pourrai créer des images pour toutes les tailles d'écrans.


Connectez-vous ou Inscrivez-vous pour répondre.