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...
3
-
It is often best to scale the vector artwork, then save/export rather than scaling during the save/export.– ScottJun 1, 2015 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.– DA01Jun 2, 2015 at 0:26
-
2This question may be useful– Zach SaucierSep 2, 2015 at 20:33
Add a comment
|
4 Answers
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.
-
-
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 ShJun 3, 2015 at 13:59
-
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!
