Free Android app covering all aspects of addiction, including prevention and treatment

Designing for multiple screens. Alternative image resources.Part 1.

  • Written by  Clive

Different images for different devices: bitmaps, pixels and other things that go bump in the night

resources icon

Which images to use as image resources

There are two main graphic types, bitmap and vector graphics.

Vector graphics describe an image according to its geometric characteristics and can be resized without losing quality.

In Android, we’re more interested in Bitmap images which are stored electronically as a map of bits.

Another electronic image term is the pixel. Sometimes bits and pixels are interchanged and a bitmap can refer to a map of pixels, where each pixel represents a colour.

Bitmaps are resolution dependent which means they contain a fixed number of pixels so they will lose quality if you change their size.

It’s all about Pixels

Android Bitmap resources

Pixels get their name from (Pic) ture (el) ements. An image can consist of any number of pixels which are arranged in grid format with each pixel containing information about its colour. Each pixel has a uniform brightness and colour across its whole area, irrespective of size.

Resolution

The resolution of an image is represented by the number of pixels in a specific area, usually 1 square inch. The unit of measure is therefore known as pixels per inch or ppi but we prefer to use dots per inch or dpi.

Bitmap pixel size

Bigger pixels, lower density on the left and smaller pixels, higher density on the right

The amount of image detail depends on its pixel dimensions. The smaller the pixel, the more pixels you can pack into an area. So, higher resolution images have more pixels which display more detail. It’s a better quality image.

For example, take a one inch square image at 72 dpi resolution = 5184 pixels (72 x 72) and the same size image at 300 dpi = 90,000 pixels. So although the images are the same size, you can pack a lot more detail in the 300 dpi image.

The size of the image on the screen

Device screens consist of pixels and display image pixels on a one-to-one basis.

This is why the same size image appears smaller on bigger screens which have more pixels (they have more pixels across the width and height of the screen).

Screen density

Some devices pack more pixels into their screens and are said to have a higher screen density. Two screens of the same physical size may have different screen densities.

Android image pixels

The same image will look different on these screens – it will be smaller on the higher density screen.

Calculate resolution

You can calculate the resolution of a device’s screen by dividing the display size in pixels by the physical size of the screen in inches. Use the diagonal length of the screen:

Screen resolution

For a more accurate calculation use:

Diagonal resolution = √screen width2 + screen height2

Screen density in ppi = diagonal resolution/diagonal size in inches

Resizing your image resources

Increasing image size

Scaling images

Original 40 x 40 pixel image on the left upscaled to 200 x 200 pixels

If you increase the size of a Bitmap image it will lose quality because there is not enough image data for the number of pixels on the screen. The device fills in the blank spaces by copying data from adjacent pixels, resulting in the jagged effect we see, known as pixilation.

Making images smaller

Making images smaller can also affect the quality of the image. In scaling down, groups of pixels need to be mapped to a single pixel. Ultimately some quality is lost but may not be as noticeable as when enlarging an image.

File sizes

The size of an image file is determined by the image's dimension (width x height) and resolution (how many pixels per square inch or dpi). The more pixels an image contains, the larger the file size.

File formats

We use a number of file formats to save Bitmap images so we usually don’t call them bitmaps but rather by their file format names such as, jpeg, gif, png, etc.

Jpeg

Jpeg images are popular because they offer a comparatively high quality image with a small file size. It is a lossy format as image quality is lost when the file is compressed to reduce file size.

Jpeg’s are an acceptable format for android image resources.

Gif

Gif images are best used for Icons and graphics containing a limited range of flat colours. They are not suitable for photos. The Gif format is lossless.

Try not to use Gif images in your Android app.

Png

Png is the preferred format for Android images as it offers improved lossless compression.

This is the 1st part of a two part series of articles on designing Android apps for multiple screens. Here's a link to part 2: Different images for different devices: it's all about supply and demand.

Need free images with no restrictions for your app? Check out our FREE app, Free Clip Art that lets you download clip art images from openclipart.org.