Images in Courses

• When viewed on a desktop, Bridge automatically adjusts large (>750px)  images to 750 pixels in width (which is the width of other content that is displayed, like text).
• Bridge will automatically adjust all content when the width of the browser is less than 750 pixels. Anything image below 750 pixels in width will either display at the original size of the image, or the maximum width of the browser, whichever is less.
• As with other websites, the recommended pixels per inch (ppi or resolution) is 72 ppi. Lower resolution and smaller images will load faster than higher resolution, larger dimension images because of user network limitations.
• The  Bridge team has more ability to fix bugs around the display of images that are uploaded manually than images that are embedded by URL import.  For this reason, the suggested primary means of adding media is via direct upload from your desktop.
• When choosing or developing images, consider mobile responsiveness and accessibility. Choose or create images with:
  • High contrast
  • High resolution
  • Large size
  • Little or no text, or with large text.
• If you choose to incorporate text into your images and your image is 750px  in width, you should target a font that is at least 28 points so that the text is greater than 12 points when the image is shrunk to fit the screen width of a smartphone (~320px). For readability, you should  adjust the font size to be larger when the font-family:
  • Is narrow in letter width
  • Is narrow in letter stroke
  • Is a cursive style

Images in Program Cover Slides

• Dimensions for program cover slides should be approximately 1040 x 500 pixels at  72 ppi for maximum image quality while maintaining minimal image load time for learners.
• Program Cover Slide images will be scaled down proportionally to a width of 300 pixels when displayed in the Learning Library.

Images in Course Cover Slides

• Maximum dimensions for course cover slides should be approximately 2500 x 1600  pixels at 72 ppi for a good quality Fill Screen fit and good load time for learners.
• Images should have high contrast with either white or black text. If contrast cannot be achieved with the image alone, use the opacity slider with a  light/dark background color to make the contrast greater between text and background.
• Course Cover Slide images will be scaled down proportionally to a width of 300 pixels when displayed in the Learning Library.