Adding and Editing Images

Images make a big impression. Care should be taken to ensure that they are formatted and sized properly. As a general rule, images should be uploaded in JPEG format, resized to manageable dimensions, and kept at the smallest file size possible. If an image is a portrait or a part of shared content, exact dimensions may be necessary.

While it is possible to upload an image and use the WYSIWIG editor to scale it, this is not advised. Though the image will show up at a smaller size, the page must still load the full size image. In order to reduce loading time and improve image quality, resize images before uploading them to your website.

Resizing Images

Images used in the body of pages should be a manageable size. As a general guide, keep width under 400 pixels and file size under 25kb. This will help users with slower browsers load all images quickly.

Quick Resize without Photoshop

Many image resizing tools are free and easily accessible. Google “image resizing,” or try a website such as www.resize.it or www.shrinkpictures.com.

Resizing Images with Photoshop

If Photoshop is available, it can be used for a much crisper resize. Open Photoshop and go to File -- Open to locate your image. Once your image is open, go to Image -- Image Size. Choose either an exact pixel size or percentage of the original.

To save the resized image, go to File -- Save for Web & Devices. This will ensure the highest quality with the lowest file size. Select JPEG. Quality can drop to about 70-80 with no noticeable difference in the image. Once these settings are selected, click the Save button below.

Cropping Images

Portraits may need to be cropped – often in combination with a resize.

In general, crops of faces should be neither too far nor too close. Aim to keep some of the photo’s background – this will maintain an appropriate distance.

Quick Crop without Photoshop

Once again, many free tools are available online. Google “image crop,” or try a website such as www.resize.it. If you need to crop a thumbnail or shared news image, Drupal's built-in tool can be used.

Cropping Images with Photoshop

Open Photoshop and go to File -- Open to locate your image. If necessary, resize first.

Click on the icon for the Crop Tool: Click on your image at the point you intend to become the new top left corner. Hold down and drag the resulting rectangle to what should be the bottom right corner. Once the mouse button is released, the rectangle can be dragged or resized by its corners. Press Enter to finish the crop. To save the cropped image, go to File -- Save for Web & Devices. This will ensure the highest quality with the lowest file size. Select JPEG. Quality can drop to about 70-80 with no noticeable difference in the image. Once these settings are selected, click the save button.

Adding Images to Pages

Once an image is properly resized and cropped, it should be ready for use on your Drupal website. Follow these guidelines to ensure accessibility and ease for all viewers.

Note that some pages will already have images in slideshows or features. Extra images on such pages may add clutter. Some pages may automatically format all images with styles and borders, or float them to the right or left. This is part of the site’s page design and cannot be changed in the WYSIWIG.

1. Upload your image through the WYSIWIG Editor.

Once you’ve found the page you’d like to edit, find an appropriate placement for the image. The best place is either immediately after a paragraph, or at the very bottom of the entire page. Do not begin a page with an image or break up corresponding headings and paragraphs.

Once your cursor is at the place you’d like the image, click the insert image icon:

Click Browse Server. In the new popup window, select Upload. This is identical to the earlier procedure for uploading a PDF. Click Browse once more, find your image, and then double click in the list to the right to select it.

2. Add alternative text.

This step is critical to ensure all content is accessible. Once you have uploaded your image, you will notice the field for Alternative Text. Alternative text, or alt text, is the caption displayed for those using screen reading software. Alt text should be a brief title, name, or description of the image’s contents.

Click OK to finish inserting your image.

Portraits and Proper Sizing

Faculty directory portraits, as well as certain shared content types, have specific size requirements. Please follow these dimensions:

• Faculty portraits: 177 x 222 pixels for portrait orientation
• Faculty portraits: 335 x 222 pixels for portrait orientation