300 DPI = great quality but too large of a size. 72 DPI = poor quality but correct image size

[Logan22350789wn2t]

I am having an issue exporting from Illustrator. I would like to export a file at 475x234pixels as a JPEG or PNG. I know that in order for the correct 475x234 size to be exported I need DPI to be set at 72. However when I export at 72 DPI the quality of the image is very poor. When DPI is set to 300, the result is great image quality but the dimensions of the image are increased drastically. I was wondering if someone knew a tip or trick around this so that I can export with correct dimensions of 475x234, and great image quality. Please and thank you!

[Ton Frederiks]

That is impossible, more pixels means better quality but larger pixel dimensions

Less pixels means less quality.

You could try to improve the quality by changing the anti-aliasing method or in case of jpeg a higher quality compression, but that's it, a pixel is a pixel.

[Logan22350789wn2t]

Thank you for your response.

[Logan22350789wn2t]

Do you think you could inform me of how you would change the anti-aliasing method or make the JPEG a higher quality compression?

[Ton Frederiks · Accepted solution]

The settings are in the export options.

[Dave Creamer of IDEAS]

Is this for the web or print? I'm assuming web based on the formats and size you mention.

If for the web, use the Export For Screens menu. The PPI (aka dpi) is meaningless for web graphics--web graphics are simply x number of pixels by y number of pixels.

If for the print, you need to know the physical size (inches, cm, etc.) and it should be between 225-300 ppi. 

[Logan22350789wn2t]

The design is for web. 

[Ton Frederiks]

You could double the resolution to 144 ppi (or 2x in the export for screens) and scale the result back in HTML to take advantage of higher resolution screens.

[Dave Creamer of IDEAS]

Ton is correct--but I wouldn't double the resolution--I would double the number of pixels. An image that is 500 pixels wide is still 500 pixels wide regardless of if it is 72 ppi or 144 ppi. You can make the image 1000 pixels wide then either make two versions that swap out via CSS based on screen size OR reduce the 1000 ppi down by 50%. The downside of the latter method is all devices need to download the larger image even if they don't need it. 

As an aside, it is Photoshop that "needs" to put the ppi on every image; if it is not defined, it defaults to 72. Some of us may remember the old ImageReady program that came with Photoshop. It only measured X by Y pixels--no ppi.

[Ton Frederiks]

When you double the resolution in Illustrator on export, Illustrator automatically doubles the number of pixels.