: How do I maintain visual crispness in a small (50x50) 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

@Smith574

Your icon is problematic. It features too fine details that don't scale well to the intended size. Increase the font-weight on 'studios'.
The main problem seems to be, that you have a hi-res display and standard-res pixel assets. That's why pixels looks blurry and SVG looks better. A custom icons font would work, too. Or serve pixels assets in double resolution.

Vote Up Vote Down

@Si6392903

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.)

Vote Up Vote Down