Caltech Logo
Caltech Sites
Caltech Sites  /  Content Management  /  Images

Images

The main thing to look for when choosing images for your web site is good composition and good lighting. Because our site template is fairly wide, we suggest uploading images that are 1500-2000px wide with a file size of less than 1.5 MB.

If you need images of campus or campus life, the Office of Strategic Communications maintains a collection in their Flickr account. The public side of this account is mainly commencement and some stock images of buildings, so if you'd like access to the full collection, please send your email address or Flickr account name to flickr@caltech.edu and ask to be invited to connect to our account.

Managing Images

All the images on your site can be managed from the "Images" link on the admin sidebar.

Image listing page

NOTE: Edit the title and alt fields to include words you can use to search for them later. Or you can place images (and documents) into collections to make them easier to locate.

Adding Images

To add a new image, click on the "Add An Image" button in upper right corner of the admin interface. This will take you to a page that will allow you to choose one or more images from your computer. You can also drag and drop images onto the box at the top of the form. The Title, File, and Alt fields are required, so before you can use the uploaded images, you will need to add a description of the image that can be used by screen readers. For tips on how to write good alt text, please read "Writing Useful Alt Text".

Some of our image display styles allow you to show an optional caption and photo credit, so please fill in those fields if you have that information.

WARNING: Changing the file will change it on all pages that use the image.

Editing Images

To edit an image, search for it using the search box at the top of the images page. The search service matches against words in the title and tags. Once you see the image you want, click on it and you will be taken to an edit form that looks like the one below.

When editing an image, you can replace the file associated with that image record. This allows you to update images without having to update the pages on which they are placed.

Focal point

If the most interesting part of your image is not in the center, you may want to set a 'focal point'. This will tell the system's automatic cropping mechanism which part of the image you want to always be visible. For example, in the image below, we have set the focal point/region to include the person's face, so that any time we need a smaller version of this image, the crop will include the face and not just the man's jacket and tie.

Image editing interface

Animated GIFs

Caltech Sites supports animated GIFs, but there are some limitations on their use, as they can be very finicky in our system.

Generally, you'll want to minimize the complexity of the animated GIFs you'd like to use on your site, which can be done in a variety of ways:

  1. Reduce framerate. If your GIF can get its message across with 8-10 frames per second, instead of 24 (the typical framerate for films, which GIFs are often created at by default), it'll be much easier for Caltech SItes's software to create renditions of that GIF for display on your site.
  2. Reduce resolution. A 640x480 pixel GIF has four times as many pixels as a 320x240 GIF. If your GIF works for your needs at 320x240, uploading it at that resolution is usually ideal.
  3. Use "coalesced mode", which simplifies the GIF's internal structure by sacrificing file size. Coalesced GIFs are much more likely to function properly on Caltech SItes.