Dans les applications mobiles, la taille des fichiers d'article et des images peut affecter les performances. Nous conseillons d'éviter, si possible, d'utiliser des fichiers d'article de grande taille et de rechercher le bon équilibre entre la taille de l'image et la qualité de l'affichage.

Vidéo Optimisation d'image

Vidéo Optimisation d'image
Cette vidéo décrit quatre méthodes permettant d'améliorer les performances de l'application AEM Mobile. (Enregistrée en janvier 2017)

Optimisation des images d'arrière-plan de collection

Nous vous recommandons de créer l'image d'arrière-plan suivant des dimensions de l'appareil cible principal (par exemple, une image JPG au format 1536 x 2048 pour une application pour iPad en mode portrait) et de définir le niveau de qualité d'une image JPG avec un paramètre moyen.

L'image d'arrière-plan est mise à l'échelle pour remplir l'écran et est centrée, de sorte que les bords de l'image soient recadrés si les dimensions de l'image d'arrière-plan ne correspondent pas aux dimensions de l'appareil.

Vous pouvez utiliser le format JPG ou PNG pour les images d'arrière-plan. Dans la plupart des cas, le format JPG correspond à des fichiers image plus petits avec une bonne qualité.  

Toutefois, vous pouvez utiliser le format PNG plutôt que le format JPG dans les cas suivants :

  • Si l'image comporte des effets de transparence (par exemple, si vous souhaitez que la couleur d'arrière-plan soit visible).
  • Si l'image comporte une plus petite palette de couleurs, la compression des images au format PNG est généralement meilleure que celle des images JPG.
  • Si l'image comporte du texte ou des objets vectoriels, les images au format PNG sont généralement plus nettes que les images au format JPG.

 

Recherchez la bonne combinaison de taille et de qualité. Par exemple, la taille d'une image d'arrière-plan standard doit être d'environ 200 Ko, et non de 5 Mo.

Page de navigation avec une image d'arrière-plan

Optimisation des images et bannières de carte

Nous vous recommandons de créer les images et bannières de carte en fonction des dimensions les plus grandes de la zone d'affichage de l'image de la carte, puis d'ajuster le niveau de qualité sur un paramètre moyen. Recherchez la bonne combinaison de taille et de qualité.

Lors de nos tests, nous avons constaté que les images au format JPG avec des dimensions plus grandes et des paramètres de qualité inférieurs offrent le meilleur équilibre entre la taille et la qualité dans les applications mobiles. Utilisez des images au format PNG si votre image contient des effets de transparence ou du texte.

Lorsqu'elles sont utilisées sur une carte, les images de carte sont mises à l'échelle, centrées et recadrées. L'image peut donc être différente de ce que vous aviez prévu de créer. Créez des illustrations avec les fonctions importantes proches du centre de l'image. Les modifications de la taille de la carte et de la dimension de la carte, ainsi que des proportions de l'image sur la carte ont toutes une influence sur la manière dont l'image apparaîtra sur la carte.

Page de Navigation avec cartes sur toute la largeur

Directives pour l'utilisation de contenu HTML dans des articles et des bannières dynamiques

Vérifiez attentivement la taille des fichiers d'image que vous incluez dans les articles HTML. Les images grand format peuvent s'afficher correctement dans un navigateur web, mais elles peuvent avoir un impact sur la vitesse de téléchargement des articles dans les applications mobiles. Compressez les images. Trouvez les bons paramètres de compression qui permettront d'afficher des images impeccables sur les périphériques cibles.

Si vous utilisez AEM Mobile Article Packager pour créer des articles ou des bannières dynamiques HTML, gardez à l'esprit que lorsque vous faites glisser et déposez le dossier des fichiers HTML sur Packager, le fichier d'article en résultant comporte tous les fichiers de ces dossiers, même si les ressources ne sont pas utilisées. Assurez-vous de simplifier vos fichiers HTML avant de générer le fichier d'article. Si, par exemple, vous incluez plusieurs instances d'une même image, telles que des images aux formats PSD, JPG et PNG, assurez-vous de retirer toutes les images non utilisées dans le HTML.

Si vous utilisez un système de gestion de contenu (CMS) pour créer des fichiers d'article, assurez-vous que ceux-ci ne comportent pas d'images d'incrustation grand format ni de ressources non utilisées.

Pour plus d'informations, reportez-vous à la page Création d'articles HTML pour AEM Mobile.

Images utilisées dans les articles basés sur InDesign

Redimensionnez ou optimisez les fichiers vidéo intégrés, ou optez pour des vidéos en flux continu, plutôt que de les intégrer.

Si vous utilisez InDesign pour créer des articles à mise en page fixe, toutes les ressources non interactives sont automatiquement rééchantillonnées lorsque vous exportez l'article ; vous n'avez donc pas besoin de vous soucier de l'utilisation d'images grand format dans vos mises en page InDesign.

Pour les incrustations interactives, il est important de bien comprendre la différence entre les incrustations de liaison et les incrustations rééchantillonnées.

  • Les incrustations rééchantillonnées (diaporamas, boutons et contenus défilants) sont compressées comme le contenu non interactif.
  • Les incrustations de liaison ne sont pas compressées lorsque vous exportez l'article. Elles sont transmises avec la taille que vous avez utilisée lorsque vous les avez créées. Les incrustations de liaison comportent les fichiers vidéo et audio, les séquences d'images, les images utilisant la fonction Panoramique et zoom, et les fichiers de contrôle audio. Pour les incrustations de liaison, accordez une attention particulière à la taille et à la qualité des fichiers.

Pour plus d'informations, reportez-vous à la page Présentation des incrustations interactives.

Partage de polices dans les articles HTML

Plutôt que de charger le même jeu de polices pour chaque article HTML, vous pouvez utiliser le portail des services à la demande pour spécifier les polices à inclure dans votre application. Vous pouvez ensuite cliquer sur une option pour copier une liste des polices utilisées et insérer cette liste dans vos fichiers CSS ou HTML. Le référencement de polices partagées permet d'améliorer les temps de téléchargement des articles HTML dans votre application. Reportez-vous aux articles suivants :

Personnalisation des applications AEM Mobile : Utilisation de polices personnalisées

Création d'articles HTML pour AEM Mobile : Utilisation de polices partagées.

Partage de actifs dans les articles HTML

Si vous utilisez un système de gestion de contenu (CMS) pour écrire des articles pour AEM Mobile, vous pouvez utiliser l’API de contenu partagé pour regrouper le contenu commun à ces articles. Le partage d'images, de fichiers JavaScript et de fichiers CSS constitue un outil très utile pour améliorer les performances de l'application et en assurer la cohérence. Reportez-vous à la page Utilisation de contenu partagé via l’interface On-Demand Services API.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne