How to calculate the radius of a Gaussian blur to get a similar rendering when upscaling?-CodePudding

I have two identical images except that the second one has a 6x dimension.

How to calculate the radius value to get the same Gaussian blur effect on both images?

I tried to multiply the blur radius by the ratio but it doesn't work.

The calculation doesn't seem to be that simple because it is not linear.

Image 1 - 100x44px

Image 2 - 600x264px

Here is an example with the application of a Gaussian blur in css on the two images:

<p style="margin-bottom:60px;">
  <img src="https://i.stack.imgur.com/p5CmP.png" style="filter:blur(6px);" />
</p>
<p>
  <img src="https://i.stack.imgur.com/Vw1sg.png" style="filter:blur(36px);" />
</p>

We see that the second one is much more blurred with the proportional radius (6x).

---------- EDIT ----------

I am not sure that it is only the perception of the human eye.

Look when the first image is at 15px and the second at 90px (6x for the blur radius). The second one still looks more blurred?

If I resize the second blurred image to the size of the first I'm pretty sure it would be blurrier in the end.

CodePudding user response：

@DavidEisenstat is correct. This is the result of human perception not being scale invariant.

The smaller image is very close to just being a downscaled sample of the larger one. However our eyes process the image differently because of the scale. If you leave the image of the big one up and walk back to 6x the distance you viewed the small one at, the details your eye can pick out of the small should show up for the large as well.

Why does this happen? It happens because Gaussian sampling is essentially a low-pass filter. It filters out fine details. Our eyes are used to filling in fine details that are on a scale similar to our likely vision defects. In the small picture the two scales are similar, so our brains fill back in the missing details. In the large picture the scales aren't similar, so our brains don't. But if you walk back far enough then the scale becomes right and your brain starts trying to fill in missing details.

CodePudding user response：

Try it 2 ways:

<p style="width: 600px; height: 262px; transform: scale(6,6) translate(250px,109px)">
  <img src="https://i.stack.imgur.com/p5CmP.png" style="filter:blur(6px);" />
</p>
<p>
  <img src="https://i.stack.imgur.com/Vw1sg.png" style="filter:blur(36px);" />
</p>