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.
|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.