Quick Links

Images

On this page:
Image selection | Placement | Size
Accessibility | More information


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.

Choosing the right images

  • 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.

Deciding where to place them

  • 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.

Sizing them up & laying them out

Photoshop is great, but it's pricey.  Don't worry though, there's plenty of free software like GIMP and Paint.NET that can resize your images so that they work with your page.

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.

Making images accessible to everyone

Alt text

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.

From Wikipedia:

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.

For more information

Adding images to McGill.ca

Formatting images

Making images accessible:

Free image-editing software