In mobile apps, the size of article files and images can affect performance. We recommend that you avoid using large article files if possible and find the right balance between image size and display quality.

Image Optimization video

Image Optimization video
This video describes four methods for improving AEM Mobile app performances. (Recorded January 2017)

Optimizing collection background images

We recommend that you create the background image using the dimensions of the primary target device—such as a 1536x2048 JPG image for a portrait iPad app—and set the quality level of a JPG image to a medium setting.

The background image is scaled to fill the screen and centered, so edges of the image will be cropped if the background image dimensions do not match the device dimensions.

You can use either a JPG or PNG format for background images. In most cases, JPG results in smaller image files with good quality.  

However, consider using PNG instead of JPG in the following situations:

  • If the image includes transparency (for example, if you want the background color to show through).
  • If the image includes a smaller color palette, PNG images usually compress better than JPG images.
  • If the image includes text or vector objects, PNG images are usually crisper than JPG images.

 

Find the right combination of size and quality. For example, a standard background image should be about 200 KB, not 5 MB.

Browse page with a background image

Optimizing card images and banners

We recommend that you create the card and banner images based on the largest dimensions of the card's image display area, and adjust the quality level to a medium setting. Find the right combination of size and quality.

In our testing, we find that using JPG images with larger dimensions and lower quality settings results in the most effective size to quality balance in mobile apps. Use PNG images if your image has transparency or text.

Card images are scaled, centered, and cropped when used on a card. So the image may be different than your design intention. Design the artwork with prominent features near the center of the image. Changes in card size, card dimension, and image aspect ratio on the card will all influence how the image appears on the card.

Browse page with full-width cards

Guidelines for using HTML content in articles and dynamic banners

Pay attention to the size of image files you include in HTML articles. While large images may display fine in a web browser, large images can affect download speed of articles in mobile apps. Compress images. Find the right compression settings that will still display crisp images on your target devices.

If you use the AEM Mobile Article Packager to create HTML articles or dynamic banners, keep in mind that when you drag and drop the HTML files folder onto the Packager, the resulting article file includes all the files in those folders—even if the assets are not used. Make sure that you streamline your HTML files before generating the article file. For example, if you include multiple instances of the same image, such as PSD, JPG, and PNG images, make sure that you remove any image that's not used in the HTML.

If you use a Content Management System (CMS) to create article files, make sure that the articles files do not include overly large images or unused assets.

For details, see Creating HTML articles for AEM Mobile.

Images used in InDesign-based articles

Resize or optimize embedded video files, or considering streaming videos instead of embedding them.

If you use InDesign to create fixed-layout articles, all non-interactive assets are resampled automatically when you export the article, so you don't need to be concerned about using large images in your InDesign layouts.

For interactive overlays, it's important to understand the difference between pass-through and resampled overlays.

  • Resampled overlays—slideshows, buttons, and scrollable frames—are compressed just like non-interactive content.
  • Pass-through overlays are not compressed when you export the article. They are passed through in the size you used when you created them. Pass-through overlays include video and audio files, image sequences, pan & zoom images, and audio controller files. For pass-through overlays, pay attention to the size and quality of the files.

For details, see Overview of interactive overlays.

Sharing fonts in HTML articles

Instead of loading the same set of fonts for every HTML article, you can use the On-Demand Services Portal to specify fonts to be included in your app. You can then click an option to copy a list of fonts used and include this list in your CSS or HTML files. By referencing shared fonts, you can improve the download times of HTML articles in your app. See these articles:

Customizing AEM Mobile apps: Use custom fonts

Creating HTML articles for AEM Mobile: Using shared fonts.

Sharing assets in HTML articles

If you use a content management system (CMS) to author articles for AEM Mobile, you can use the Shared Content API to bundle content that is shared among these articles. Sharing images, JavaScript, and CSS files is an excellent way to improve app performance and ensure consistency. See Working with shared content using the On-Demand Services APIs.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет