Advertisement


Expression Design: Why is my image blurry?


Question

I'm trying to create a web icon using expression design.

Its 45x45 pixels in size, and I've set the PPI to 96, exporting to .PNG with Antialias & Transparency.

It doesn't look crisp when I look at it in my page, and it looks pretty blurry when viewing it on my mobile.

I've turned on pixel preview, and when I zoom in I can see that on straight lines there is a row of pixels shaded between the two (rather than pixels being either on or off) which seems to be the cause of the problem

I have enabled the following options:

  • Snap to Pixels
  • Snap to Points
  • Snap to Guides

Here is the exported icon:

enter image description here

It's pretty simple, but if you look at the edges of the pound symbol, they are fuzzy; more so on a mobile device.

Is there anything else I should be doing in order to get a crisp looking icon?

2013/07/15
1
2
7/15/2013 9:57:00 AM

Accepted Answer

Is your page rendering it at exactly 45x45? If not, the browser is recalculating the pixels and this will cause the blurryness.

I've never used Expression myself, but generally when downsizing images, on all programs there will be blurriness as the program has to recalculate the pixels. If you have to resize an image, a tip is to always do it by half, if not quarter. This makes the recalculation easier for the program and gives crisper results.

Also, the PPI is not important for screen, as it will always render the exact number of pixels, per the image dimensions, regardless the pixel per inch (PPI) density you set it to.

2013/07/15
1
7/15/2013 6:25:00 PM