Image look crispy when in original size

Question

So, I have an image (logo) that should be 130x40px. When I export it as .png from .svg file with 300ppi, it looks really good in 100% size.. if I resize it on smaller dimensions (130x40), it looks crispy. Also, if I export it with smaller ppi, it looks crispy in original size (130x40) but when I zoom in, it looks good.

Any idea?

Answer 1

There are several things you can try:

1. Go to the transform panel, click the up/down arrow next to the tab label of "Transform" until you see three options: "Scale Rectangle Corners; Scale strokes & Effects; Align to Pixel Grid." Align to pixel grid is what you want. Check that box, then move your image slightly and it should snap to the right position. Try saving again and testing the results.
2. After aligning it, try increasing the contrast with the background. I know it sounds weird, but I had this problem a while back and that solved it. It was much more crisp when the background contrast was increased. Judging by how your logo is light gray, that might be your issue. Test this theory by making the logo rich black and replacing the "crispy" one. If it's still crispy move on to 3.
3. You can try saving it as a GIF format. I have found if you're dealing with simply graphics GIFs are very crisp and clean. Make sure you save it as a high quality GIF.
4. Check your PNG settings. I like to save as PNG-24, It feels higher quality than the other option. Also check the settings and make sure they're appropriate for your project.
5. Last ditch effort could be to 1 - make sure you're using "save for web" in the file menu and 2 - you might try saving it at 2x the size you need, (following the steps above) and seeing if that works.

I hope that works for you! Let me know if you have any questions about my answer.