Imagery
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.
How to Use Images
When placing components on top of images, use an overlay to apply a colored opacity layer over your image to help with the legibility and accessibility of your content. When you want to de-emphasize an image, you can also change its opacity to create different effects.
Backgrounds Background images create an enriching visual experience without interfering with the primary content. Place images into the background of your layout to provide texture to the primary content shown on screen.
Thumbnails Use thumbnails to differentiate between search results or pair an image with a text component to provide additional context for an option.
Icons Use smaller images to provide tertiary content, such as character stats or ratings.
Empty states Add images to an empty or default state to ensure your layouts look complete. Adding images to an empty state is an opportunity to add delight and context to an otherwise bland response.
Image formats
The following image formats are supported:
| Format | Extension | Details |
|---|---|---|
| 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 |
Resizing
Best-Fill
Using (best-fill) will scale the image uniformly up or down so that the bounding box is completely covered.
Best-Fit
Using (best-fit) will scale the image uniformly up or down so that the entire image fits within the bounding box.
None
Using (none) will make sure the image is not scaled in the bounding box. The portions of the image that fall outside of the bounding box will be clipped.
If the image is larger than the view, it scales down uniformly so that it is contained in the view. Both Best-Fill and None may allow the background color to show through if the image dimensions do not match the view dimensions.
