- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I would hazard a guess that Instructure removed the specification because it had become outdated with their dashboard tiles becoming more responsive. That's speculation, what I can say is:
The '262x146px' dimension that gets quoted in the absence of an official specification or template file is wrong (unless maybe your definition of 'best practice' is to prize download speed far above image quality).
I made a vector test pattern image designed to highlight pixelation and I exported it to PNG at 262x146 as well as x2 x3 x4 and so on. Then, I tested each of these images across multiple devices, took screenshots of everything, and then collated these images in Photoshop. Here's what I found:
For the sharpest image across devices, the ideal dimension is 524x292px.
On some devices & circumstances, the image still gets displayed at larger dimensions than this. However, there is not an evident quality improvement going above this size. It might be that Instructure downsamples larger files to this dimension (?) but I don't know that. I do know that any images smaller than this dimension can have their quality improved. Resample them at this specification and replace the old file.
I would also recommend taking note when you are choosing or authoring these images that when the viewport size is small enough, Canvas has a breakpoint to switch to a different aspect ratio entirely (!), so there is an undocumented 'safe zone' for critical content to appear on the mobile app (for instance). i made this 1:1 image documenting these dimensions, the safe zone, and where the menu button will land in both instances.