: Expression Design: Why is my image blurry? 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 &

@Deb5748823

A good way to guarantee your icons look great on all devices and at least has worked well for me is using SVG and icon fonts. You can use icomoon to create your own icon font and import your own svg icons, and then call them in your css with @font -face, there are tons of tutorials on how to do this on the web and its relatively easy. Here are a few places to look:
www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/
Also smashing has a good article on why our icons or images might not look crisp on other devices because of its pixels: coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Vote Up Vote Down

@Smith574

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.

Vote Up Vote Down