0

The Galaxy S5 has a display resolution of 1920 x 1080, an iphone is 1334 x 750, and many others are similar. Do these resolutions work the same way that Apple's retina screens work, where images will look blurry unless they have an @2x size version?

Basically, if I am creating a mobile landing page for an add, and I use an image that is 300px wide in the browser, will that image look sharp like it does in the browser or do I need to do something else to make sure it looks good on mobile devices?

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
asharpdesigner
  • 143
  • 4
  • 12

2 Answers2

1

If you're talking about photos or photo-like images, Android resizes those fairly well and does a fair job of avoiding unpleasant image artifacts because it uses very accurate rescaling methods.

Anything you expect to be "pixel-perfect" like a 2px-wide line in the image is simply always to be somewhat blurry in a resized result. For those types of images, you'd want to generate different resolution versions of the images in the drawables-* (or mipmap-*) folders and keep in mind the relationship between screen density and pixels.

  • MDPI is 1:1
  • HDPI is 1.5:1
  • XHDPI is 2:1
  • XXHDPI is 3:1
  • XXXHDPI is 4:1 (and something you're unlikely to find right now)

...so if you wanted a 1px border in an image that's to be displayed on an XXHDPI screen, in the drawable file that line would need to be 3px wide. The good news is that since these downscale and upscale quite accurately, under most circumstances, an image from drawables-xxhdpi will retain a perfectly clean edge when downsized to all the others (except HDPI, because 1.5) and an image from drawables-mdpi will upscale decently as well. Android will do the best it can at picking an appropriate image to upscale/downscale from the drawables/mipmaps folders when some are missing (i.e., you might not need to populate all of them).

Dagmar d'Surreal
  • 111
  • 5
  • When I look up the media query to use for a galaxy s5, i found this "@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)". I'm currently just using "@media (max-width: 360px)" and when viewing on my galaxy I see everything working as I would want it to. Is there anything that this method is missing? – asharpdesigner Apr 08 '15 at 19:59
0

Android's support for higher resolution screens is based on screen density.

A set of six generalized densities: - ldpi (low) ~120dpi - mdpi (medium) ~160dpi - hdpi (high) ~240dpi - xhdpi (extra-high) ~320dpi - xxhdpi (extra-extra-high) ~480dpi - xxxhdpi (extra-extra-extra-high) ~640dpi

http://developer.android.com/guide/practices/screens_support.html

You need to create additional drawable folders and place your higher resolution images there. drawables-hdpi, drawables-xhdpi, drawables-xxhdpi, etc...

There are some tools that will help you resize images to the various densities too. Like this one: https://github.com/redwarp/9-Patch-Resizer

ajma
  • 12,106
  • 12
  • 71
  • 90