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
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.
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
.png "lazar_konforti"){kind=avatar}
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.