Perfect Size for Graphics on Canvas Homepage?

[asizemore]

Is there a "perfect size" for graphics on a homepage? I have our college's web designers coming up with custom graphics for our homepages and I haven't found a solid answer on the best size to make the graphics. 

[matthew_taylor1 · Accepted solution]

I've found that Canvas seems to dynamically add a max-width size to images based on the width of the browser window when you open a page. This means when you change the browser window size, even if an image is set to scale to 100% width, it caps at a lower width.

Has anyone found a way around this problem?

[MattHanes]

I have notes written down on my desk that say that the maximum page width is 1102 pixels. I'm not sure where I got that value but it's been working for me. Hope that helps!

[kroeninm]

For Banners on our homepages, we use a 10:2 ratio (i.e. 1000x200px).  We could go smaller but since we use photos in our banners, this has been a good balance of quality of the imagery and file size.  In the past I typically thought 800x600 was a common screen size but I'm not a designer .  When I download from Pixabay or Flickr, I aim for around 600px, as that usually has the quality of imagery retained with a smaller file size.

But the px's aren't as important as the way images are inserted into Canvas I've found.  The students we serve use all types of screens: desktop, small laptop, mobile devices, phones etc. and so when I insert a graphic/image I insert using a percentage of the page as the width instead of pixels (banners are usually 100% width, visual imagery probably 30%).  If you use pixels and someone has a smaller screen, it may not shrink, may require scrolling, or perhaps even skew and be unbalanced on the page.

So though we have certain typical sizes we use in designing images, when I insert the images, I always ensure the image is based on a % width versus pixels so that it will resize along with the page to best fit the student's browser of choice and keep perspective.

- Melanie

[asizemore]

Thank you so much - sizing by percentage instead of pixels and more importantly the rationale behind is extremely helpful as I hadn't begun to consider that before. 

[kmeeusen]

Hi  @kroeninm 

I have been using percentages for a couple years now, and testing shows that they do scale nicely.

 @asizemore  Use percentages for the width, but continue to use pixels for the length. This gives you better control since there is no fixed length to a Canvas Page, or at least not one I have ever exceeded. I suspect, I can't create one that is 147 light years long to really test this, but you can play with that if you have some spare time:-)

Kelley

[adriennefan_arr]

 @christopher_ma1 ‌ - perhaps something to note for our modules.

[asizemore]

Hello all - So I happened to notice during a Cidilabs training today that when using the homepage creator in Design Tools, Canvas shows a max size option of 1100x313px.

While I am still taking  @kmeeusen ‌  and  @kroeninm 's advice on sizing width via percentages, this may help end the mystery on pixels for length for my purposes of editing and customizing home pages! Hope this helps everyone.  

[jonesn16]

tl;dr Its hard to get a full graphic color bleed in your design, so past a certain size making the image larger does nothing.

I have found Canvas does a weird job with scaling images. For example, I had styled a home page for a course about information literacy that leaned heavily on "the information highway" metaphor for the internet. To support the theme I created a road sign button for each week. Behind that I wanted a static image of a map. I needed the map to be a separate image from the road sign buttons, that way the buttons could move and cascade down the page as the width of the browser shrunk or expanded. Here's what it looks like right now:

As you get to the bottom of the page, you'll notice the map ends, and some buttons go into the normal white background:

I tried to make the map so big that it wouldn't fit in the space provided by the content editor, assuring that regardless of how narrow the browser got, the road sign buttons will always have a map background.  But its not possible. From what I can tell, Canvas will scale down any image along whichever axis is closest to fitting within the browser window, and will then allow the image to "go off the edges" along the other axis. 

[andrew_sheppard]

Apologizing for veering off topic, but those are some nice looking themed visuals you have there! 😍

[Bobby2]

Brilliant. This is such an important question. Thanks for asking  @asizemore 

[benjamin_rodrig]

This is a really good post with some great info.

Of all the well designed pages I've seen in Canvas, there are some similarities when it comes to banner images.

• Generally medium to high resolution (over 1200 px wide natively).
• Cropped to an aspect ratio of about 10:1.5 for Pages and 10:1 for Assignments and Discussions.
• In the RCE's HTML editor - these are set to a 100% width.

They look really good in the composition of the page, scale nicely, and are not obtrusive to the item text.

Best regards,

-Ben

[sharon_kitching]

Similar to Ben, We set up banner images with the 100% width rule, cropped to a long thin format. One of the academics at uni made a "banner build' that grabs images from Upsplash and edits them into the correct ratio to download and insert as a banner. It gives a bit of consistency over look and feel. 

[DiannaDK]

This was a really helpful thread.  I am trying to help our teachers out by creating some templates that they can borrow and personalize.  In regards to "buttons" on the pages, does anyone have an approximate size they recommend that fits with the ration of the page banner?

[matthew_taylor1 · Accepted solution]

I've found that Canvas seems to dynamically add a max-width size to images based on the width of the browser window when you open a page. This means when you change the browser window size, even if an image is set to scale to 100% width, it caps at a lower width.

Has anyone found a way around this problem?

[lazar_konforti]

I created a banner that was 1300 pixels wide but it still did not cover the entire width of the page when observing in Chrome using "Student View". 

Most of you have suggested smaller sizes, so I'm starting to think that how canvas displays things in a browser will also depend on our respective screen resolutions... which of course means taking the time and effort to create a banner of just the right size is pointless as every student will see it differently depending on what screen they're using. 

[DrNufer]

One thing that many people don't know is that you can actually have multiple banners depending on the size of the screen.  In other words, a large screen might show something different than a mobile device.

https://youtu.be/PVTc6C4_j6Q

[DrNufer]

unsplash.com for the win!

[evansaar]

What are the correct dimensions for an image that we want to use as a course navigation image.  Like the picture that you click on in the dashboard to open the class.  I always get it scaled wrong and it cuts part off... 

[Chris_Hofer · Accepted solution]

Hi @evansaar ...

Re: the image size that can be displayed on Course Cards on the Canvas Dashboard...  here is a previous discussion topic that I replied to which may help to answer your question:

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

---

Source: Solved: Re: Sizing image for course card on dash board - Instructure Community (canvaslms.com)

I hope this will help a bit.