Style Guidebook: Images

How we use images in our communications helps us to tell a story of who we are, what we represent, and who we want to be. 

Printed Images versus the web

Using images on the web comes down to aesthetic and technical realities that often do not exist in print design. Where a printed page remains the same all the time, web pages are radically different. One person might be looking at the website on a tiny phone, another on a huge desktop monitor. 

Web images have to be the correct format, size, resolution, and even colors to make sure they are presented in the most consistent and professional way. 

Logos and Marks

Our logo, signature, and mark standards are based on those in the University’s Style Guide, and all usage must adhere to these brand guidelines. More information on University brand standards is available here.

Walter Scott, Jr. College of EngineeringCOLLEGE AND ACADEMIC UNIT MARKS

Signature files are available for the Walter Scott, Jr. College of Engineering, as well as for the following units:

  • Department of Atmospheric Science
  • Department of Chemical and Biological Engineering
  • Department of Civil and Environmental Engineering
  • Department of Electrical and Computer Engineering
  • Department of Mechanical Engineering
  • School of Biomedical Engineering

If you need any of these signature files, please contact Jessica Cox at jessica.cox@colostate.edu.

Guidelines for using images

Quick Reference Chart

Photograph

Full photography or images with many colors

  • JPG file format
  • RGB Color
  • Compression: 60%-70% of original without artifacts
  • Progressive & Optimized format
  • Within content: max. 800 px, 500 kb
  • Small thumbnails or icons: max. 300 px, 100 kb
  • Wide headers: max. 1600 px, 2 mb

Solid Shapes & Logos

Images with less than 256 colors or images that require transparency; logos, design shapes and accents

  • PNG file format
  • RGB Color
  • Within content: max. 800 px, 500 kb
  • Small thumbnails or icons: max. 300 px, 50 kb
The Walter Scott, Jr. College of Engineering holds its 2017 All-College Meeting. November 14, 2017. Photo Copyright 2017 John Eisele/Colorado State University Photography
The Walter Scott, Jr. College of Engineering holds its 2017 All-College Meeting. November 14, 2017. Photo © Copyright 2017 John Eisele/Colorado State University Photography

Using images is a great way to bring attention to a content area, especially an area that features a lot of text. But there are pros and cons to using images, and making the best choice adds consistency and credibility to our website.

  • All images must conform to our content guidelines.
  • Copyrighted images:
    • All images must be fully sourced, typically from Colorado State University photographers or departments. 
    • All images should be either free of copyright, or written permission from the owner to use them has been obtained.
    • Images found through a Google search are not usually free to use. Any images found online must have written permission and be used with full attribution according to any licenses.
    • Images must include alt tags that include relevant information such as the copyright owner and accessibility information.
  • Image quality:
    • Images should be relevant to the text and other content around it.
    • Designs can often replace an image, for visual aesthetic or usability. 
    • Using photos of local content, and our own students and staff, is more relevant than clipart or stock photography.
    • Images should be sharp, clear, and have no pixelation from overcompression or resizing.
    • Images should be balanced well for color and contrast. They should not be too bright or too dark.
PIXEL SAMPLE

YES!

NO!

Spring 2018 Engineering Career Fair

Web File Formats

File formats for the web are limited to only a handful, to make sure that the majority of web browsers and email applications can read them. Print formats, such as TIFF or EPS, are not suitable for web use.

  • JPG: The most common image format, used for photos and more complex images. JPG files can be compressed to save space. However, overcompression can cause visual issues such as pixelation because the format deletes compressed information.
  • PNG: PNG files are normally used for logos and simpler images, with some compression. PNG files can also use transparency, like GIF files.
  • SVG: SVG files are vector-based instead of bitmap-based like the other three. SVG files tend to be smaller, have transparency, and can be resized on the fly. Note: SVG files often do not render correctly in the WordPress admin.
  • GIF: GIF files were commonly used for transparency, and a limited color range, but have been largely replaced by PNG files. GIFs are now commonly used for animation, which can produce large files

Web Image Resolution

Resolution is defined as how many pixels an image is made up of. For example, a 10 megapixel image, common among camera phones, gives an image that is 3872 pixels x 2592 pixels. That’s larger than most desktop computer monitors, the typical of which is a 27″ monitor at 1920 pixels by 1080 pixels.

That’s also far larger than what nearly any website needs, unless it is for a cropping effect. So, in this case, the resolution is far too high. But let’s say we resave that image to 150 pixels by 150 pixels. If we expand that smaller thumbnail to full screen, to show a photo of the Grand Canyon, there’s little chance we would be able to see the river.

When using images on the web, consider how it will be used. Websites can be virtually any size, so keep in mind how an image may move around within a design.

Web File Size

Just like resolution, using the correct file size is important for visitors. File size refers to the amount of space the file itself takes up on the server, such as 7KB or 23MB. 

Most files should be kept as small as possible, so that they are easier and faster to download. A web browser will display an image with a small file size much faster than one with a huge file size in the megabytes. 

The top “good” photo at right is 21KB, a small file that loads very quickly on nearly all connections. Imagine loading the lower pixelated image on a phone, and it ended up being 30MB. That’s closer to a full video movie trailer instead of a simple cover image, and can lead to a visitor abandoning our website before it loads.

A note on JPEG compression: Jpg files can usually be saved at medium-high compression percentages (in Adobe Photoshop 60%-70%) to compress well, but not introduce pixelization.

Strategic-Plan-Cover-Image-PDF-Small-241x313

Good size

Originally 241 pixels x 313 pixels

strategicplan-pixelated

Wrong size, pixelated

Blown up from 24 pixels x 31 pixels to fit the same size

Using Icons

Icons are similar to the images we use throughout the site, but are SVG files from a common set. They are used to bring attention to a specific content area, or visually hint to a visitor what the content is about. 

We use a common icon set called Font Awesome throughout our site. The Font Awesome catalog is extensive, freely available for any use, and allows us to feature a consistent style of icons across our web platforms. 

  • All icons used on our platforms must conform to our brand standards, including color choices.
  • Icons should be properly sized for the design they are in, and should neither be too small to see nor too large that they interfere with content.
  • Icons should be treated as a visual indicator of importance or information, and not simply added as extra clipart.
  • If you require a different icon or set of icons, please contact us first to determine the best course of action.