Image Management Best Practices
For an image to display or communicate effectively on the web, it is best to consider the following:
- Image Scaling & Pixels
- Images are scaled on computer monitors using a measurement tool called a "pixel". 1 pixel is incredibly small. Most computer displays are around 1280 pixels wide by 1024 pixels high. Therefore, most web graphics and photos should be less than 500 pixels wide and 600 pixels high in order for them to display correctly in relation to other text and images on a page. For more information on pixels, visit http://en.wikipedia.org/wiki/Pixel
- The maximum width for images to be displayed correctly in Web Manager is 588 pixels. If you choose to use the right sidebar, or display sublinks, the maximum width drops down to 375 pixels.
- Photos taken directly from a digital camera or supplied from stock photo resources will need to be sized down.
- Image Choice
- When picking images or photos, it is a good idea to ask - What does this communicate? Is it reflective of our current work? Are photos reflective of our multi-ethnic communities?
- It is important to secure a photo release from anyone whose photos you plan to use for promotion, including the web.
- An image used on the web should have one of the following extensions: .jpg, .gif, .png
- Images found embedded in a Word Document can not be easily extracted for use in a webpage. If you receive images embedded in a Word Document, it is a good idea to request the originals from the author/creator.
- More information on finding and choosing images.
Image Resizing & File Size
As computer applications develop, it is becoming easier to manage and upload quality images. Free resources like Picasa, Flickr and Picnik offer great ways to create high quality images with small file sizes.
While it is possible to resize a large image within the Web Manager page content window, this often does not result in the best appearance. This also leaves the image at the original file size, which may be too large for adequate web viewing.
Resizing within the Page Content Window - A Problem!
See the following example, using an image that was originally 1600 pixels wide X 1200 pixels high - much too large for use on a webpage.
A 300 pixel X 225 pixel crop of the original image.
The original file size of the photo is 746 Kilobytes.
NOTE - Most web images should be under 100 Kilobytes:
The same image, resized within the Page Content window.
While it is possible to click on an inserted image and drag the white boxes to resize it, this is not a preferred method.
Notice that the filesize remains the same - much too larger for normal web viewing.
Resizing within the page content window only forces the large image to display in a smaller space.
This method does not actually make the image smaller or easier to load:
Now see the same image, resized through a free web-based photo editing tool.
It looks good and is a much smaller filesize - 16 Kilobytes!
This means that more people can view the image quickly!