Participant

Question

Illustrator Exporting Blurry PNG HELP!

Forum|Forum|7 years ago
October 5, 2018
9 replies
161803 views

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

A

agcrmfs

Participant

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.

Z

zuzannal18888254

Participating Frequently

I have been having a similar problem... But ok, so lets say I have an image for web. It should ideally be smaller than 300kb for the sake of fast loading. It will be displayed in 650x450 px. I have the image in Illustrator. As soon as I switch to Pixel preview it starts looking pretty bad and pixelated. And as I export it in all sorts of different settings, it keeps looking like that. What export settings would you recommend to make it sharp? I would love to follow your recommendation step by step and then see if the problem is still there.
The way I would sometimes get around it was to export the image to 1300x900 even if it was supposed to be twice smaller. So basically making the image larger than how I needed it. But I'd love to know that I can export a png in the right size and still have it SHARP

Jacob Bugge

Community Expert

Zuzaloch,

This may sound unforgivably outdated and boring, sorry, trying to cover all the possibly important aspects in one go.

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, it is important to have the images in the exact desired final pixel x pixel size, forget about resolution which may actually lead to wrong sizes and hence blurriness. It is easiest and safest to work at the desired size.

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork.

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for, or at sizes that are powers of 2 times as large (2, 4, 8, and so on).

For clean and crisp artwork avoid JPEG.

It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers). Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.

Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect Settings.

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

Z

zuzannal18888254

Participating Frequently

Thank you for your extensive reply! I really appreciate it 🙂 However unfortunately it doesn't resolve my problem.

I have an image that will land on a website in 265x182px (I checked that by Inspect element and also the image doesn't readjust its size when the browser window is bigger).

I made sure that in AI the Artboard has that same amount of pixels, exported it as PNG-24, Interlaced, with Transparency, Image size 100% and Type Optimised. Attached you can see how bad it looks.

L

loriensauret

Participant

Hey everyone!
I had this problem for a while but it got fixed when I saved the .ai file as a SVG and then opened it with photoshop. When I did this and then exported the file as a PNG the blurryness was gone.
I hope this helps you.
Lorien S.

Monika Gause

Community Expert

You could open the AI file directly in Photoshop (if "PDF compatible" is turned on when saving)

MikeL2407

Participating Frequently

I found something that might help if this is still an issue.

Select your group or image you are trying to export and use "Export Selection" or "Export for Screens"
Go to the Advanced Settings for Advanced File Types (the gear in the Formats section next to IOS and Android.)
Check each File format you are using and see if the Anti-aliasing is set to none. Change as necessary.

Not sure how mine got changed to none since I never even knew this existed but I'm glad I found it. I hope this helps!

fellow1

Inspiring

I have the same problem, JPEG exports are always blurry.

Monika Gause

Community Expert

"I have the same problem, JPEG exports are always blurry."

There are 54 answers in this thread. Did you read them all and does any of them help?

will.lanni

Participant

Check to see if you're on a retina display where it shows fuzzy, and if others who see it clearly are on a regular display. The retina display is looking for images to be exported at twice the width/height of the original, and compresses them down to show crisper. So images at "normal size" will show up blurry.

M

Mahmood Zidan

Inspiring

So basically I shouldn't worry about the result if I a 72ppi file right? I started seeing this problem on my new macbook pro, and a client mentioned it as well (Doesn't have a macbook pro, but I assume he got a higher resolution display than 72ppi).

Monika Gause

Community Expert

This thread covers a gazillion different problems.

Please create a new thread.

Please tell us your workflow and show the blurred images.

Please do tell us also exactly when you see the blur and on which kind of device and application.

A

Anonymous

I'm having the exact same problem. I've read through all of the repsonses and none of those solutions helped. This is unacceptable, right? Why in some versions of Photoshop and Illusrator they've solved this problem, and then suddenly it pops up again every few years. I'm so frustrated!

R

rox19

Participating Frequently

Same problem fo me !!!!!!!! Very very annoying

Ton Frederiks

Community Expert

Can you show the problem?

Ton Frederiks

Community Expert

Did you try View > Pixel Preview in Illustrator?

That should give you a good idea of the export.

H

hangtime2

Participant

I'm having this problem and tried Pixel Preview... which came out pretty bad so I'm assuming this is why my exports are still blurry. What's the right fix to correct this?

Jacob Bugge

Community Expert

hangtime,

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for (or second best at sizes that are powers of 2 times as large).

Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect Settings.

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

The high resolution mentioned at the top here is only muddling the image.

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

angie_taylor

Legend

Please embed some images into your meesage to show us what the PNG and the original AI files look like please. Also, give us more info about the settings you are using and what you want to use the PNG for.

R

robins65410937

Participating Frequently

Angie - any guidance would be useful. The company we're submitting the artwork to will only take a PNG. This was created in Illustrator. The PNG can only be 160 x 48 px.