Overview
The size of an image will sometimes affect how other parameters are applied. In the case of Pixellate, Gaussian Blur or Halftone, the size of an image will influence the visual effect of these three parameters.
Take these two images for example:
- https://assets.imgix.net/examples/espresso.jpg?h=300&w=300&fit=crop&blur=90
- https://assets.imgix.net/examples/espresso.jpg?blur=90&fit=crop&w=900&h=900
Even if they have the same blur value, blur parameter affects both of these images differently,
In order to achieve the identical blur effect between both images, the value of the blur parameter must be scaled appropriately.
How to Scale
You can approach this with a bit of math. We can start with the two images here where we want to scale blur=50 for the second image:
- https://assets.imgix.net/examples/espresso.jpg?h=1100&w=500&fit=crop&blur=50
- https://assets.imgix.net/examples/espresso.jpg?fit=crop&w=1800&h=500
- The first step would to get the total dimension for each image.
Image #1: 1,100 h * 500 w = 550,000
Image #2: 500 h * 1,800 w = 900,000 - Next, we can divide the total dimension of image 2 by image 1 to get the ratio of the size difference.
900,000 / 550,000 = ~1.64
- Finally, we can multiply our original blur value by the ratio we received in step 2.
50 * 1.64 = 82
After you receive your scaled up blur value, you can apply it to your second image and can see that the amount of blur between both images is the same.
- https://assets.imgix.net/examples/espresso.jpg?h=1100&w=500&fit=crop&blur=50
- https://assets.imgix.net/examples/espresso.jpg?fit=crop&w=1800&h=500&blur=82
This method can be also be applied to Pixellate and Halftone.