Image Guidelines

Image Dimensions

Western Communications has created instructional guides to help the campus web community incorporate art work in the new Cascade templates. These guides and dimensions are applicable to the 2017 templates' design.

Please ensure that none of your images are greater than 1 MB.

* a more detailed version of image dimensions could be found in the image guide

Image Type Pixel Dimensions(Width x Height)
Homepage Banner/Slides 1920 x 600
Homepage Banner/Slides - Mobile 500 x 500
Lower-Level Page Banner 880 x 300
Full-Page Banner 1170 x Optional Height (350 recommended)
"Connect With Us" 265 x Optional Height (per column)
2-Column 415 x Optional Height
3-Column 272 x Optional Height
Image Slider 245 x 180
Right Sidebar 245 x Optional Height
Faculty/Staff Directory 160 x 180

 

Video Type Pixel Dimensions(Width x Height)
Homepage Banner/Slides 1920 x 600 (6 seconds, <5MB, no audio)
Homepage Banner/Slides - Mobile 500 x 500 (6 seconds, <5MB, no audio)

Image Guides

  • Image Dimensions Guide (PDF, 8.2kb.  Version 2. June 2, 2017)
    The guide provides dimension standards for images used on Cascade websites, with the templates updated in 2017.

  • Image Optimization Guide (PDF, 326kb. Version 2. June 2, 2017)
    A guide to optimizing images for the web.

Hero Banner Template

Download the Photoshop Hero Banner template (PSD, 135mb)

 

 Social Media Pack

Useful Optimization Tools

Optimization in Photoshop

You can also optimize images using Adobe Photoshop. To do this:

  1. Open your image in Photoshop
  2. Under the File tab, click Save for Web
  3. Select your image format (See Selecting the Correct File Format)
  4. Adjust setting to reduce file size (Shown in bottom left corner):
    1. For GIF and PNG-8: Try unchecking “Interlaced”, reducing number of colours, reducing dither percentage, adjusting colour reduction algorithm (Perceptual or selective usually reduce file size the most). There are a lot of options here – play around and see what gives you the best quality and size
    2. For JPEG: Adjust quality percentage as desired. Set Metadata to none
    3. For PNG-24: This file format doesn’t have any useful compression options. Avoid it if you can
  5. Once you’re finished, save the file. Try to use a different name so you don’t accidentally overwrite the original and you know which file is compressed and which is not

Tiny PNG

  • Can bulk upload images using drag and drop
  • Images can be downloaded to computer or straight to Dropbox
  • Maintains a good quality versus size balance

When to use?
Tiny PNG should be your go-to image compressor. For the majority of projects and images, Tiny PNG will get the job done by decreasing size while maintaining quality.

Compressor.io

  • Allows you to choose between lossy and lossless compression
  • Lossless compression is limited to JPG and PNG images and file savings are typically very small

When to use?
Compressor should be used if you have to often switch between lossy and lossless compression. Keep in mind the essential balance/trade-off between quality and size.

JPEG Optimizer

  • Unrivaled for decreasing file size, but the compressed image’s quality is much lower than the original's

When to use?
Use JPEG Optimizer when the quality of the image is not a priority (e.g. if image will be sized very small on the webpage).

Optimizilla

  • Allows you to upload up to 20 images at a time which can be downloaded as a ZIP file

When to use?
Optimizilla is ideal when you need to compress a bulk of images at once.

Resize Photos

  • Includes a resizing feature. This will allow you to compress pictures and resize it at the same time

When to use?
Use Resize Photos when you want to both compress and change the size of a picture.

 

Image with Captions

This class allows users to add captions to the photo, keeping the visual appearance of the design consistent with the other pages and can be easily edited in Cascade. It is read as text by search engines and enhances search engine optimization for the site. This class is commonly used on the homepage for smaller graphic elements, but can also be used throughout the site.

Adding Photo Credits 

Photo credits can be added to the caption using the following lines of code: 

<div class="caption-wrapper"> 

<p class="credit">Photo taken by: First Last</p>

<p class ="photodescription">add photo caption</p> 

</div>