0
$\begingroup$

We have a circle image with dimensions 60 by 60 px. We want to display this image in a smaller size (15 by 15) on a website using HTML / CSS. When we do so, the image looks blurry (ignore the cropped edges, I believe that is another issue.

Could you please explain to me in very noob terms:

  • Why this is happening
  • How I can solve it

Much appreciated. Not sure what tags to use so kindly feel free to edit.

Edit: My understanding is that what I'm asking for may simply be impossible? An image this small simply doesn't have enough pixels available to draw a smooth edge for the circle? What kind of workaround could I envision?

For instance drawing a tiny circle in Canvas JS leads to the same issue.

Screenshot of circle image scaled down to 15 by 15 circle image 60x60

$\endgroup$
1
  • 1
    $\begingroup$ When rendering to a browser, these use the same physical amount screen space whether they are shown on a 4k or 2k monitor. So on my 4k monitor the 15px image is really closer to 100px after being rescaled. Also, while pixels are square, the physical screens are not. To maintain the aspect ratio an image will have to be scaled more in one direction then the other. This usually shows up as horizontal artifacts. I have a setup that has a 4k next to a 2k monitor, on the 4k monitor the rescaling cause the image to be blurry rather then looking aliased, but on the 2k monitor it looks aliased. $\endgroup$
    – pmw1234
    Commented Nov 10, 2021 at 14:52

1 Answer 1

1
$\begingroup$

My understanding is that what I'm asking for may simply be impossible? An image this small simply doesn't have enough pixels available to draw a smooth edge for the circle?

This is more or less correct. Basically, no circle (or curved surface) is really smooth when rendered to the screen (or to any other raster-based representation). With larger circles, the effect just isn't as obvious.

Since your image is composed of colored squares (the pixels) there is no way you can represent anything without data loss that isn't a rectangle with its edges aligned to the screens-coordinate axis. So the question is how to build anything else within those constraints.

What you can do is to calculate if the center of the pixel lies inside or outside of the geometrical shape you want to render. If it is inside, give it the correct color, if not, leave it untouched. However, this is a binary process and leaves you with visible "jumps". A diagonal line would look like stairs. To get rid of this effect, you can take any pixel that is only partially inside your shape and calculate the ratio between the area that is inside and outside of the shape. You then use this ratio to mix the color of the shape with the background color and assign this as the new pixel color.

For large circles, this will give you the illusion of an almost perfectly smooth surface since the count of those interpolated pixels is relatively low when compared to the rest of the circles' pixels. But the smaller it gets, the more of those color-mixed pixels you will have in relation to the pixels that have the full color. The extreme case would be that the circle is inside of a single pixel and the less area of the said pixel it covers, the more it will "fade out".

When downscaling you are facing the same problems. You compute the average value of multiple pixels and assign it to a single one. If there is one pixel that isn't fully inside of the shape, the color will get blurred.

So in conclusion, there is not much you can do about the "blurriness". The alternative would be to disable the interpolation but this would give you a staircase pattern, which is also not really what you want.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.