Images

Writing HTML for your images | Photos on the Web

If used appropriately, images can provide valuable information and make a Web page visually interesting. However, they should be used sparingly to add value to the page rather than merely serving as decoration.

Writing HTML for your images

• Images should be in either .GIF or .JPG format. Avoid using .BMP, .PNG, .PSD, and .TIF types on the Web.
  
  
• Resize using image editing software, not HTML. Images that are resized by HTML often look warped and fuzzy, and their pages take longer to load. Resize or crop the image to the actual desired dimensions (in pixels)--or ask Web Services staff help you.
  
  
• Keep file sizes below 20k, as a rule of thumb. If you have an image that is signficantly larger, it may be best to provide a small thumbnail of your image on your webpage with a link to the larger image.
  
  
• Include the actual dimensions of your image in pixels in your HTML code for quicker loading. For example:
  
  <img src="images/testudo.jpg" width="131" height="122" alt="Testudo: learn more" border="0">
  
  
• Use descriptive "alt" attributes within all <img> tags. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. Including the "alt" attribute for each image on a page improves the display and usefulness of your document for people who have text-only browsers.
  
  In the example below, the <alt> tag conveys information about the image.
  
  
  
  
• Use images no wider than the Libraries' template. The basic template is 620 pixels wide; the left column template is 175 pixels wide in the left column and 440 pixels wide in the body of the page.
  
  
  

Photos on the web

• Optimize the size of your digital photos using a photo-editing software before uploading them to the web. Most software already has a "save for Web" feature to simplify this process. Remember that large, high resolution photos are slow to download and difficult to see on the web. Save the high-resolution copy for making prints, and publish a smaller version on the Web site.
  
  
• Think about size in bytes/kilobytes, not inches. The general rule of thumb is to keep images on the Web smaller than 20k. If you want to let viewers see a bigger version of a photo, it may be best to provide a small thumbnail of your photo on your Web page with a link to the larger image.
  
  
• Ask Web Services for help if you are unsure about how to optimize your images or if you do not have access to photo-editing software. E-mail us at webservices@itd.umd.edu.
  
  

return to top