Some experiences are more visually immersive, making significant use of static display images, while others might use text or icons exclusively. There are a few ways to design and source images to display in your experience.
- Image formats
- Image and source
- Additional resources
The following image formats are supported:
|JPEG||.jpeg, .jpg||Base & progressive are supported|
|PNG||.png||Alpha channel supported|
To use images in your experience, you will need to provide an asset for each of the six primary density classes. For example, if you have an image that is 340 x 260 pixels for a medium-density (mdpi) baseline screen, you will need to provide that same image in the following sizes: 255x195, 340x260 (baseline), 510x390, 680x520, 1020x780, 1360x1040.
Image sizing chart
|Image Size Examples||Multiplier||Classification||PPI|
|255 x 195 px||.75x||ldpi||~120 ppi and below|
|340 x 260 px (baseline)||1x||mdpi||~160 ppi|
|510 x 390 px||1.5x||hdpi||~240 ppi|
|680 x 520 px||2x||xhdpi||~320 ppi|
|1020 x 780 px||3x||xxhdpi||~480 ppi|
|1360 x 1040 px||4x||xxxhdpi||~640 ppi|
By default images will be scaled uniformly (maintaining aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Contain will uniformly scale the image (maintaining its aspect ratio) so that both dimensions (width and height) will be equal to or less than the corresponding dimension of the view (minus padding).
Center will center the image in the view along both dimensions.
If the image is larger than the view, it scales down uniformly so that it is contained in the view. Both Contain and Center may allow the background color to show through if the image dimensions do not match the view dimensions.
Image and source
If an image is large, it can be slow to load, or might not load entirely on the screen. You should consider this and optimize image assets appropriately for your experience.