How do I maintain visual crispness in a small (50×50) logo?

I’m not sure whether it’s due to antialiasing or something else, but the logo and Twitter icon on my site look blurry, especially on mobile:

The logo source was a 512×512 PSD which I resized and tried saving as both PNG and JPG. I also threw together an AI vector of the logo just to test, but the exported PNG still came out as you see it.

I have definitely seen smaller, crisper icons on websites before. Why is downscaling my image causing it to look bad?

I even tried using an SVG as the img src, and that sort of worked, but then my browser rendered the incorrect font for the logo.


Once you get down to that size, there are really only two choices:

(a) Get in there with your favourite pixel-pushing image editor, and individually tweak the pixels. This may (and probably will) mean distorting the image very slightly from the original, but having everything lined up on a pixel grid means that things will be crisp. Or;

(b) Create the icon as a font glyph, complete with hinting for sub-pixel rendering and so forth, and let the browser worry about pixel grid alignment. This is somewhat riskier, since the alignment may land on an RGB triad in a way that introduces unintended colour artifacts at the edges – but that’s more of a worry when you’re designing for multiple sizes.

Honestly, the pixel-pushing is easier if you’re working on a single element. You can usually work on a huge grid comfortably while watching a thumbnail in another panel. (Yes, there are scaling modes that can result in crisp images, but you don’t have control over the distortion that will necessarily occur as part of the process. Mathematically correct is not the same thing as visually pleasing.)

Source : Link , Question Author : eternal , Answer Author : Stan Rogers

Leave a Comment