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.

Screenshot of a website image

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

How-Tos: Images

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
contain people, where appropriate, that represent the multi-generation, multi-ethnic clients we serve
have an appropriate file name to help make the image findable (use the guidelines for document naming).
have Alt text filled in correctly (see Accessibility & Alt Text)

Stock photography

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.

Copyright

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.

Professional photographers

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

BC Children’s Hospital and BC Women’s Hospital + Health Centre: media1@cw.bc.ca or 604-875-2312
BC Cancer Agency: email Reid.Lucier@bccancer.bc.ca

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

PHSA also has approved vendors.

Photography: Chuck Russell Photography, 604-250-3774, russell.pixmedia@gmail.com
Video: www.ohboy.ca Oh Boy Productions

Specifications

Aspects

In general, images that are wider than tall (landscape orientation) work well. Usually at 16 x 9 aspect ratio. But, images that are taller than wide (portrait) can also work depending on what you are trying to display. The 4 x 3 aspect ratio is standard for most mobile phones.

Resolution

We don’t need to upload the biggest file size of any photo. This can make the page load slowly. And, can use up a lot of your visitors’ data if they’re viewing it on a mobile device.

However, see calculating image size information below. The rendition you choose on the website affects the pixel size you need.

If using a photo from your iPhone, choose the Medium size
Photos with a lot of people in them tend to be higher resolution (and file size) because of all the colours, amount of detail, etc. Use Microsoft Office to reduce the size of these types of photos (or any photo that is too large) using these instructions. (PDF)
Keep number of pixels below 2,000!

File types

If you have Photoshop, re-save your photo using the “Save for Web” option by choosing File –> Export –> Save for Web (Legacy). This will resize your photo for websites and mobile devices. You can also download a free Photoshop Express app to your IPhone and resize photos right from your mobile before sending them to yourself.
Save for web will reduce the dpi (dots per inch) to 72, which is good for web. And, RGB colour is best for web. (Find this in the Image>Mode in Photoshop)
If a JPG image is too large, re-save it as a PNG and try the PNG version instead, and vice versa. Sometimes switching the file type will help reduce the size.

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.

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)
Images in image gallery: (720 x 540 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 has at least the same number of pixels as the image rendition you choose to use. Please ensure your photo is no bigger than 2,000 pixels.

Large images make pages load more slowly, which can frustrate your visitors. They also increase the carbon footprint of PHSA websites.

You can use an aspect calculator to calculate your image size in order to maintain the aspect ratio you want. Enter your width and it provides the height. Then crop you image height to match tthe number from the calculator.

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:

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

Don't use 3D graphics like this:

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:

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

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

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

Tip #4

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

Robots

Humans

Tip #5

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

Too white

Too saturated (bright colours)

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:

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

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:

Bad cropping

Better

Tab Heading

Provincial Health Services Authority

Web Editor Hub