0

This question already has an answer here:

When saving artwork made in Illustrator for web, what should the dpi be when saving it as a JPG or PNG?

For example, say I save my artwork at 500px wide, is it better to save it at 72 dpi or 300 dpi? What do people typically do? Thanks.

marked as duplicate by Cai, hsawires, Hanna, DᴀʀᴛʜVᴀᴅᴇʀ Apr 28 '16 at 13:18

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

4

Traditionally, screen resolution has been 72dpi, though newer high-res monitors like Apple's Retina displays can go up to 400dpi.

That said, when saving images for the web, image resolution doesn't really matter. Most people will export at 72dpi, but the most important thing to do is to export at the pixel dimensions at which the image will be displayed. This becomes a bit tricky in web use, where people are viewing your images on any number of different devices, all with different screen sizes and resolutions, but most content management systems (CMS) will allow for this.

Your best bet is to work out the largest size your image will be viewed, and export your image at this size, at 72dpi. Using CSS or HTML, you can instruct your browser to display the image at 50% depending on the viewer's screen size. This may be something you have to code yourself, or it might be built into your CMS (WordPress does this automatically).

Exporting your images using Illustrator (File > Save for Web) or Photoshop (File > Export > Export As) will let you adjust the size and quality to find a good balance between the two. You want your images to be big in dimension, but not in file size. Both export images at 72dpi.

Find some more info about image/screen resolution here: http://www.photografica.com.au/image-size-resolution-and-resizing-images-for-the-web/

  • Thank you so much for your clarification! You are the first person to help me understand why and what the better option is! – Bekah Apr 27 '16 at 2:16
0

From illustrator. I normally save as SVG then it will look sharp on a a screen and will re size nicely on gadgets. Then you dont need to worry about screen resolution

-1

72 dpi is best for web or 92 dpi for retina displays. 300 dpi is generally only for print. Using it for the web will just make a bulkier file.

  • This wildly inaccurate. Resolution makes zero difference to either file size or display on screen and even if it did 92dpi for retina screens make no sense at all, even a non-retina screen will most likely have a physical PPI of more than 92. – Cai Apr 27 '16 at 13:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.