Skip to main content

Images

An image is a visual content item such as a photograph or drawing, that can add interest to your webpage or illustrate a concept.
Introduction

What does an image look like?

The appearance (size and placement) of an image on your webpage depends on the type of image and page template used.

See "Image sizes & renditions" in the Specifications tab.

Image-hero.jpg  

An image at the top of a page (a "hero" image)



Why use an image?

If you want to add visual interest to your webpage or illustrate a concept, use an image. You can put an image at the top of your webpage (a "hero" image) or in the main content area. 

The kinds of content that work best as images are:

  • images that illustrate a concept or process, to aid understanding
  • images of people doing things or in situations that complement the topic of your webpage 

Include a caption for an image only if the image needs to be clarified. You might want to put the caption in plain text, in italics.   

Best practice

To follow PHSA style for images:

In general, images should:

  • set, or add to, an emotional tone for your page
  • be relevant to the content on the page
  • have people and objects portrayed in their natural environment (see Choosing images tab)
  • be cropped to remove non-essential background, so the subject is the focus
  • be legally yours to post, that is, you have bought it or have permission from the owner to use it
  • be used only with the written consent of the subjects, if using real people
  • be of high quality (see Specifications tab)
  • contain people, where appropriate, that represent the multi-generation, multi-ethnic clients we serve
  • have an appropriate file name to help make the webpage findable (use the guidelines for document naming). 
  • have Alt text filled in correctly (see Accessibility & Alt Text)

While it is best to have professional photos taken to use on your pages, if you can’t do that, there are some stock photo sites that have free, high-quality images such as istock, Pixabay, Fotolia, and Unsplash.

Never copy images from websites. This breaches copyright laws and produces poor quality photos. 


Carefully read license agreement for any photo sites you use to obtain photos. Many stock photo sites now require disclaimers if models in the photos are used in connection with a topic that may be unflattering or controversial.

If you have funding, you can book photographers from Media & Production Services:

Both departments can also recommend external photographers and videographers if needed. 


PHSA also has approved vendors.
  • Photography: Chuck Russell Photography, 604-250-3774russell.pixmedia@gmail.com
  • Video: www.ohboy.ca Oh Boy Productions
Specifications

Cropping & resolution

Images should always be cropped to an aspect ratio of 16:9 and be shown in landscape orientation (wider than it is tall). This is to ensure consistency of the layout and prevent a situation where there is too much or too little of an image taking over the page. 

SharePoint allows you to adjust the crop it applied.

If possible, images should be available in "retina" resolution, which ensures they look crisp on retina display devices (devices that have a high pixel density). 

To achieve this:

  1. Make sure your source file is high resolution, at least 300 dpi
  2. Then, in Photoshop, use the “save for web” feature, and save it in a jpg format, RGB colour, 72 dpi

images-specifications-example.jpg An image cropped to a 16:9 aspect ratio

Sizes & renditions

When you upload your image into an image library on your websites, the system will automatically create multiple sizes to choose from. The size of an image (its rendition) depends on the template and placement of the image. (The list of renditions may vary across sites at this time; these are being standardized.)

Here are the image rendition sizes that will be available to use. 

  • Half-page image: Only used on home page of websites, microsites & program sites. (Communications use only.)
  • Article feature image: Feature images used above news and stories articles (720 x 405 pixels)
  • Top of page image: Images used at the top of the Basic page template and the Event page template (also called a "hero" image"; 680 x 380 pixels)
  • Page image, full width: Full-column image used in the body of a page (550 pixels wide) 
  • Page image, small: Smaller image to be embedded into the body of a page; text has space to wrap around the image (190 pixels wide)
  • Highlight or sidebar image: Image used for gallery, highlight listings (Communications use only) and in the right sidebar (354 x 236 pixels)

Calculating image size

Make sure your original image is a larger size then the image rendition you choose.  

If your image does not use a 16:9 ratio (wider than it is higher) and your image size is smaller than the image rendition you choose, the photo may look odd.

Here's a calculator tool that can help you calculate your image size in order to maintain the 16:9 aspect ratio.

You can put in your width and it will tell you what the height should be. That way you start with the right number.

You should use a pixel size that is twice as big as the final pixel size of the rendition you will be using. For example, if the image is displayed at 720 x 405 pixels on the page, the source-image resolution should be 1,440 x 810 pixels.

Choosing images

Try to find quality photographs that don’t look too much like stock photography, but not like the pictures on Craigslist either. This is of course subjective, but here are some tips.

Tip #1

Try to use photographs with people in them. It’s ok to make exceptions, but too many pictures of only objects will give pages a very anonymous and generic feel. People are drawn to pictures of people, especially faces.

Tip #2

Never use pictures of icons, illustrations or graphics unless approved by the Communications department.

Don't use icons like this as pictures:

no_icons.jpg

Don't use graphics like this unless approved by Communications:

no-graphics-example.jpg

Don't use 3D graphics like this:

no-3d-example.jpg

Tip #3

Pictures of people and objects should portray them in their natural enviroment. Never use pictures of people or objects on a isolated (single coloured) or graphical background.

Don't use pictures of people on a isolated (single coloured) background:

no_people_isolated.jpg 

Don't use pictures of people on a graphical background:

no-graphical-background-example.jpg

Don't use pictures of objects on a isolated (single coloured) background:

no_isolated_backgrounds.jpg

Do use a picture of an object in its natural enviroment:

good-natural-environment.jpg

Tip #4

If there are people in the picture, they should look like real people and not models:

no-robots-example.jpg

Robots

humans.jpg

Humans

Tip #5

There should be a good colour balance, avoid pictures that are overly saturated or too white:

no_too_white.jpg

Too white

no-saturated-colour-example.jpg

Too saturated (bright colours)

colourful-but-not-overly.jpg

Colourful but not overly so

Tip #6

Depth of field (when the background is blurry/out of focus) can make pictures look more professional. Also consider lighting, colours and composition.

This picture has poor lighting, colors and composition. It looks like it was taken with a cellphone camera:

no-bad-lighting.jpg

This picture is a good example of depth of field and colour balance:

good-depth-of-field-example.jpg

Tip #7

Make sure you crop pictures so that important things aren’t cut off. If you crop a person, make sure they are high enough in the picture so they don’t look like they’re ducking:

no-bad-cropping-example.jpg

Bad cropping

good-cropping-example.jpg Better

Tab Heading
SOURCE: Images ( )
Page printed: . Unofficial document if printed. Please refer to SOURCE for latest information.

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2017 Provincial Health Services Authority.