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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Faculty directory portraits, as well as certain shared content types, have specific size requirements. Please follow these dimensions: