Skip to main content

Preparing Graphics for the Web

Optimizing graphics for the Web

Formats

Graphics for the web are generally in one of three standardized formats

  • GIF (Graphic Interchange Format)
  • JPEG/JPG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphic)

These types lend themselves to web use because

  • they can be compressed and still be distinct enough for use on the web
  • they load faster on a web page  due to their small size in comparison to graphics used for print

File size

The most important quality of web graphics should be their small file size so they will download to the page quickly. Some facts about images on the web

  • Most monitors only show 72 dots per inch, so high resolution images are not useful on the web
  • Digital photographs and scanned images are usually high resolution, so they must be converted to a smaller size for the web
  • Images to be viewed on a web page should be small in physical size (dimensions)
  • In general, a graphic should be 25K or smaller in terms of file sixe
  • For the MCPS Web, most graphics should be no larger than 600 pixels wide 

Steps for preparing graphics for the web might include:

  • Cropping to focus on relevant detail
  • Changing resolution to 72 dpi
  • Resizing to small photo or thumbprint size graphic
  • Filtering or cleaning up color saturation
  • Save image for web as .jpg for photograph or .gif for line art