What should dpi be when saving artwork for web?


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.

4/27/2016 12:50:00 AM

Accepted Answer

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/

4/27/2016 1:45:00 AM