Canvas Card specifications

[CarrieZaher]

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

[Chris_Hofer · Accepted solution]

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!

[CarrieZaher · Accepted solution]

Thank you!  This is exactly what I was looking for!

[JenniferKelly1 · Accepted solution]

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?

[Chris_Hofer · Accepted solution]

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!

[JenniferKelly1 · Accepted solution]

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?

[ddessauer · Accepted solution]

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 image

[JenniferKelly1]

Yes! I agree with the "best practices" statement. Canvas really needs to cull the guides and go back to some of the basics creating (or at very least updating) some of the old guides. Some of us don't have access to the higher in designware and priority services seems to know less than I do (which is really hard 'cause I don't know much-not my degree field!).

Anywho, this answer solves my dilemma I think. Thank you!!!! You are much appreciated.

[AlanCoe2]

Thanks DdeSauer! you took the time to figure this out and helped me! Looks nice and sharp and not pixelated, thanks to you!

[ddessauer]

Since writing this, it has come to my attention that the mobile apps now place text (most prominently the nickname) on top of the  card centred vertically and horizontally. 

This is very messy if you chose to have any text in your image. 

Without wanting to start down a seperate accessibility issue, I will just say: there are time when redundant text rendered as pixels in the card image can be assistive. 

If that is the case for you, I would recommend the counter-intuitive action of not putting it in the safe area, so that we avoid the circumstance of text on text for mobile app users. 

You can use the top and or bottom edge rectangles (dark grey in my template). 

Remember if you are centring something in the top one, it will be beside the menu button, so you might want to offset it to the left more. 

[CarrieZaher · Accepted solution]

Thank you!  This is exactly what I was looking for!