# Blurry vector graphics in web [duplicate]

I'm using illustrator and I have a graphic that is 22 pixels by 22 pixels. I export it as a png with 72 resolution, and it constantly comes up blurry. Is it just because it's too small? On my mac it looks at least a little bit cleaner than on my pc...

## marked as duplicate by Zach Saucier, Hanna, Scott adobe-illustrator StackExchange.ready(function() { if (StackExchange.options.isMobile) return; $('.dupe-hammer-message-hover:not(.hover-bound)').each(function() { var$hover = $(this).addClass('hover-bound'),$msg = $hover.siblings('.dupe-hammer-message');$hover.hover( function() { $hover.showInfoMessage('', { messageElement:$msg.clone().show(), transient: false, position: { my: 'bottom left', at: 'top center', offsetTop: -7 }, dismissable: false, relativeToBody: true }); }, function() { StackExchange.helpers.removeMessages(); } ); }); }); Sep 2 '15 at 23:50

• It is often best to scale the vector artwork, then save/export rather than scaling during the save/export. – Scott Jun 1 '15 at 17:48
• yes, it's likely because it's too small. At that size, you likely want to not bother with vectors and do pixel-level editing in a raster tool. – DA01 Jun 2 '15 at 0:26
• This question may be useful – Zach Saucier Sep 2 '15 at 20:33

Blurring problem you're describing is aliasing. Try exporting from Photoshop, you'll have more control in cleaning up your bitmap prior to export. Also, using limited color palette during export will eliminate gradations that create blurry edges.

• Actually, it's antialiasing that causes the blur. – DA01 Jun 2 '15 at 0:26
• I created the graphic the proper size and I thought that would solve the problem. I also created it in illustrator and exported it as png - I also aligned it to the pixel grid automatically...but it's still blurry! It's blue and white - so I kept it simple. I didn't try playing with the alias in photoshop - but I will try. It looks clear as a graphic on it's own, but somehow when I post it on my website, it looks horrible. – Ronit Sh Jun 3 '15 at 13:59
• what's the URL of your web image? – Max Tokman Jun 4 '15 at 14:22

Assuming you mean that "72 resolution" is DPI - Dots Per Inch, it's irrelevant when it comes to screen graphics (opposite to print graphics). Great article (and free ebook as well) on that topic here

Basically what that means is, that no matter how high DPI you set when exporting your graphics, it'll have no effect as you are working with digital units (pixels). Thus 22x22px graphic will look blurry. However, would you want it printed, that's where DPI comes necessary as it tells, in what ratio should pixels be converted to millimeters on physical - printed medium (eg. paper)

When you are saving the illustrator file as a png, what option is selected? Art Optimized or Text Optimized? I've found that these make a difference in how sharp the resulting image is.

If there is no text in your graphic, select "Art Optimized" and see if that helps.

.SVG is the format for using vector graphics in the web! Look into the cool stuff people are doing with "scaleable vector graphics" in the web realm! That should solve your issue.

Happy hunting!