Images Attributes
Pixel Size, ALT Text, Crediting and Backgrounds
Images: Width & Pixel Size
Version 10 of D2l Brightspace limited the width of all content to 960 pixels, and many of our PCC master versions of courses further limit the width of the content in HTML pages to 700 pixels for best reading comprehension (studies have shown that reading comprehension decreases with long line lengths).
For single-column layouts, what should be our maximum graphics width?
Therefore, limiting graphics to 660 pixels wide or less enables them to fit in the space allotted and allows room for margins (white space) on the page which are also important for reading comprehension and visual presentation.
For dual-column layouts, what's our maximum graphics width?
On your Course Home page, with the standard two-column layout for widgets (with one narrow column and one wide column), graphics should be 285 pixels wide or less in the narrow column widgets, and 600 pixels wide or less in the wide column widgets.
Also, due to varying connection speeds available to students, keep the size of any graphics small (kilobyte-wise). 100K in size or smaller is good.
Images: ALT Text
Alternate Text (or "ALT text") is the accessible, descriptive text that should be included by faculty or course designers whenever any images are embedded on a webpage, D2L tool, or document. This practice can help make your pages more accessible for screen-readers.
Keep your ALT Text short at 15 words or less as some screen readers will cut off longer descriptions. If captioning already describes the image, ALT Text should add more nuance to describe any important aspects of the image that the caption does not.
To ensure accessibility for images (for students utilizing a screen reader to access the Internet), insert Alt Text into the HTML code for each image using the "Source Editor" which can be accessed in the lower right corner of any HTML editor window in D2L Brightspace.
For example:
<img src=”images/MUS151banner.jpg” alt=”MUS 151: Exploring Music Course Banner” width=”500” height=”197” />
Learn More about ALT Text
To learn more, read How to Write Great Alt Text - And Why It Matters (2020) by Pamela S. Hogle and Deni Elliott. This reading is also linked from our LEAD 181 Introduction to HTML course for faculty and staff. To learn more, visit our Faculty Development & Training page.
Images: Credit Your Sources
Credit the sources of your images when the sources request that you do so and place the credit line near the image.
Images: Background
Placing text on top of background images makes the text difficult for anyone to read.
As such, don’t use background images behind any text.
Here's an example illustrating the problem:
