3

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

enter image description here

Image 2 - 600x264px

enter image description here

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).

enter image description here

enter image description here

---------- 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.

enter image description here

Dady
  • 71
  • 8
  • What would be the optimal blur in your opinion? `25px` seems pretty good in my opinion? Just asking, I'm not saying you just always try and see whats looking good per hand. – Gandhi Dec 18 '22 at 20:06
  • Maybe try to post this also on [MathStackExchange](https://math.stackexchange.com/), because this is more like a mathematical question and they can calculate that for you there – Gandhi Dec 18 '22 at 20:13
  • @Gandhi I think OP is trying to figure out how to get a consistent blur based on different image sizes. In this case the image is 6 times larger. But increasing the blur by 6 times creates too much blur on the larger image. What would be the correct formula? – Emiel Zuurbier Dec 18 '22 at 20:13
  • 1
    It's a question of human perception, not math, unfortunately. – David Eisenstat Dec 18 '22 at 20:17
  • @DavidEisenstat but the [Gaussian blur](https://en.wikipedia.org/wiki/Gaussian_blur) got a formula and then you have to calculate it with the normal one and the one times 6 and get the variance I guess? – Gandhi Dec 18 '22 at 20:34
  • Re your edit, mathematically, given a continuous-domained image, rasterize(scale-down-6x(gauss(radius=90, scale-up-6x(image))) exactly equals rasterize(gauss(radius=15, image)). If you're getting more than a little discretization noise, something's busted. – David Eisenstat Dec 18 '22 at 22:40
  • 1
    "If I resize the second blurred image to the size of the first" - I suggest you try that – samgak Dec 19 '22 at 00:28

2 Answers2

2

@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.

btilly
  • 43,296
  • 3
  • 59
  • 88
1

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>
Matt Timmermans
  • 53,709
  • 3
  • 46
  • 87