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 tinted 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 resolution

As noted above, the overall pixel count is more important that pixel density. Ideally your image should have at least the number of pixels needed to display at the largest size it will appear on your site, and not much more. Stanford Sites has tools that will resize your image automatically for loading on smaller devices. 

Number of images

Large numbers of images on your pages can result in reduced page performance. Stanford Sites employs lazy loading to improve performance, but it is still worth paying attention to your overall page load time. Consider breaking up pages with many large images into separate pages, if possible.

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

Avoid duplicate file names, even if the file extension is different, for example, DogAtBeach.png and DogAtBeach.jpg.

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, 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 resized to fit within the content well. You also can 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. 

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. It does not center the crop on the focal point, it merely tries to ensure that the focal point is preserved. 

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:

Edit images for use with Banner and Card Paragraphs

The Banner and the Card paragraphs have 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 in the image dimension information listed above. 

For example, if you had an image that you wanted to use for a card that was 1600 x 1200, and you wanted to control how this appeared in the card, you could crop it. In this case, you could retain the width (1600 pixels) and crop the height down to 800 pixels, which would give you a 2:1 ratio.

Image editing resources

If you need to crop, resize, or compress your images, you can consider these free tools.

Preview. This comes on all Apple computers. It is great for cropping, resizing, and other basic image editing tasks.

Photos. This comes on all Windows 10+ computers. compression services. It can be used for for cropping, resizing, and other basic image editing tasks.

Compressor.io. This is a free image compression site. 

Gimp. This is a cross-platform image editing tool which will allow you to do both basic photo editing and more sophisticated image manipulation.