Adding Images

Note: Images should be jpg, gif, or png files. While you may use them at their original size, they are best saved at the final size that you would like them to display on the Web site. In general, jpg files are best for photographic images, while the gif and png format is best for flat color images like logos.

To add a new image to a page on the Web site, make sure you have saved it at the proper size and in the correct file format before you proceed through the steps below. There is often a recommended width for an image in the main content area of the site. It is usually best not to upload images wider than the content area of your site's pages. We recommend the image size 675 x 325 pixels when using images at the top of the body field.

Within the content editing screen, click the Image icon.  

Note: On older websites an “Image Properties” window will appear at this step. Click on the Browse Server button to upload the image.

A “File Manager” window will appear. Click the Upload button at the top to add the image. The new file will be added to the list of files in the ‘Name’ column of the table. It will be highlighted by default. Click the Select button at the top of the table to add it to your site or double-click the file. If the image is already on the site, choose the file from the column that says “Name” and click Select.

Screenshot of the File Manager

Once the image is added to the body, right click on the image and select Image Properties.

Alternative Text field: filling out this field ensures that users who browse the Web with alternative technologies like screen readers will have the image verbally described to them.

University of Pittsburgh images can be found in Photos to Downloads.

Standards to Follow

You will be required to adhere to the rules, guidelines, and best practices and conform to the W3 standards for accessibility.

Do not embed text in images

While it is true short phrases may be included in an alt tags, text content should not be embedded into images. Alt tags should only be used for captions or a short description of the image. This will cause several problems:

  • Not accessible/ADA compliant.
  • Does not scale to mobile devices.
  • Undermines the site’s graphic theme and reduces the overall usability, professionalism, and quality of the user experience.
Include comfortable margins around inline images

Images embedded into the body of a page should have ample white space and not appear close to text or other page elements.

Images should be optimized for display on the Web

Many online resources cover image optimization. Images that are too large will load very slowly, and may hurt your page search engine rankings. Images that are too small will render very poorly on the screen.

Images should be properly cropped and resized

Attention to resizing and cropping will significantly impact the effectiveness of your image. Photos on the Web are relatively low resolution. The following tips will help you get the most effective presentation:

  • Only include one or two faces. Do not attempt to include multiple people in a photo that may only be 80-250px wide. Even with larger images, be careful not to post an image where features of subjects are blurry. This tip doesn’t apply to images of very large groups or crowds where there is no expectation to make out individual features.
  • Use a relatively tight crop. It may seem unnatural to crop a person this way, but since you only have so many pixels to work with, the features will display more clearly and expressive and less blurry.
  • Avoid busy backgrounds and clothing patterns, when possible. This visual noise lessens the impact and clarity of the image.
Be mindful of how the image works with other elements on the page

Images must compliment other elements on the page. They must work within the intended page layout and overall graphic theme.