Image sizes

Content Tiles – 600px width
three content tiles, first content tile having a photo of two horses dancing

Card in page with secondary content – 800px width
Large card with image of horse running in a field

Image in Secondary content – 600px width

campus web webpage displaying an image in the secondary content

Image across webpage with Secondary Content hidden – 900px width

Example of using an image across the webpage with 716 width pixels

 

Best Practices

  • Banner Image size for full screen - width size 1280px by height 400px maximum
  • Banner image size for mobile screen - width 600px by height 400px
  • No acronyms
  • Avoid prominently displayed brands
  • Department logos are acceptable
  • Take into consideration color contrast
  • A good technique to find the size of an image is to find what image looks best on the page, see the size in Cascade, then make all other images that size. Screencast on finding the image size in Cascade.

Site maintainers do not have access to change the banner image displayed on the homepage. Contact Web Services for support.

Chico State alumni association website's banner, with collage of Chico State alumni

Image Best 

When searching for images in a search engine, best practice is only using images "Labeled for reuse".
example of using images labeled for reuse using Google Images
Example of images labeled for reuse using Google Images

Resources

Was this helpful?
100% helpful - 3 reviews

Details

Article ID: 39405
Created
Fri 9/22/17 8:38 AM
Modified
Fri 5/14/21 3:41 PM