Guidelines for Image Resolution

Grok has two main ways that images will be displayed in course content:

1. Taking up to the maximum width of a content slide

2. Taking up to the maximum width of a problem slide

Any images smaller than the maximum width will be centred on the page. Any images larger will be resized to fit the maximum width.

Context	Width
Content Slide Maximum	680px
Problem Slide Maximum (very uncommon)	1020px
Problem Slide Typical	460px
Problem Slide Minimum	360px
In this case px means the definition used by web browsers, which often isn't a device pixel. On a high resolution display each px wide on grok would be 2px on the display. To solve this we recommend using double this resolution for all images. So images should be at least 1360 device pixels wide to display without blurring on high resolution displays. For any images which do not have bitmap content, using a vector format (SVG) is preferable, since pixels matter less. Though testing the image scaled to these widths would be useful for checking their comprehensibility. Note that SVG can include text rendered using the browser's font selection - which may not match your own font selection. So test your SVG, on another device, or make sure all text is converted to outlines. Sometimes authors will display images as a figure within a 2px light blue frame. If you plan to display your images this way, then you may want to note the contrast around the borders.