0

I have created a logo in illustrator. Artboard is 150x150, logo itself is 120x90.

I saved this logo as .ai, but I also want to use it on websites. I will include the image, and as you can see, it's a little bit blurry around the edges.

Logo:

enter image description here

I've tried multiple options: export for screens and changing the size (2x and 3x), save as and then png, save for web (legacy) and optimized for illustrations, ... but the borders are still blurry.

What's the ideal flow to save a .ai-file to a png-file without significant loss of quality?

Sam Leurs
  • 1,592
  • 1
  • 19
  • 48
  • 1
    This question would be much better suited for the [graphic design Stack Exchange](https://graphicdesign.stackexchange.com/). – Logarr Jun 15 '21 at 17:49

1 Answers1

1

Your image is fine. There is no way to make it better.

enter image description here

But if you're using Mac with retina monitor you can get blurry images in a browser. Browsers render web pages for non-retina monitors and they get upscaled on retina monitors. If there weren't special CSS tricks.

https://basilsalad.com/how-to/upgrade-website-images-retina-display/

CSS for high-resolution images on mobile and retina displays

Why do bitmap images look blurred on Retina display?

etc

If it's the case (Retina + browser) the only thing you can do is: to make the PNG with bigger size (about two times) and to tweak your CSS.

Yuri Khristich
  • 13,448
  • 2
  • 8
  • 23
  • Thank you for your post. I'm using a macbook pro with retina, indeed. I've fixed it by saving a bigger image. Thank you again. – Sam Leurs Jun 17 '21 at 20:13