Canvas Card specifications

Jump to solution
CarrieZaher
Community Member

What is the pixel size for the canvas cards.  My current image is too big.

Labels (1)
3 Solutions
Chris_Hofer
Community Coach
Community Coach

Hi @CarrieZaher ...

I think you are referring to the course cards that display on the Canvas Dashboard, correct?  If so, I replied to someone else about this same topic back in June 2022, and here's what I said:

So I had to do a little bit of super-sleuthing on this one, but I think I have an answer for you. I was able to look at the past history of the Guide I had linked to above, and I can tell you that before May 11, 2022, Instructure had included the size of the image in the light-blue box at the top of that Guide. But, on May 11, they decided to remove that information. I'm not sure why they removed it, but here is what it said before May 11:

"For best practice, images should be approximately 262 pixels wide by 146 pixels high."


The Guide in question that I had linked to was: How do I add an image to a course card in the Dash... - Instructure Community (canvaslms.com)

I hope this will help a bit.  Sing out if you have any other questions about this...thanks!

View solution in original post

I am having the same issue. Everything pixilates when I upload it to Canvas. I've tried the 262 x 145 as suggested above but it looks terrible. It looks beautiful in Canva and in viewer once I download it, but it looks terrible in Canvas when uploaded. I have a little better luck with 300 x 300 but it still isn't professional looking. Suggestions?

View solution in original post

0 Likes

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. 

right click & download my template imageright click & download my template image

 

View solution in original post