Images
Optimising images requires that you reprocess them in an image editing application before uploading them to Blackboard. There are many application available both free and paid.
When adding images, two important questions should be asked first:
- Do you really need it?
- 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.
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.
Files from image supplier websites are often very large to give you full detail. It is up to you to optimise them.
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 800 pixels wide unless more detail is required. This detail may not be present at actual size but a student may zoom in on the image or download it for closer analysis.
Photograph type images are normally in JPEG format and reduced quality. JPEG is a lossy compression format. As the quality setting is reduced, it removes more detail. Adjusting the quality needs a visual check for size over clarity.
Tip
Your local storage is free, so export multiple different sizes and quality until you find the one your happy with before uploading it.
Example
The following JPEG image has been exported at different sizes and quality. The original image was supplied at 29566 px across and is a whopping 526 MB, which if your lucky enough (most are not) to get 25 MB/sec download speeds it would take around three minues. The speeds below assume 25 MB/sec.
More detail can be seen if zoomed in on screen, or download the image.
6.2 MB, 2 seconds
386 KB, 0.13 seconds
540 KB, 0.17 seconds
49 KB, 0.015 seconds
20 KB, 0.008 seconds
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. Both support a transparent background.
Vector art should be in SVG format. SVG maintains its quality at any size.
Warning
Blackboard does not allow an SVG to be inserted as an Image item, it can only be used as an inline image. They may catch up to this century eventually.
Example
The following vector image has been exported in different formats. The original image is the SVG file dowloaded from Wikipedia.
More detail can be seen if zoomed in on screen, or download the image.
12 KB, 0.003 seconds
37 KB, 0.01 seconds
38 KB, 0.01 seconds
Banner images#
Banner images, both inline and top banners, span the width of a page and as such depend on the users viewing size. The maximum view width has been set at 1024 pixels, you should not need to make an image bigger than that unless more detail is required. They should also not be too tall in comparison to their height so as not to be intrusive on the page.
A size of 1024px × 300px should be fine for most banners. This can vary depending on the content and may require cropping the image to suit.
If you are using inline banners it may benefit visually to make their height smaller.
Card banner images#
Because navigation 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 400px × 200px. This will keep the size down and still allow some flexibility when the cards resize.
Tip
When using the same image for a card banner and 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.
Tip
Try to use images with the important content towards the middle of the image. Cards crop the image to maintain its proportions as the card scales.