Search code examples
htmliosimageresolutionpixel

Screen Resolution and Image Size, how to be correct


Not very keen on how resolution and image sizes work.

Say I have a screen with resolution 1920x1080 pixels. Does that mean any image that I have smaller than that will lose quality if I stretch it to fit that size?

In other words, if I have an image view in an app or a box on a website or something that's 500x500px, any image smaller than that will lose quality if I stretch it to fit that, but anything 500x500px and above won't lose any quality?

I just see a bunch of different resolutions, pixels per inch, etc, so I'm not sure what to make of all of it. Thank you.


Solution

  • That is an interestingly put question with slightly difficult answers. Since this has nothing to do with any specific OS I will answer in a general sense.

    Stretching an image (assuming you keep aspect ratio) does not reduce the quality of that image, but it will look visually inferior than an image with the native resolution of your stretched image. Stretching an image does not decrease the amount of data stored in the image, therefore there is no loss of quality. If you take a 1px by 1px image and stretch it to 1000 by 1000 it will have the exact same detail as it did at it's native resolution of 1 by 1. It may look crappy, but you did not lose any quality from the original.

    Decreasing the physical size of the image does lose quality, but does not look graphically worse like stretching does. When you scale an image down the display (graphics hardware) needs to cut out pixels and average them so that it can display that image on the screen. This doesn't effect the visual quality as much as stretching, but it does effect the absolute quality of the image.

    So with all of that said, I'm guessing you are worried about visual quality, not image quality. Pixels per inch has no bearing in this discussion, as that's just a definition of the screen size and resolution. Your image will appear identical on a 1ppi screen as a 1000ppi screen, it will just be 1000 times bigger physically.

    To get the best visual quality it is a bad idea to scale up since there is limited image quality to fill the extra space, so you lose visual quality immediately upon scaling up. Scaling down is better because you don't lose visual quality. A 50x50px image scaled down to 1x1px will look identical to a 1x1px native image, but the opposite is not true.

    When scaling down, with regards to iOS devices, you also get the benefit of the device graphical hardware giving you more pixels per image point size. If you take a 500px by 500px image and display it on a retina device in a 250point by 250point screen space rectangle you will display on screen the full 500px by 500px quality of the image. On a non-retina iDevice you will get a scaled down (by half) version of that image displayed on screen.

    So in answer to your question. The way to get the best visual quality of your graphics is to make the graphic the exact pixel dimension you want to display it. Then you are not scaling up and losing visual quality and you are not scaling down losing image quality. Sometimes this requires making multiple sets of a single image in different resolutions for different screen hardware. That is the cost of getting the best quality. You need to find the best performance/quality set for your needs.