In other words image resol bigger than display resol... Image to appear in display re

Mobile
1

If serve a resolution 2x image in resolution 1.5x mobile device display or 1x display what should happen? In other words image resol is bigger than display resol… Image to appear in display resol or…?

2

also for 2x resolution image creation… how ppi must be in adobe FW or PS?

3

I am not entirely sure about your question so here are a few notes which may be of use.

I am under the impression that most computer, mobile, phablet and tablet screens have a maximum screen resolution of 72 ppi. Using a higher ppi will increase the file size (slower file loading) and will not display any better quality.

I am not sure about the latest Retina displays, no doubt some other poster will enlighten us ignorant folk :slight_smile:

As far as displaying larger image files on a small screen I opt for the following CSS


   
   <img src='very-big-image-1024x888.jpg' style='width:98%; max-width:1024px; border:0' alt='very big image scaled to suit all screen sizes' />

Special notes:

  1. for screens smaller than the maximum image width a correctly scaled down image will display.
  2. for screens larger than the maximum image width the complete image will be displayed without scaling.
  3. 1024px corresponds to the maximum image width, larger values will display proportionately but lose quality.
4

My preferred solution is to make the image quite large (say twice the width and height you need it to display), and then save it at quite a low image quality in Ps (say around 30%). That way, it ends up looking nice on both normal resolution and retina screens, and can still have quite a small file size. (More info here.)

I gather the only downside is that text within the image doesn’t look so great sometimes … but then, as a general rule I’d avoid placing text within an image anyway, as it’s not the ideal for accessibility and flexibility (updating the text etc.).

5

For including high-res graphics, but only for screens that can make use of them. “Retina” being “2x”:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Retina-specific stuff here */
}

QUESTIONS
If serve a resolution 2x bkgd image in resolution 1.5x mobile device display or in 1x display what should happen? In other words image resol is bigger than display resol… Image to appear in display resol or…?
Then in image edit software , also, for 2x resolution image creation… how ppi must be in adobe FW or PS?