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
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.
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.
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.
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.
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: