Illustrator is exporting blurry PNGs

[SommerPG]

Every PNG I export from Illustrator is blurry regardless of the export settings I choose or the method I use to export. I've read all the other posts associated with this issue and tried all of the suggestions and nothing seems to work. I created the design in Illustrator to the exact dimensions needed (500px x 200px) and I've even tried changing the units in AI's Preferences with no results. The application is to provide my companies branding to be displayed on a thrid party vendor application. They only accept PNG, GIF, or JPG formats. I've attached a video showing what I'm dealing with and the settings/parameters I'm using. When I export to PDF, the quality is perfect. Even though PDF is a vector and PNG is a raster the same quality should be achievable because it has been in the past. FYI...All my software and OS are up to date.

[Anubhav M]

Hello @SommerPG,

I am sorry to hear about your experience. Would you mind sharing some more details, like the exact version of the OS/Illustrator, a public link to a sample AI and PNG file after uploading it to Dropbox/Google Drive/etc., and screenshots of the settings used so we can better assist you?

Looking forward to hearing from you.

Thanks,

Anubhav

[SommerPG]

I've attatched the actual ai file. i have exported with many different settings and it doesn't seem to affect the export quality of the PNG. i just keep getting the same blurry results so i don't think it has anything to do with the export settings. What I do notice is that in pixel preview I can see that the design is pixelated. You can also refernce the video on my original post to see my exporting process.

[Ton Frederiks]

Unfortunately you cannot attach .ai files in this forum.

But you can attach .ai files witn the extension renamed to .pdf or when saved as PDF with Illustrator editing enabled.

[SommerPG]

Reattached. I renamed from .ai to .pdf

[Ton Frederiks]

Thanks, I exported the file as 2x Art optimized PNG and the result looked fine to me at 100%.

I copied the file and pasted into photoshop at 144 ppi and the result was similar.

An export at 1x (72 ppi) will have half the resolution that Illustrator shows on screen and will look pixelated.

[Anubhav M]

Hello @SommerPG,

I tried replicating this behavior and had the same results as Ton. When exporting to a raster format such as JPEG/PNG, the image is composed of pixels and is bound to get blurry when zooming in. You can try increasing the resolution to counter this, but it would not help much, especially as the file size would be more important when using this on a website.

Feel free to reach out if you have more questions or need assistance. We'd be happy to help.

Thanks,
Anubhav

[SommerPG]

Can you send me of screen shot of your results?

[Anubhav M]

Hello @SommerPG,

Here is the screenshot:

Feel free to reach out if you have more questions or need assistance. We'd be happy to help.

Thanks,
Anubhav

[Ton Frederiks]

Here are my results (1x and 2x) in Photoshop at 100%

[Ton Frederiks]

If you zoom in on a png you will always see pixels. If you zoom in in Illustrator, Illustrator calculates the most perfect representation for that zoomfactor. Check if they accept SVG, most modern browsers support it and you can keep it scalable and vector.

[SommerPG]

While SVGs are supported by most browsers, many platforms don't allow them because they pose a security risk.

[Jacob Bugge]

SommerPG,

There are two things I should do in a way different to yours: firsly to use Type Optimized, secondly to use a resolution of 288 rather than 300, or a suitable resolution for a device of choice,

[SommerPG]

Exported with those settings and it's still the same. It doesn't appear to have anything to do with the export setting because when I have the illustrator file open and I select pixel preview, i can see how pixelated the design is. I've attached screen shots for reference showing the export using your suggested settings, one without pixel preview on, and one with pixel preview on.

[Monika Gause]

You need to set the preferences > General. Turn off "Print preview at 100%"

Then you need to view the pixel preview at 100%

Your screenshot does not show the 100% view.

[SommerPG]

How about now?

[Brad @ Roaring Mouse]

If you require a defined pixel dimension like 500 x 200 as requested by the website, and your Illustrator document is set to those dimensions, you MUST export your artboard PNG as 72ppi to get an image that's exactly 500 x 200. You can confirm this by opening the resulting image in Photoshop (or even in the file info in Finder/explorer)

500 x 200 is very small in reality in that it doesn't give you much to work with, so anti-aliasing will be very prominent. Your results are exactly what is possible within that limitation. In fact, if you do a test export without anti-aliasing OFF, you will see how chunky the pixels are at those dimensions, hence why anti-aliasing is necessary.

[SommerPG]

I see what you're saying about the dimensions being exact but even exporting at 72 PPI with anti aliasing on the end result is still blurry (see attatched screen shot.) I've even doubles the px dimensions so the image would be scaled down and it's the same.  

[Bobby Henderson]

In addition to other suggestions mentioned, in order to create PNG images from exported Illustrator artwork with sharp rather than blurry edges the artwork often needs to be tailored to line up with the target pixel grid as much as possible. Text baselines should line up with the grid; it's even better if the cap letter heights also line up with it. Any object edges that don't align with the pixel grid will be aliased or blurry.

[SommerPG]

I will have to look into how to do this and get back to you. Thanks for your input.

[dana_6480]

I have the same issue.  It is not a 'zooming in issue'. When the are exported, they are fuzzy at the same scale that I drew them.  

[Monika Gause]

---

@dana_6480  schrieb:

I have the same issue.  It is not a 'zooming in issue'. When the are exported, they are fuzzy at the same scale that I drew them.  

---

Please share screenshots or the PNGs themselves.

[Stephanie325551925gso]

Hi, I'm having the exact same problem. Did you end up figuring it out?

[Ton Frederiks]

Try exporting at 2X (144ppi) and scale the result 50% when using it for web purposes.