1

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: http://scarletstringstudios.com/

The logo source was a 512x512 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.

  • Raster art is on a grid and one consequence of that is that resizing by powers of 2 can result in a crisper result. In your particular case, the closest you'd get would be 512/2/2/2 = 64px square. Then crop. – Yorik Nov 24 '15 at 19:10
3

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

0
  1. Your icon is problematic. It features too fine details that don't scale well to the intended size. Increase the font-weight on 'studios'.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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