Circled icon has straight edges on website

Question

I am using few circled icon on my website and it is looking very fine but when looking at it very closely, I can see straight edges on all four directions. I zoom in and I can see it clearly. I tried using image rendering with all the option but unable to fix it. On photoshop it looks like a complete circle but on the website, it is not showing properly.

background-image: url("../images/location.png") no-repeat;
background-size: 300px auto;
background-position: -10px -10px;
height: 25px;
left: 2px;
top: 10px;
width: 25px;
image-rendering: auto;

I tried all other option for image rendering but no luck. here are my images:

if you see it closely, you can actually see the straight line. here are the staright line when zoom in

just increase width, height, and the 2 values in background-position — vals, Feb 28 '18 at 20:18
Just make an icon with more pixel/inch ratio and bigger (then you can resize it down without loosing quality, or do it in svg :V — JoelBonetR, Mar 01 '18 at 12:17

score 0 · Answer 1 · answered Mar 01 '18 at 12:26

This is a working example using a 1600x1600px icon with 72ppi:

https://jsfiddle.net/v319jLde/14/

//depending means the max value in px you need to show the icon.

you don't need to use so high size, but set a [depending]px one with 150ppi and you'll get a nice view using it at 50px resizeable to [depending]px you need.

if you scale up an icon it will loose quality for sure as expected instead of you make it in svg format.

You can use font awesome icons or glyphicons and resize it with a nice behaviour, look at the bottom of this portfolio:

http://joelbonetr.com/

Circled icon has straight edges on website

1 Answers1