Images

Images are an important way to add visual interest or information to your website. This guide covers how to add images to your media library as well as other general information about using images on Stanford Sites.

Throughout this guide, all dimensions are noted in pixels and are width by height.

How to add an image to specific paragraph types is covered in the guide to each paragraph. See Related Topics at the end of this page for other relevant information.

Site manager responsibilities 

Before uploading images like photographs or graphics, please review the university's usage and accessibility tips, to ensure that your images comply with these policies. As a Site Manager, you are responsible for ensuring that you have permission to use all images added to your website.

Best practices for images

Having images that are large enough to look sharp on all screen sizes, but small enough to be served quickly to the user, is an important balance to maintain.

• Image size. The maximum size in pixels should be no larger than ~3300px wide.
• File size. The maximum file size should be no larger than 2 Mb.
• Color mode. The color mode should be RGB. Other color modes may result in images that look muddy or have a color tint appearance.
• DPI (dots per inch) or PPI (pixels per inch) This is not an important setting for web images, but if you wish to see the true "size" of an image on your screen, set this to 72 PPI.

Image naming conventions

Maintaining a library of images of various sizes can be tricky. Using a naming convention for images will help. Consider using a convention that combines a descriptive image file name and its dimensions, such as: 

<name>-<widthxheight>.<filetype>

For example:

DogAtBeach-1760x520.png

Filename characters to avoid

Best practice for image names is to avoid characters that interfere with the functionality of the site. This includes characters such as:

• asterisk *
• ampersand &
• forward slash /
• backward slash \
• space " "

Here's a full list of characters to avoid.

Common image sizes on Stanford Sites

If you wish to add an image at the size/aspect ratio of your original image. Please use a Text Area Paragraph to add the image to your page. For all other options, see sizes below:

Top Banner and Banner

• Aspect ratio: 30:11
• Recommended size: 3000px x 1100px 

Card images, Media with Caption, and News Featured Media

• Aspect ratio: 2:1
• Recommended size: 2000px x 1000px

Images in a Text Area

Upon upload, your image will display uncropped and will only be resized to fit within the content well. You can also choose to resize images in your text area to some other default sizes, which are listed in Working with images and other media in a text area. 

Upload an image to your media library

Important note: all images must have unique names, even if the file extension (.jpg, .png) is different.

1. Go to All Content > All Media > Add Media > Image. The Add Image page will open:

1. Enter a name for your image in the Name field. This defaults to the filename, but it can be anything that is descriptive and helpful for finding the image later.
2. Select Choose File. A popup will appear. Select the image you would like to upload from your computer drive.
3. After you upload the image, leave the Decorative Image box checked unless your image is of text or conveys important information not otherwise described in text on the page. If the image does contain text or important information, uncheck Decorative Image and add alternative text.
4. Select the focal point of the image by moving the plus symbol around on the image. This will ensure that the most important part of the image is preserved if the image is cropped. 

1. Click Save.

Image focal point

Focal points are used any time an image is cropped to ensure that the center of interest or activity stays in the final image. To set or re-set the focal point for an image:

• Go to All Content > All Media.
• Find the image you wish to adjust.
• Choose Edit from the options on the right side of the screen.

Focal point in action

When the focal point is set to the bottom and the image is used within a card:

When the focal point is set to the top and the image is used within a card:

Creating images for use with Banner and Card Paragraphs

Content elements that include an image, like the Banner and the Card, come with set image sizes. To have control over the appearance of these images (and avoid unintended cropping) crop your image to the exact dimensions or aspect ratio for the Paragraph's display. 

Top Banner and Banner

Aspect ratio: 30:11

3000px x 1100px recommended source size (72 DPI)  

Card Images (including Media with Caption)

Aspect Ratio: 2:1

2000px x1000px recommended source size (72 DPI)  

Image Resizing Resources

• Photo editor software
  • Photoshop
  • Illustrator
  • Preview (available on Mac)
• Photo compression services
  • Compressor.io

Filename characters to avoid

Best practices for image names is to avoid characters that might interfere with functionality of the site. This includes characters such as asterisk *, ampersand &, forward slash /, backward slash \, space " ", and more. Here's a full list of characters to avoid.

Bulk upload images

You can upload several images at one time with a bulk upload.

1. Go to All Content > All Media > Add Media
   
2. Click on Upload File(s). This will bring up the Upload File(s) page.
3. Here you can either:
   • Click on Select files and select the files to upload from your computer, or
   • On your computer, select the files to upload and drag them to the Upload File(s) page.
   • You can only upload in batches of 50 or fewer. You may not bulk upload any files over 2 Mb.
4. Click Upload.
5. Once complete, you will be presented with options for adding metadata to all uploaded files. Update the names of the files to make them easier to find in the media library. If alternative text is needed, uncheck Decorative Image and add the necessary alternative text.
6. Click Save.