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.

An example of a hub device showing a list of 3 labeled photos on a purple background with hint text on the bottom.

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

Resizing

Cover

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

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

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

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

A photo of a dog centered inside a padded window.

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.

Additional resources

Back to top