# Relation between ppi and screen(icon) size? [closed]

We know that , generally greater the ppi, the greater the spatial resolution of an image and hence quality

But why do the size of icons keeps on decreasing as we change display settings of our monitor/display device to upward trend

Such as for example going from 720p to 1080p as was seen on windows xp computer in earlier years of first decade of this century

• I've not seen any icon size decrease. Also, is this a UI design or a signal processing question? Also, "greater ppi = greater quality" is a simplification that's not generally true. Apr 30 '20 at 20:41
• If I remember correctly, @engr had multiple very similar questions (engr and you often have similar questions!) where they confused resolution, representation size, pixel density and tried to draw equivalences where there weren't any. To save you from that mistake: make sure you really know what "physical size" means to you, what "dimension in pixels" means to you, and what "pixel density" means to you. These all are different things and you mustn't inherently link them. Apr 30 '20 at 20:44
• your edit changes nothing: you still claim icons have gotten smaller, and a) I don't think that's true and b) not related to signal processing Apr 30 '20 at 22:12

I would suggest that this question is related to spatial resolution and therefore a very basic Image Processing question. The way it is stated however, does make it sound off-topic for the DSP board.

The reason for the "shrinkage" is because the physical space gets redistributed to contain MORE pixels. Therefore, the finite number of pixels of an image now describes LESS physical space.

But, there is a little bit more to this.

The key quantity here is Pixel Density (spatial resolution) and it is used to relate physical size with image size.

If an image is 300x300 pixels and we set its spatial resolution at 300 pixels per unit of distance, then we automatically set its physical size. If that unit of distance is 1 Inch, then each pixel will result to a dot that is $$\frac{1}{300} \times \frac{1}{300}$$ of an inch in physical size.

In a way, the pixel size of an image says nothing. But its target size along with its resolution says everything about it.

Programs such as Inkscape understand the physical size of an image. In fact, if you have to produce a simple poster you never work in terms of pixels, because that gives you no handle as to the physical size of an image versus the available surface.

It is easier to grasp the size of a common 3 Inch by 2 Inch photograph if it was to be put against an A0 size sheet of paper.

And, it is also easier to now determine the sort of resolution you need for that picture to be clearly depicted, versus its content. Therefore, from that, you can work out the lowest resolution of the image by which you can still print it and it will not have visible artifacts.

Another way to experience the difference here is through GIMP, which offers directly a choice to change the print size of an image. If you save two images at different print sizes, you will notice that the file size does not really change. This is because that option changes the stated resolution of the image and therefore how to "re-distribute" its finite number of pixels over space. Taken to extreme values, you could direct a printer to print a 2x2 checker board over an A0 piece of paper. (Or a square portion of it).

So, everything that is digitised has a correspondence with the physical world it originally belonged in. Spatial resolution determines how many samples of the original image were obtained (prefferably in a regular canvas), just like Sampling Frequency does for 1 dimensional signals (such as audio).

If a User Interface does not anticipate that it will be called to depict its content in different size monitors (and / or orientations & resolutions), you get the problems you mention in your question.

An alternative is to use the Scalable Vector Graphics (SVG) format. SVG retains a description of its content in terms of primitives (e.g. Draw a line from 0,0 to 10,10, put a circle of radius 3 at 12,12 and so on). These are coordinates in a physical space. When the time comes to depict the image, you can specify the spatial resolution and rasterize the SVG, to produce an image that can be depicted in a common monitor (since vector monitors are not seen as a good idea any more).

Hope this helps.