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

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

Adobe Employee ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

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.
    featured post ai 1.png
     
     
     
     

 

  • Export settings for JPEGs and PNGs
                         featured post ai 2.png

 

  • 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.
      featured post ai 3.png
  • 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.
    featured post ai 4.png

 

For JPEG format, we have these extra options:

                          featured post ai 5.png

 

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

TOPICS
Import and export

Views

140.1K

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

correct answers 3 Correct answers

Community Expert , Aug 21, 2020 Aug 21, 2020

That's a good collection of advice, let me just add 3 things:

Web safe colors stem from the age of 8-bit monitors and limit your choice of color to just 216 bright colors, which won't solve the problem of bad looking text and graphics in JPEGs.

The choice "Type optimized" applies hinting, so the vertical stems of the letters will have the same width and won't be anti-aliased (provided the font designer correctly implemented hinting into the font).

After having exported a PNG, open it in Photosho

...

Votes

Translate

Translate
Community Expert , Aug 21, 2020 Aug 21, 2020

Let me add another thing:

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

That change of dimensions will only happen if the upper left corner X Y values of your object/selection do contain fractions. In your example it would be 4171 X 4171

And it is better to export at multiples of 72 ppi (144, 288) to avoid pixels being added

...

Votes

Translate

Translate
Community Expert , Aug 23, 2020 Aug 23, 2020

You can also use Export for screen and set the scale to 2x , 3x, ..

Votes

Translate

Translate
Adobe
Participant ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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

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
Participant ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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.

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 ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

Now try to share your SVG on Instagram.

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
Participant ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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.

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 ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

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

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
Participant ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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.

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 ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

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.

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 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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! 

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 ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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.

 

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 31, 2021 May 31, 2021

Copy link to clipboard

Copied

Thank you, Monika! This is excellent!

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 15, 2021 Jun 15, 2021

Copy link to clipboard

Copied

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.

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 15, 2021 Jun 15, 2021

Copy link to clipboard

Copied

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

 

So maybe you tell us about your specific issue?

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 ,
Aug 23, 2021 Aug 23, 2021

Copy link to clipboard

Copied

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

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
LEGEND ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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.

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 ,
Jul 30, 2022 Jul 30, 2022

Copy link to clipboard

Copied

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.

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