• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
9

Illustrator Exporting Blurry PNG HELP!

New Here ,
Oct 04, 2018 Oct 04, 2018

Copy link to clipboard

Copied

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

Views

120.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Beginner ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

answered. The PNGs directly out of illustrator look the same good quality.

I'm sorry that you don't see difference between from my screenshots but is very evident! Expecially if you compare the green form. Don't you see that in the second png it is very muddy??

I made several attempts, as i explained in this topic. The only fact is that there are PNGs uploaded with the same features: why for one user is all perfect and not for the others?

Anyway it’s not just me having problems. The point is that someone managed to load in high quality correctly

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

"I answered. The PNGs directly out of illustrator look the same good quality."

I the export from Illustrator has the same good quality, than the problem is not an Illustrator problem and you have to look elsewhere in your workflow to find where the problem occurs.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

What if I told you that the workflow is the same?
You know well that on facebook the way is the same, you simply upload a post there are no other settings to adjust resolution or other settings. In illustrator, on the other hand, it is more likely that there is a conflict between the approaches.
Anyway, quoting my words in quotes is not a way to give a solution. You have done it several times i don't know why. Still consider this problem not solved

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

I am having the same issue.  How do you export illustraot artwork as a image jpeg or png?  I tried exporting and saving as, the imagie is fuzzy.  I am better of taking a screenshot or turning into pdf or soemthing.   Is this normal?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jul 11, 2020 Jul 11, 2020

Copy link to clipboard

Copied

Did you ever find the solution? I am having the same problem.

Adobe Support is unhelpful because they pretend the problem does not exist, or pretends the problem is your fault.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 04, 2020 May 04, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 02, 2020 Jun 02, 2020

Copy link to clipboard

Copied

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

  1. Select your group or image you are trying to export and use "Export Selection" or "Export for Screens"
  2. Go to the Advanced Settings for Advanced File Types (the gear in the Formats section next to IOS and Android.)
  3. 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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

"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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 20, 2020 Jun 20, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2020 Jun 20, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 26, 2021 Feb 26, 2021

Copy link to clipboard

Copied

This worked for me, thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 22, 2020 Jun 22, 2020

Copy link to clipboard

Copied

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 22, 2020 Jun 22, 2020

Copy link to clipboard

Copied

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

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.

 

export.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

So you want that text to be legible? That won't work. Not enough pixels.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

Not legible, but I just want the image not to be pixelated. e.g. look at the border between the black stripe and pink rectangle. Or any of the Lorem ipsum letters.

How does one achieve a level of sharpness that one of other users mentioned earlier in this thread by using this example https://www.facebook.com/comitatoconsulta/photos/a.114887900110078/128281865437348/?type=3&theater

 Screenshot 2020-06-23 at 12.07.58.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

You only have 265 pixels. So what do you think how this could be improved?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

Dear Monika. Here is a png in 656x450 px. Exported with the same settings as the ones mentioned above. What would be your advice?export-m2.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

It's a PNG. It's a raster image. You have to expect pixels in it.

But why do you export in 656 pixels when you need 265? I don't get what you are doing there.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

Dear Monika, I made the 656px example to respond to your reply and show you that I still have the issue when the image is bigger. What do you think about this image from the link? Would you advise me on how to achieve sharpness similar to that? 
https://www.facebook.com/comitatoconsulta/photos/a.114887900110078/128281865437348/?type=3&theater

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 23, 2020 Jun 23, 2020

Copy link to clipboard

Copied

656 pixels is still tiny.

But all that doesn't help you with your 265 pixels image.

 

You won't be able to have smooth lines in your small image.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 12, 2020 Jul 12, 2020

Copy link to clipboard

Copied

I got a notification that there has been another comment, however, I can’t see it here now.

In any case, let's approach it differently:
In a professional environment, let's say we are asked to generate a png for an email header, something that will be displayed in 700px width and should load well immediately. What pixel size, resolution and all the export settings would you apply in that case if we wanted to get a perfectly sharp image? I would very very much appreciate your instruction. The more specific, the better.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines