Images on Web Pages
Proper Use of Images on Web Pages
- One large picture is better than several small ones.
- If you use more than one image, it's usually better to have one dominate, either by size or apparent size (ie, a close-up draws more instant attention than a wider shot).
- The higher the level of the page in the hierarchy, the more important it is to include an image. Top-level pages should have pictures.
- Size: Images that float left or right in the copy should be between 340 and 400 pixels wide. Images that fill the entire width should be 870 pixels wide.
- Don't add any borders to images. Our style is borderless.
- Accessibility: Add Alt tags and descriptions.
- If you are able (with the right software and skills), sizing images precisely in an image editor before uploading them to the site will yield the best quality display.
Special Images for the Western Website
Our western.edu design uses some basic image elements throughout the site. It‘s very important to adhere to these size requirements if you want to add to your page‘s design (all dimensions are width x height):
- Featured news images — 2,000 pixels x 470 pixels (for hero images, front page headline news).
- Program and department header images — 870 pixels x 390 pixels.
- Basic page header images — 870 pixels x 390 pixels.
- Slide show images — 870 pixels wide, with consistent height (all images in the show should be the same height).
- Footer images — 2,000 pixels x 380 pixels (each of these images must be assigned to department or program by the web manager).
- People (staff and faculty directory) images — minimum 640 x 800 pixels.
- Profiles (faculty, students, alumni, etc.) — ideal size seems to be 800 x 475 pixels, so they read reliably on both their own pages and the little profile boxes that appear throughout the site.
- Inline images (inserted in body of web pages) — Choose "Image Preview" size, or keep your images to approximately 350 pixels wide, unless you want the image to span the entire body; then make images 870 pixels wide.
This images is "preview size" and would work well when inserted into the body of a document.
This image is set on "Image Large." Although it is not too big, per se, if you try to wrap text around it, it may appear too narrow to read easily and look rather weird.
If you are inserting images into copy on your web pages, keep the pictures 300 to 400 pixels wide.
You can change your image settings by double-clicking the picture within the body while you are editing your page. In the resulting dialog, you can then change the size, and add alt text and title keywords to your image. Alt text and title keywords help people with screen readers, as well as helping search engines find your pages. While you're at it, you might consider adding a 5 pixels or so to your HSpace and VSpace to offset the copy a bit from your picture. We DO NOT use borders on pictures.
Need more pictures?
Western has a great Photo Library that is growing every day with approved, mostly professional, medium-high-resolution pictures. They depict various aspects of campus life, athletics, Gunnison Valley scenery, classroom interactions, field research and more. Downloads of these images require a current password. Please contact Greg Smith to obtain the password or if you can't find what you're looking for in the Photo Library. University Communications is also busy building a large offline library of imagery, past and present.