How to calculate the radius of a Gaussian blur to get a similar rendering when upscaling?
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.sstatic.net/p5CmP.png" style="filter:blur(6px);" />
</p>
<p>
<img src="https://i.sstatic.net/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.
@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.
- Setting showPrintMargin to false not working in React Ace Editor
- Animate toggle height from 0 to auto or 100%
- Conditional Logpoint in Chrome Devtools
- How can I conditionally render a React component if a sessionStorage variable does not exist in Next.js?
- How to set root directory for resolving absolute paths in esbuild?
- Concatenate two JSON objects
- Photoshop Scripting (JS): Duplicate layer set and subs
- Debugging Electron renderer process with VSCode
- I don't understand this javascript function call and where it would be used
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- React Native const vs let vs var in Functional Components
- How to disable time from now with time picker antd
- Why does this function mutate innerHTML of a div element and extract its first child to parse HTML if you can just use jQuery to do the same?
- How can I pause setInterval() functions?
- How to remove spaces from a string using JavaScript?
- Add CSS3 transition expand/collapse
- Remove content of p tag
- How to detect CSS3 resize events
- How to extend an existing JavaScript array with another array, without creating a new array
- Attaching click event handlers in Astro pages
- var express = require('express'); var app = express(), What is express()?? is it a method or a constructor? Where does it come from
- How to set volume of audio object?
- Is it possible to add a new element to top of Map?
- How do I remove a property from a JavaScript object?
- Can't Add Ajax Pagination in ASP NET CORE
- No extra Boolean cast in JavaScript
- Why we have to add an 'async' declaration word to the javascript function which call a sync javascript function?
- Better way to filter an array of objects with one constant and one always changing value
- Generate A Weighted Random Number
- Code on scroll event is not executing if window is zoomed in/out in chrome