Retina Blurry Icons without 2x image sizing hack

Question

Is there a way to fix the Retina Blurry icons on cellphones without using the 2x sizing images hack?

I'm a Front-End developer and the Designer is not avaibable to giving me the icons of the Website at the double of its size.

So, I was wondering if there is any way to keep the original icons size and make it looks correctly on cellphones with Retina display.

Oops D'oh · Answer 1 · 2017-07-07T23:33:00.327

0

Small pixel images are automatically enlarged by the browsers and the quality of the anti aliasing is depending on the rendering engine of the browser.

If you don't want to use the media queries @2 trick you could use svg icons instead as vector graphics are cristal sharp on every screen resolution and ppi.

Edit: As mentioned in the comment below you can disable antialias in browsers as described here: Disable antialising when scaling images

But that will not create eg a sharp round circle out of a 16 pixel graphic as the pixels will still be squared pixels (just enlarged)...

edited Jul 07 '17 at 23:33

answered Apr 13 '16 at 21:32

Oops D'oh

941
1
15
34

Oh, ok. Thank you so much for the response! – Diego Mendonca Apr 14 '16 at 18:46
One way to prevent blurry edges in images is to disable anti-aliasing: https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images#14068216 – Bart Jul 02 '17 at 06:30
1

@Bart: thanks, I didn't know that and just updated my answer to be more precise. – Oops D'oh Jul 07 '17 at 23:34

Retina Blurry Icons without 2x image sizing hack

1 Answers1