Images are a great way to break up text, add visual interest and clarify your content. But there are definitely right and wrong ways (and places) to use them.
- Pick pictures with purpose.
Your images should help achieve your site's goals -- not just brighten up the page. If they don't convey something about your site, your unit, your service, etc., they'll simply feel like filler.
- Keep quality in mind.
Blurry, stretched, squished, or low-DPI images will make your site look amateurish. See the helpful links below for tips on getting professional-looking shots.
- Check the rights
Whatever image you choose, make sure you're allowed to use it. If you don't know where it came from, the answer is no. To avoid legal problems, always be sure to follow McGill's policies on freelance photography and getting consent from photo subjects.
- Not every page needs a photo.
Even text-heavy pages don't always benefit from photos, and adding them may only make a long page longer. Home pages, and your site sections' landing pages, are usually the best place for bright, airy, tone-setting images.
- Avoid image overload.
Sometimes it can be tempting to fill a page with pictures, to make it look more vibrant and fun. Often though, the page just ends up looking disjointed, and draws focus away from more important areas of the page. For most pages, the text should be the focus.
As a rule of thumb, images look great when they fill the width of the column they're occupying. The ideal width for the main area of the page depends on how whether your page is set up with a sidebar, a vertical navigation menu, both or neither.
No sidebar, no vertical navigation: 932px wide
With sidebar, no vertical navigation: 692px wide
No sidebar, with vertical navigation: 742px wide
With sidebar and vertical navigation: 512px wide
For images in sidebar blocks, a width of 182px will center it in the sidebar column.
Visually impaired Web users generally use programs called screen readers to navigate websites. The software reads text to them out loud, but to describe images, it reads out alternate text -- more commonly known as "alt text" -- that the site's editor has attached to the image.
Alternative text is text associated with an image that serves the same purpose and conveys the same essential information as the image. In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost. Absent or unhelpful alternative text can be a source of frustration for visually impaired users of the Web.
McGill site editors can -- and should -- add alt text to any image on their sites. For instructions, visit McGill's IT Knowledge Base.
Keep essential info in text format
Alt text is useful, but it isn't much help when it comes to pie charts, diagrams, and other images that can't be summed up in a few words. Whenever possible, try to ensure that vital information is available in text format on your site, so that everyone can read it.
Adding images to McGill.ca
- How to scale/crop images using GIMP
- Stylistic tips for cropping photos
- Differences between file formats (.jpg, .png, etc.)
- Making thumbnail images
Making images accessible:
- WebAIM: Alternative Text
- W3C Web Accessibility Initiative
- McGill's Office for Students with Disabilities