Formatting Images/Graphics for the Web

Tips for Creating and Formatting Images and Graphics for the Web

1. Get Started

  • Talk to the project manager and determine what type of images are needed.

2. Get Images

  • Look for images via Canto or ask the photo archivist for help.
  • Check if the client has usable photos.
  • Stock imagery from Getty or Shutterstock is an option but will require approval from the department head before proceeding.
  • A photo shoot may need to be scheduled if the images needed are not available, so advise the project manager.

3. Size and Adjust Images

Once you have the images, size them to the appropriate dimensions (See Web Graphic Specs), adjust color, brightness, sharpness, etc., and save for web.

  • File>Save for Web & Devices: A window will open so choose the settings in Figure 1 below.
  • Photos or graphics that have a continuous tone should be saved as JPEG files (Figure 1).
  • If a graphic is without a continuous tone, it should be saved as a GIF file (Figure 2). This format gives it a sharper and cleaner look while keeping the file size down.
  • If the graphic needs to be on a transparent background, it should to be saved with Transparency and Matte ticked off. Matte should be the same color background the graphic is going on (Figure 3).
  • Label the image with original file name but add a prefix or suffix to indicate its use. (See Web Graphic Specs).
Figure 1  Figure 2   Figure 3
Save File for Web sample Saving Image as a GIF file Saving as a Tranparent Background

4. Get Approval and Post to Development Site

  • Email images/graphics to the project manager first to get approval to put up on development site.
  • Once approved by the project manager, upload to development site, place in area needed, and post your actions in ProjTrak.
  • Once final approval is given via ProjTrak, the project manager will move image to the live site.
     

5. Image File Naming Conventions

[INSERT TABLE HERE]