Share
Dans ce didacticiel sur la conception mobile, Jen Gordon traite de la question de l'exportation des fichiers image destinés aux applications mobiles au format PNG ou JPEG..
Récemment, j'ai reçu une excellente question du lecteur Mobiletuts +, Ronald, qui est en train de créer une application nécessitant le chargement de photographies de raisins (oui, des raisins). Hé, je ne pose pas de questions, je viens d'y répondre. Plus précisément, sa question était:
Dois-je sauvegarder mes photos de raisins au format .png ou .jpg?
Bonne question! Après tout, il est bien documenté que .png est le format de fichier image recommandé pour la plate-forme iOS. Toutefois, pour les projets Web, il est de notoriété publique que le format .jpg est préféré pour les images photographiques..
Tout d’abord, abordons les nuances de chaque format de fichier. Pour les détails vraiment ringards, allez ici.
JPEG - la norme pour les images photographiques et ne supporte pas la transparence.
GIF - limité à 256 couleurs, il convient donc aux gros blocs de couleur unie et aux graphiques simples. Il supporte la transparence mais produit des bords déchiquetés.
PNG - une belle combinaison de .jpg et .gif, permettant des images de qualité .jpg et de la transparence sans les .gif jaggies.
La solution simple pour les applications iOS natives est de toujours utiliser le format PNG, sauf si vous avez une très bonne raison de ne pas.
Lorsqu'une application iOS est créée, Xcode optimise les fichiers .png de manière à ne pas optimiser les autres formats de fichiers. Il devient assez profond, et vous pouvez lire sur les détails ici. Cette citation du blog de Jeff Larmarche l'explique le mieux:
Lorsque vous utilisez un autre type de fichier (ou si vous chargez des fichiers PNG non optimisés), votre iPhone doit effectuer la permutation des octets et la prémultiplication alpha au moment du chargement (et éventuellement refaire la multiplication alpha au moment de l'affichage). Votre application doit effectuer le même traitement que Xcode, mais elle le fait au moment de l'exécution plutôt qu'au moment de la construction. Cela va vous coûter cher en termes de cycles de traitement et de surcharge de mémoire..
Toutes les images que vous voyez dans les applications iOS ne font pas réellement partie du binaire de l'application. Cela signifie qu'ils sont téléchargés à partir du Web et servis dans l'application? De l'extérieur? l'application réelle. Dans ce cas, il est judicieux d’optimiser les images à la taille de fichier la plus petite possible, ce qui peut souvent signifier l’utilisation d’un format autre que PNG..
Vous trouverez ci-dessous un exemple de ce dont je parle. Vous pouvez voir que l'image de raisin est configurée pour un écran iPhone, 320x480px, 72 dpi:
Quand le? Enregistrer pour le Web? Une boîte de dialogue apparaît (menu Fichier> Enregistrer pour le Web). Vous pouvez voir côte à côte la différence entre enregistrer votre image au format .png et .jpg..
Taille du fichier - C'est la différence la plus dramatique. Le fichier .png pèse 258k, tandis que le fichier .jpg est à 18k. C'est une énorme différence. Et si votre application charge ces images à partir du Web, vos utilisateurs n’apprécieront pas le temps d’attente supplémentaire du fichier .png..
Couleur et contraste - Les couleurs du .jpg sont plus riches, plus saturées. Le .png semble délavé.
Alors, quelques conseils pratiques pour savoir quand utiliser .jpg vs? png pour les téléchargements Web:
Eh bien, nous ne pouvons pas les laisser en dehors de la conversation, pouvons-nous?
.Les fichiers tif (ou .tiff) ne sont pas rendus dans un fichier? Enregistrer pour le Web? environnement. En règle générale, les fichiers .tif sont des images de haute qualité dans lesquelles vous pouvez conserver la transparence et les calques. Vous les voyez utilisés beaucoup dans la conception d'impression.
.Les fichiers gif sont utilisés en permanence dans la conception Web et peuvent préserver la transparence, tout comme un fichier .png. Le problème avec l'utilisation de .gif est double:
1. Si vous exportez une photo (voir ci-dessous) .gif ne peut vraiment pas rivaliser avec .jpg en termes de taille de fichier ou de qualité d'image:
2. Si vous exportez des graphiques et pensez à .gif, détrompez-vous. La manière dont .gif préserve la transparence est différente de celle de .png. Regardez l'exemple ci-dessous, où je voulais préserver la lueur autour du bouton. J'ai découpé le bouton, caché l'arrière-plan en damier et je suis allé dans Fichier> Enregistrer pour le Web pour ouvrir la boîte de dialogue Enregistrer pour le Web:
Dans la boîte de dialogue Enregistrer pour le Web, vous pouvez voir comment le bouton s'affiche lorsque je sélectionne "gif". Le bouton est entouré de la couleur que j'ai choisie dans le champ? Mat? menu déroulant. Le format .gif exigera que tout dégradé transparent ait une couleur d'arrière-plan (ou de cache) dans laquelle le dégradé peut passer. Imaginez à quoi ce bouton ressemblerait superposé à mon fond quadrillé. Beurk.
C'est pourquoi .png est une chose si merveilleuse. Voyez comment la transparence est réellement transparente? Superposé à un fond vérifié, il aura exactement la même apparence que dans la maquette!
En résumé, pour les applications iOS natives pour lesquelles vous fournissez les images avec le binaire de l'application et construisez avec Xcode, utilisez le format .png. La seule exception concerne les images chargées dans l'application à partir du Web. Puis optimisez au maximum!
Accentsconagua