WebJunction

Best Practices When Using an Image or Graphic on WebJunction

• Verify that the picture fits the desired flow of the page (not too big, not too small).  Shrinking or enlarging an image can distort text and other fine details. 
  
  Instead, you might wish to cut out a section of a picture that centers on the desired information.  In the example below, you can see several examples of this practice.

• Limit the use of full-page graphics. The time it takes to load such images can frustrate many of your users.
  
  
• Pay attention to file format when selecting images. 
  • GIF images are best for line art or cartoon-like drawings, text rendered as an image, artwork with flat areas of color.
  • JPG files are best for photographs or art with gradient tints.

• Images should be saved same size at 72 pixels per inch resolution.
  
  
• Use screen captures if they can help the user understand how something works.  Be sure to put a caption or an explanatory note if it is unclear that the graphic is not interactive. 
  
  
• Not everyone will be able to see the images (i.e. those with visual impairment or slow internet connections) and they will miss any important or essential messages if you put it in an image.  In the example below, this picture is used as an icon for the help link.  In some cases, users may not be able to see this picture and will not be able to see the information.

• Readers respond more favorably to pictures of people with smiling faces that are facing the camera, such as the example above.
  
  
• Make sure you have permission to use an image [link to Terms of Use/copyright].
  
  
• Input an Alt tag as this helps readers using screen readers as well as those who are using the text-only version of the site.  In addition, search engines use these tags to categorize internet pages.
  
  
• Make sure image is relevant to the story in the surrounding text.
  

• How to Insert an Image

  1. Go to the WYSIWYG editor and select the location for the image.
     
     
  2. Click Insert/Edit Image  The Image Properties window opens.
     
     
  3. Enter the URL location of the image that you want to insert. (Locate the image on the Web, mouse over it and right click Copy Image Location in Firefox or Properties in Internet Explorer. Paste that URL into the URL text box.)
     
     
  4. In the Alternative Text box, type a description. This text will appear when the image is browsed over.
     
     
  5. Resize the image and align it with any text in the WYSIWYG editor.
     
     
  6. When it is set up the way you want it, click OK.
     
     
  7. The image will appear in the WYSIWYG editor.
     
     
  8. Click Submit when you have finished editing the document.

   

  TIP: We recommend using Flickr or some other image management tool to store your photos and then pointing to them from your WebJunction site in the method described above. The image repository in the WebJunction platform is adequate for managing a small number of images but lacks the robust capabilities of other image management tools

Additional Reading

Read the section on Web Graphics in this Web Style Guide

http://webstyleguide.com/graphics/index.html

Text Alternatives for Images

http://usability.com.au/resources/image-text.cfm

Saving Images for the Web

http://www.northlight-images.co.uk/webphotos.html

Do you have guidelines or best practices for images and graphics you want to share with others?

You can:

• upload a document,
• recommend, rate, or comment on an existing document, or
• contribute to a discussion about images and graphics.