How to save high quality images (JPEGs/ PNGs) from Illustrator?

[Srishti Bali]

Getting blurry or dull images after exporting from Illustrator? Use these simple tricks to save high quality images from Illustrator

• Choose colors wisely. If the files are to be displayed on web or other devices, set the Document Color Profile to RGB.
  It is always recommended to choose “Web safe colors”. These are used by all web browsers, regardless of the platform.
  
     

• Export settings for JPEGs and PNGs
                       
  

• Anti-aliasing: This option is used for smoothing of jagged edges in digital images by averaging the colors of the pixels at a boundary. This setting removes jagged edges in the artwork by super-sampling it. You can select one of these 2 options.
  
  • Art Optimized: Use this option, if you have downscaled the pictures in Illustrator.
  • Type Optimized: Use this option, if your artwork comprises mostly text. When the Type Optimized option is selected, anti-aliasing is applied to the text edges, making them a lot smoother.
    
• Resolution: An image with a higher PPI tends to be higher quality because it has a greater pixel density but exporting at 300 PPI is generally considered industry standard quality.

• For actual size choose 72 PPI: If you are exporting an image 1001x1001 Px at 72 PPI, result will be 1001x1001 Pixels, but if we export the similar image with 300 PPI, dimensions of end result will be 4167x4169 Pixels.
  

For JPEG format, we have these extra options:

                          

• Balance image quality with file size (JPEG only). The higher the Quality setting, the more detail is preserved in the optimized image, but the larger the file size. View the optimized image at several quality settings to determine the best balance between quality and file size.

• Compression Method (JPEG only):
  Baseline Standard is used when you want your JPG to be recognizable to most web browsers. It is basic and, well standard! It makes the least amount of changes to your image. All web browsers support it.
  Baseline Optimized optimizes the color quality of the image and produces a slightly smaller file size (2 to 8% - a little more compression, or slightly faster loading). All modern web browsers support it.

• Embed ICC profile (JPEG only) If your file needs to be viewed on other applications. Select this option. Saves ICC profiles in the JPEG file An ICC profile allows you to be sure that an application will correctly color match the file.

Please refer to this help article for more details and other file formats.

[bobmepp]

At this risk of being a Johnny come Lately to the discussion, why not save as .svg? You can do this right in IL, and it can be emailed and viewed in any web browser. The recipient will then see exactly what you have done in IL without the inherent fuzziness of a bitmap file. I've done this with very large and complicated .ai files. Not to mention the possiblity of saving the file to your Adobe account and sending a link to the recipient. I've also done this to make high resolution photoshop images available (usually saved as a .tif to be openable in Safari, or possibly in the Windows version of Preview if there is one - I don't know that because I'm many years away from using Windows).

[bobmepp]

I would add that then the nitty gritty of getting a vector image into suitable shape for the internet can be worked out with the client, or web developer, or whomever. It's never going to be perfectly easy to get a vector image into suitable shape for the web, regardless of the app being used, imho, especially in the age of multiple screen sizes.

[Monika Gause]

Now try to share your SVG on Instagram.

[bobmepp]

Valid point, but, for my part, I do almost no Instagram or Facebook, mainly because I feel they use all of us more than help us.

[Doug A Roberts]

Unfortunately I think Instagram accounts for about 70% of the reasons people ask this question.

[bobmepp]

I have to correct myself -- a .svg or .tif must first be downloaded & then a web browser can open it at full resolution, a more unwieldy process than I represented it to be. Sorry.

[dunnamin]

This is valuable, so thank you.

Please consider incorporating any suggestions, additions, or corrections in Replies with a shout out to those whose ideas/suggestions you use. Most of us won't read the replies and would like the info, the commentors are made famous by the mentions so won't mind.

[Ead5F99]

Hello! Sorry I am so late to the party but I am trying to understand how to get the best quality PNGs of my illustrator files. REgarding this point:

• Resolution: An image with a higher PPI tends to be higher quality because it has a greater pixel density but exporting at 300 PPI is generally considered industry standard quality.

• For actual size choose 72 PPI: If you are exporting an image 1001x1001 Px at 72 PPI, result will be 1001x1001 Pixels, but if we export the similar image with 300 PPI, dimensions of end result will be 4167x4169 Pixels.
  
  
  So what if the intended size of the image is 1000 x 1000 pixels, but you want really good quality, so you export at 300 PPI. You now have an image triple the size in pixels. In theory,  can it still be used? Say it was for a document or page that specified 1000 x 1000 pixels. When it is used, will the 300 PPI quality be maintained? Is another option resizing it back in Photoshop? What is the best way to do that?
  
  Thanks! 

[Monika Gause]

When placing something into a print layout, the artwork isn't measured in pixels, but in mm/cm/m (or inches in that one non-metric country).

The optimum resolution (pixel density) depends on the printing process. Can be much lower than 300 ppi (for large format printing) and can be much higher (for highres printing of calendars, museum catalogs or the like). So you always have to discuss the optimum with your printing service.

When you place an Illustrator file into a layout application, then you should question yourself why you convert it to pixels at all.

When producing artworks for the web, only the pixel dimensions matter. Your web developer should be able to tell you which dimensions produce best quality and also cost low bandwidth. This needs to be balanced and you might need to live with lower quality in order to enable folks to see your content at all.

When producing artworks for print on demand services such as redbubble or zazzle, they usually tell you the pixel dimensions of the artwork, because they know that a lot of their clients don't understand resolution anyway. They usually also tell you the resolution of the file, because they don't understand resolution either. But when you have the pixel dimesnions, then you don't need the resolution. It doesn't matter in order to get sufficient quality for printing.

With Illustrator, when you want to export a raster image with the same dimensions as the artboard, then you have to export at 72 ppi. That is how the software works.

[Ead5F99]

Thank you, Monika! This is excellent!

[JoniR]

Why does Adobe make you struggle so much to get a good image? Seems like this should be the default. I can do a poor image in Powerpoint with a lot less headache.

[Monika Gause]

I don't know which struggle you are referring to.

So maybe you tell us about your specific issue?

[blhallart]

where is my head-banging emoji when I need it??!!!!!!

[Test Screen Name]

Where is the "post specific examples rather than just saying me-too-and-nobody-ever-helps" emojis ? Since people won't post examples, just vague examples to "post many times" we can only assume they fear their examples will show it is their fault, rather than an actual Illustrator issue, and this would remove the chance of complaining. Or even post a link to one of these unsatisfied discussions (which in my experience typically stop once actual cases are asked for and actual explanations made).

Illustrator has many bugs. Of course. But if you want help it's not enough to say so.

[afolabi17320326sn1a]

Very helpful, thank you. Despite searching online and asking around, I still don't know how to determine (without printing tests) the minimal quality image setting (1-10) that would guarantee a very good quality print. 

I design minimalist and complicated artwork for wall decor with one, couple, or many colors. I use 300ppi and the artboard size as required for the printed outcome.  Then I do Export As in  JPEG (client wish), CMYK, 300ppi.

In order words, I'm looking for answers to questions like. Does the lowest quality setting result in a very good quality very good print of any of my JPEGS designs? If not, then when and how much to increase the quality image number setting in order to obtain just large enough files that give crispy, sharp, and color-true prints? I appreciate any tip, advice, or thought. Thank you.