Illustrator Exporting Blurry PNG HELP!

[leahr51617887]

I am having issues exporting my Illustrator files into .png. No matter how high the resolution is set to, the exported image still turns out blurry. Adobe support was no help, they basically gave up because they had no idea what to do. They deleted all Adobe programs off of my computer and tried reinstalling and it did not help as well as some other troubleshooting steps. My exported pdfs look clear. I have also tried exporting other files to see if the one I am working on is messed up, yet they all still export blurry. My file is just a standard business card in the standard size.

Thanks in advance

[Jacob Bugge]

Zuzaloch,

I also saw the notification and found no new post.

Concerning the best possible appearance, the size sets a limit, and there is no better way than to create the PNG at exactly the size that it is to be used at, as mentioned earlier.

But, maybe it should have been mentioned that you have the Anti-Alias option to optimize appearance within the limits set by size.

https://helpx.adobe.com/illustrator/using/exporting-artwork.html#png_export_options

[natalief32955176]

I've been having this issue as well where I'm trying to save a vector and text logo to a small size (160x40) and also when I was trying to upload the logo to Instagram (110x110). I've tried multiple ways, even some mentioned here in this thread. The result is pathetic and blurry.

I've seen Monika's responses throughout the thread where she assumes we designers (who have been using Illustrator for 10+ years) do not know that when you save a vector to a png or jpeg, the image gets rasterized. Yes, the image does get "pixelated" as compared to the vector, however regardless of the size you export as, it still looks presentable and relatively clear. Every export I''ve had to png in small sizes looks absolutely abysmal and blurry. See examples below:

I looked at a company like everlane on instagram, and their logo is pretty small but their text is crisp, what did they do differently? I realized they double or triple the size of their logo, maintaining the same proportions. I did the same and that solved the issue of blurriness for Instagram.

Now working for the website, trying to export the logo at 160x40, I got the abysmal results as above. I doubled the size maintaining the proportions and uploaded it to the website and luckily the code/theme automatically resizes to the necessary size so the logo ended up crisp, screenshot below (screenshot quality sucks but it is better than ones pictured above):

I'm using Adobe CC v 22.0, which I am just now really diving into its depths, after a small hiatus on designing. I definitely did not have this issue in prior versions of AI. The whole point of using AI was that it is vector-based, which meant we could scale down or up and it should look good in the export either way. Now I'm just wasting my time figuring out how to make a small export look halfway acceptable. I shouldn't have to make the image 2x as big and then have to scale it in the HTML to get the size I actually need while retaining a clear image. 

This is 100% a software failing, not a user one.

[Monika Gause]

Inyour example images there are something like 6 pixels for each of your smal letters. How do you expect the software to make the letters legible when a single pixel can only have one color?

Have you ever drawn images by coloring the squares in squared paper? How many squares do you need to fill in to get a legible lower g (especially when the other letters need to be legible as well?

[zuzannal18888254]

THANK YOU! Exactly my thoughts. I just wonder why if you want a sharp image in certain size, you have to export it in different size? Like it just simply baffles me.

[zuzannal18888254]

And my comment was to what Natalie wrote

[natalief32955176]

I am very well aware that the software doesn't have many pixels to work with @Monika Gause but in prior versions of Illustrator, it had no issue figuring it out and still making the end result look acceptable.

And if your logic was true, that would mean that when the bigger image maintaining the same ratio is compressed by the website (whether it is instagram or a custom website) it too should become blurry! Because "there are less pixels to work with" when being compressed to 110 x 110 or 160 x 40. However, it appears crisp and very legible. Like what Illustrator used to be able to do on export.

There are quite a few people with the same issue and I don't think we should be just swept under the rug as incompetent. Nor should doubling the size of the output file be an acceptable answer - defeats the whole point of working in vectors. Might as well just stay in Photoshop.

In order for everlane to have a crisp profile pic for Instagram, they had to upload 320x320 file, when an actual instagram profile pic is 110x110. I had to do the same for Aurora Talent in order to get the crisp clean look.

But what if I need an image size that's small and will not be resized by a site or coding? Then I'm just screwed on my own left to export every which way that will lead to a result that's maybe less bad than others. It only annoys all of us because we know this didn't happen before.

[Monika Gause]

The doubled size works because of how Retina/HiDPI screens work. Your smartphone or tablet screen has double or triple the resolution, so using animage that is double or triple the size makes a lot of sense. Years ago this wasn't the case. So probably you were just used tothe bad image quality.

Social media experts recommend that you upload a 1000 x 1000 pixels image in order to get best quality. You might just want to research that if you don't believe me.

[Rogelaine5E23]

Thanks!

[Clémence5ED9]

Hi Monika,

Excuse me but I found your replies extremely disrespectful to all the professional designers who asked for your help as an "adobe community professional".

Guess what ? We paid for this software to do its job like people pay us to do ours. We know how to do our job and we are trained to do it, to create digital content. So when we tell you, something is wrong with the software, or that may be some settings have been implemented in the latest version of AI and that it messes up our exports, you listen, call your superior and report the issue. You are so disrespectful, it's inimaginable, we, as professionals can not talk like this to our customers, as you should not. 
Now, can you tell me why I was able to export just fine a logo without any problem just before updating AI, and now, 2 hours after the update with absolutely NO change to the file settings or else when I export exactly the same logo it's blurry ?

I have to export as a pdf and use adobe acrobat or use photoshop to get a proper export. What's your answer to this issue ? We're all having the same problem, that should raise your concerns. 

And please, don't be smart with me. Report to your manager and don't be condescending, give us an answer and apologise for your unprofessional behaviour. 

Thank you.

[Doug A Roberts]

Monika is not an Adobe employee. This thread is numerous people experiencing a range of different issues. If you want to discuss yours, it would be worth creating a new topic and going into some detail about your workflow, the result you got before and the result you get now, and including examples of both.

[natalief32955176]

The issue he stated is the same one we've all been having and posting about. Illustrator used to be able to export crisp vectors in one or jpeg format in small sizes. That was the whole point of a vector program. 

@Clémence5ED9 is right, Monika has been unfriendly and untoward, belittling our issue when for 10+ years I've been able to export images at small sizes with no pixelation. Janky work arounds that I and @agcrmfs come up with are not real solutions. As I've said before, this is a software failing. 

[Monika Gause]

I have been producing images for the web since 1996. And you can be sure that I have experienced all the issues with blurry images.

The workarounds I have used since then:

- pixel fonts that were optimized for web use (only possible in Photoshop)

- disabling anti-aliasing for the text, using the optimize for screen setting in the Character panel

- opening images after exporting in Photoshop and editing them pixel by pixel

- using the pixel preview in Illustrator

- making larger images

Perhaps those ring a bell for you.

Anyway, producing images for the web has been a workaround all the time.

I'm still producing images for social media. And I follow the Social media experts and their suggestions closely. And all them them recommend uploading large image sizes. Much larger than Facebook or Instagram themselves state in their specifications. And these experts can suggest that, because they try it out with every new update made by Instagram and Co. So uploading larger images is not a workaround, it's best practice. And if you still don't believe me, please do the research.

As for your small text in your screenshot from Oct 16, 2020: It cannot work. There are not enough pixels. And it couldn't work 10 years ago or 20 years ago either.

[Clémence5ED9]

Well, maybe you should consider that because you don't encounter this issue, it doesn't mean others aren't. That's what a proper Adobe Community Professional should do. 

And for information, I'm not talking about a small piece here, I'm talking about a very simple logo, to be used on the top corner of an A4 document like we did for the past 4 years. Basic stuff.

It worked before the update, it didn't after the update. And it concerns all my designs. So, unless all the people here raising this issue have messed up all their work for the past 10 years working on print and digital, I can tell you, something is wrong.

[Doug A Roberts]

Did you make a topic detailing your problem with image examples yet?

[Clémence5ED9]

No, because my problem is exactly the same as these other people. I'm not creating another topic for the SAME issue. If an answer exists, then post it here, where we can all read it. 

[Clémence5ED9]

I don't really care if she is. She's certified, she's here to help, give advice, be respectful and report issues and bugs to Adobe so they can be adressed properly, not to give her opinion on how designers should do their jobs and how bad she thinks they do because "she knows". This is unacceptable and I've reported her replies most of which are useless and not helping but judging and condescending. She's agressive and not supporting, and that's not the only thread I've read where she behaves as such. 

[agcrmfs]

I had this problem as well. What I did was create the design I wanted in illustrator then take a screenshot of it using the Snipper Tool on my desktop. Not the fanciest solution but it got the job done and the design is crystal clear like I want it.