Optimising

Content

Southern Cross University has a very fast internet connection, giving an unbalanced reference to the speed experienced by users outside the University. While images and other content will load quickly on campus it is important to optimise the content where possible to improve the performance for users on slower networks and devices.

The biggest areas where savings can be made are images and video. The following are some guides to help reduce file sizes but should be taken with a grain of salt. A tiny image that is hard to read can be less beneficial to a student.

Images

When adding images, two important questions should be asked first:

1. Do you really need it?
2. Does it need to have high detail?

It becomes a balancing point between file size and clarity based on the type of image and its purpose.

Files from image supplier websites are often very large to give you full detail. It is up to you to optimise them for your students.

Tip

Always keep a copy of your original image. Resizing can be destructive and pixels lost can never be regained.

Inline images should not normally need to be larger than 600 pixels wide.

Photograph type images should be in JPEG format and compressed. JPEG is a lossy format. The more it is compressed the lower the quality. The amount of compression is adjustable needing a visual check for size over clarity.

Line art type images should be in PNG format. PNG has lossless compression and will maintain clarity for these types of images. GIF is also an option with lossless compression.

Vector art should be in SVG format. SVG maintains its quality at any size.

Note

Changing the width and height settings in Blackboard only set the dimensions for the image to be displayed in the page, it doesn't change the actual size of the image that gets downloaded.

Card banner images

Card banner images are scaled to 200 pixels high and fill to the width of the card. Because the cards resize to fit the space available on the screen, the display width of the image will vary. A small amount of oversize will benefit.

Images for card banners should not need to be bigger than 900px × 400px. This will keep the size down and still allow some flexibility when the cards resize.

Tip

Try to use images with the important content towards the middle of the image. Cards crop the sides of the image to maintain its proportions as the card scales.

Banner images

Banner images fill the width of a page and as such depend on the users viewing size. They should also not be too tall in comparison to their height so as not to push the content off the page.

A size of 1200px × 300px should be fine for most banners. This may vary depending on the content.

If you are using inline banners it may benefit visually to make their height smaller.

Tip

When using the same image for a card banner and the child page's top banner you can take advantage of browser caching. Instead of making two different sized images, use the same larger top-banner image for the card banner. The browser will cache a copy when it loads the card and then use the cached version on the next page.

Video

Wherever possible, video content should be hosted in an alternate system, and not uploaded directly to Blackboard. Southern Cross University uses Mediasite for streaming university video content. Alternative systems such as Vimio and YouTube can be used if the content already resides at that location.

TODO: Managing and optimising video content guides