Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image sizes and mobile devices and the dpi

Tags:

android

ios

image

This is a question regarding images and their sizes for mobile devices.

So assume I want an image for the full mobile screen. I am assuming that the screen is 320*480 here, which seems consistent.

When I make the image in Photoshop or MS Paint or whatever, I can choose the pixels/inch (ok, maybe not in paint, but you get my drift). The default is 72 pixels/inch, is this to be maintained at all times?

Some devices have a higher dpi - I think the "default" is 160 dpi - so for a device which is, say, 240dpi, to show my same image do I:

  1. Scale the image up from 320*480 to 480 * 640 (ie size = oldSize*240/160) Or
  2. Go to my image and change the pixel/inch to 72 * 240/160?

Given that Android has sizes like so:

xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

(From this http://developer.android.com/guide/practices/screens_support.html)

I take it that by scaling my images up/down and shuffling them to the right location I can get cross-device compatability.

Next, instead of increasing image sizes, is it better to just make a really big image and shrink it as needed?

For iPads and iPhones, it is the exact same question, just different numbers! The phones are 320x480 and Retina is 640x960, the iPad is 1024x768 and Retina is, again, four times as large.

So do the images scale up or the pixels/inch in Photoshop scale up?

I guess in the end I am asking:
What is the recommended pixels/inch in Photoshop for an image?
Does this number change, or the image size change?
Assuming images for an Android, should the image size in the h,m,l folders be the minimum of the value in the Android specs, or just under the maximum?

like image 682
bharal Avatar asked Oct 18 '12 12:10

bharal


2 Answers

The bitmap requirement is similar to preparing graphics for print vs. the Web. If you have any experience with print production, you’ll know that a 72 PPI image will look very pixelated and blurry when scaled up and printed. Instead, you would need to redo the image as a vector image or use a high-resolution photo and then set the file’s resolution at around 300 PPI in order to print it without any loss of image quality. Screen density for Android works similar, except that we’re not changing the file’s resolution, only the image’s size (i.e. standard 72 PPI is fine).

Don't increase any resolution in photoshop or gimp for changing your image keep 72ppi only.

just scale the image from baseline i.e mdpi=1.

75 × 75 for low-density screens (i.e. ×0.75); 
100 × 100 for medium-density screens (our baseline);
133 x 133 fpr TVDPI (1.33)(no need to supply graphics android will auto scale from hdpi) 213/160=1.33125
150 × 150 for high-density screens (×1.5);
200 × 200 for extra high-density screens (×2.0). 
like image 138
Padma Kumar Avatar answered Oct 16 '22 02:10

Padma Kumar


I also found this interesting discussion on the whole "ppi" question:

The Myth of dpi, which posits that the "ppi" is an inherently bad question, because a 300 px * 100 px image at 72 dpi has the same pixels as a 300 px * 100 px at 144dpi.

So when designing for the web, setting the pixel size appropriately is all that is important - dpi can be 144 or 1 or one billion, it won't affect how the computer displays the image.

like image 22
bharal Avatar answered Oct 16 '22 03:10

bharal