Skip to main content
Apply Visit Give

Images for your website

High-quality, properly sized, saved and stored images are essential elements of a great website. Follow our guidelines here and put your images in their best light.

Best practices Accessibility Design options

Best practices

Prepare an image for the DAM

File type

  • .jpg or .png

Image dimensions

  • All images uploaded to the DAM must not exceed a width and/or height of 1920px
  • To resize an image, use the Image Resizer tool. 

File name

If the image comes from PhotoFinder, replace each space with a dash.

If the image comes from another source, use lower case letters and separate words with dashes (-)   

    • e.g. stadium-football-game.jpg

Use an image on your page

  • Add an Image component or an Image & Text component
  • Open the component for editing
  • Drag in the image from the content finder
  • To adjust how large the image appears on the page, go to Image Settings. In New size, there are two blank fields. Add a pixel value to the first px field (e.g. 400), for the image width. Click OK. The height will adjust automatically, so your image is perfectly scaled.
  • Follow the Accessibility guidelines
  • Choose the best Design Option for your image
  • Before you activate a page:
    • Preview and refresh it 
    • Carefully review the page to check how the images display
    • If anything looks "off" and you can't fix it, email websupport@concordia.ca

Accessibility

Don't use images containing text

Screen readers and other assistive technologies can't read text that’s contained inside an image, e.g. like company logos, book covers and posters.

If you must add an image of a logo or book cover:

  • Provide descriptive alt text.
  • Ensure the image is high resolution, so users will low vision can easily enlarge it. For example, use a 640px image for a 320px spot or use a scalable vector graphic (SVG).

It's best not to use posters, because they're hard to view on mobile and it's difficult to make them accessible. It's better to present the content directly on your web page. For help with this, contact websupport@concordia.ca.

Add alt text to images

“Alt text” stands for “alternative text”. It's the text that describes an image on a web page, e.g. for people using a screen reader or people with a slow internet connection.

By law, Concordia's websites are required to be accessible and adding Alt Text is one of the first steps you need to take to ensure your web pages comply.

How to write alt text

  • Clearly describe what's in the image. Be specific.
  • Use proper punctuation so the alt text sounds natural when read out loud.
  • Maximum 150 characters alt text, because some screen readers will cut off at this point. Use WordCounter to keep your alt text below 150 characters.

Example

Riders participate in an indoor cycling class at Le Gym's Spin Studio, Concordia University's downtown fitness centre.


Bad alt text: gym athletics fitness centre exercise

Better alt text: A cycling class at Concordia's Le Gym.

Best alt text: Riders participate in an indoor cycling class at Le Gym's Spin Studio, Concordia University's downtown fitness centre.

The best alt text gives users of screen readers and search engines a good ‘picture’ of what the image consists of and how it relates to the rest of the information on the page. It uses keywords and punctuation in a natural way and is concise at under 125 characters.

Design options

AEM allows you to crop an image, make it round, and more.

Crop Ratios

The image component features five different crop options to allow different layout options.

Free Crop

The free crop allows you to crop the image to any dimensions you wish.

Screenshot of free crop

Square 1:1

Screenshot of woman holding a drone, cropped to square

Vignette 303:242 ratio

Screenshot of woman holding a drone, cropped to vignette

Headshot 11:12

Screenshot of woman holding a drone, cropped to headshot 11:12

Photo 6:4

Most landscape images from PhotoFinder are 6:4.

Screenshot of woman holding a drone, cropped to Photo 6:4

Round image

  1. In the Image tab, select the Square crop:
Screenshot of woman holding a drone, cropped to Square
  1. In the Image settings tab, check the box beside Round image:
Screenshot of image component settings, with round image checkbox checked

The resulting round image:

Screenshot of round image of woman holding a drone

No wrap

When you use an Image & Text component, at the bottom of the Image Settings tab there's a No wrap option. When you select it, text won't wrap below the image.

No wrap is the best option for the 3 following situations:

1. Image on left

Screenshot of image on left, text on right, text doesn't wrap

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

2. Small round image on right

Screenshot of small image on right, text on left, text doesn't wrap

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

3. Medium-sized image on right + text is only a bit longer than the image

Note: Right-aligned images look best when they're set to maximum 400px wide, like in this example.

Screenshot of 400px image on right, text on left, text doesn't wrap

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Default wrapped text

If the 400px image is on the right and the text extends far below the image, the default wrapped text looks best. For example:

Screenshot showing multiple paragraphs of text wrapped around an image on the right

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Need help with an image?

Contact Web Support

© Concordia University