Working with Images

Where to find images

Copyright considerations

  • Do not simply search for images online and download them. It's important to respect copyright and only use images that are licensed to the organization or free for public use.

Naming conventions

Using a consistent and descriptive filename can make your images easier to find in the media library. We recommend including the following separated by hyphens:

  • keywords describing the image, including any group or event it is associated with (e.g. neurology-residency-boat-tour)
  • If these change yearly, add the year associated with them as well, so lowercase-name-with-hyphens-2016.
  • image dimensions, width x height (e.g. 800x600)

For example: neurology-residency-boat-tour-2024-800x600.jpg

 

Alt text

Anywhere photos can be uploaded to the system, it will also prompt you for alt text. This is important for sight-impaired users to still be able to get the full experience of visiting the site. A simple approach to writing alt text is to write a sentence as if you were describing the image to someone on the phone. The description doesn't have to be long or overly detailed, but it's helpful if it explains how it relates to the rest of the content on the page.

A secondary reason that alt text is important, is that search engine crawlers use this to identify images as well. Well-written alt text with keywords that relate to your webpage can help make your page more findable on search engines.

Images with text contained inside the image

It's best practice not to include website photos where important information is written in the image itself. Text is often difficult to read, and non-sighted users will be missing the information altogether. If these images are used, ideally the alt text would also contain the text written in the image.

 

Cropping, resizing and compressing

Image sizing is important for limiting file size and ensuring that the image fits the area where it's needed. Many cameras, including smartphones, take images at very large sizes with dimensions in the thousands of pixels. The vast majority of images on the website only need to be a maximum of 600 pixels wide or tall, making the raw files unnecessarily large for this purpose.

Aspect Ratio and Image sizing

The correct image size depends on where it is being used. For WYSIWYG components, 4:3 or 3:2 (or their portrait orientation counterparts) are common aspect ratios. An aspect ratio calculator can help you determine what size you need, simply use 600 as the larger dimension and re-size it appropriately using an editor such as Adobe Photoshop or Pixlr X.

If you’re adding images to a page which already has several similar images - for example, a table containing photos of all the residents in a residency program - start by looking at the size of the images on the page, and resize the photos you’re adding to those same dimensions.

Component templates have specific image sizing needs. Make sure to review the specifications below:

Pixlr Free Online Photo Editor

Image compression

Adding photos to the website with large file sizes can significantly slow down a page’s load speed, especially on mobile devices. This is important because 53% of mobile users leave a page if it takes longer than three seconds to load. Additionally, Google has started using page load speed as a factor in ranking pages within its search results.

If you submit a page edit that includes a photo with an unnecessarily large file size, you’ll be asked to resize and/or compress it. Compressing the image can reduce its file size with no degradation in quality and is recommended to make your page load as fast as possible.

Free image compression with Squoosh

 

Placing images on the page

If you're using an image-based component, like Featured Media - 1 column, you'll automatically be prompted to upload your image to the Media Library.

If you're placing your image in a WYSIWYG or Accordion, it’s essential that you use the Media Library to upload the image. Do not copy an image to your clipboard and then paste it into your web page at any time.

Screenshot of a web editing toolbar with an arrow indicating the Media Library icon

 

Pasting images imports large amounts of unwanted formatting code that’s difficult to remove, and can significantly slow the your page load speed – both for you and for your users.