If you are preparing graphics for display on a website, there are a few basic guidelines you should follow.

  • Resolution: Web graphics should be created at a resolution of 72 dpi (dots per inch). Technically, resolution only has an effect on printing, and web images can be any resolution. But unless you have a reason to use a different resolution, 72 dpi is a safe bet.
  • Format: There are only three graphic formats widely supported in web browsers: JPG, GIF, and PNG. The JPG format is best for photographic elements. The GIF format is better for line art, type and graphics with solid colors. PNG files usually have good quality at the expense of a little more file size (download time) and are a good choice for rendered art with shadows that need to be tranparent. Only GIF and PNG images support transparency, with PNG supporting partial transparency, but PNG transparency doesn't work in Internet Explorer 6 without some extra scripting. Only GIF images can be animated. Graphics with gradients (gradual transitions from one color to another) will look better as a high quality JPG. For more in depth information about graphics file formats, try this Wikipedia article.
  • JPEG Quality: When saving in the JPEG format, most graphic programs will give you a choice of what quality to use. Using very high quality settings might slow the loading time of your website, even for broadband users, and make it unusable by low bandwidth visitors. A setting around 50% is usually a good compromise between quality and file size.
  • Size: Most people have their monitors set to 1024 x 768 resolution or higher. Although average resolution steadily increases, it's still best to use 1024 pixels as the average screen width. With a 1024 pixel wide monitor in mind, you can estimate how big your image will be. For example, a 500 pixel wide graphic will take up about half the screen. Images over 1000 pixels wide should be avoided.
  • Color Space: If your graphics program allows you to choose a color space, you will want to use the "sRGB IEC61966-2.1" setting for the best color accuracy. Click here for an article (at another website) discussing web browsers and color space.
Back to Resources main page