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

[#1]

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.

[#2]

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.

[#3]

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 Photoshop and embed the color profile you had as working profile in Illustrator. For the web this likely is sRGB.

[#4]

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 due to anti-aliasing.

[#5]

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

[#6]

Wow, that was so helpful. What did it do differently (as opposed to export for web)?

[#7]

Thank you so much Monika, Ton and Mohammad for adding these wonderful suggestions. This will surely help our users.

Regards!

[#8]

Thank you so much for the info!!

Kind Regards