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.

An example of two hub devices showing a list of 3 labeled photos of planets from NASA with a header and footer.

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.

A photo of a dog scaling from smallest image on the left to largest image on the right.

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



A cropped photo of the top half of a dog, showing the uniform scaling process with large images on smaller devices.

Using (best-fill) will scale the image uniformly up or down so that the bounding box is completely covered.


A photo of a dog showcasing padding around the image if it is smaller than the maximum device specifications for image size.

Using (best-fit) will scale the image uniformly up or down so that the entire image fits within the bounding box.


A photo of a dog centered inside a padded window.

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.

Additional resources