Image sizes for Campus pages

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
  • Images for person pages should be 600px width
  • Avoid .png format images
  • Image files must be named with no capital letters nor underscores, and the file name must end with the extension. For example, file-name.jpg or file-name.jpeg
  • Is best to size down than size up an image
  • No acronyms
  • Avoid prominently displayed brands
  • Department logos are acceptable
  • Take into consideration color contrast
  • Find the size of an image by editing the image in Cascade. Screencast on finding the image size in Cascade.
  • How to crop an image 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
Wed 6/8/22 8:48 AM