This document aims to provide you the sizes for different placements of videos and images in Bridge. In the last section of this document also is a collection of free resources around the web that you can use to add some zing to your content.
Images in Courses
- When viewed on a desktop, Bridge automatically adjusts large (>720px) images to 720 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 720 pixels. Anything image below 720 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 720px 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.
Videos in Courses
- The ideal aspect ratio for viewing video in Bridge is 16:9. The three most common standard resolutions for this size are:
- 1920p x 1080p
- 1280p x 720p
- 853p x 480p
There are a number of free resources that you can leverage to liven up your trainings. Take advantage of them!
- Canva.com–a free online graphic design tool. The “Facebook Cover Image” template works great as a banner for your courses.
- Gimp.org–a free online photo editing tool (think freeware Photoshop).
- Iconfinder.com–a free and paid icon repository. When you search, be sure to select “Free Images” to find the sets that are available for any type of use.
- graphicburger.com/backgrounds–a free site with a number of different background texture categories.
- Videvo.com–a free stock video repository that is available for any type of use.
- Emojipedia.org–did you know Bridge is compatible with UTF-9? That means you can use emojis in the titles of courses, in content, etc., etc., etc.!