It’s all about Pixels
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.
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.
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).
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.
The same image will look different on these screens – it will be smaller on the higher density screen.
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:
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
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.
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.
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 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 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 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.