Web Images

Image preparation

Adobe Photoshop is the recommended software for image preparation. For the Web, image size is expressed in pixels, not inches. Web images are typically saved at 72 dpi, but dots-per-inch is relevant only for print, not the Web. Increasing or decreasing the dots-per-inch of a 225 x 150 pixel image will not change the file size or resolution.

All rectangular photographic images should have a one-pixel black border. Irregularly shaped images and image art generally should not have a border. Do not incorporate the one-pixel border in the image. Both the WMU content management system and the current Dreamweaver template will automatically add the border, and there is a "no border" option in both.

Zoom in! When selecting and preparing photographic images and especially when creating logos, buttons and other graphic designs, be mindful of how the image will look on a smartphone or other small display. Tightly cropped images are more compelling and bring energy to the page. A tightly cropped image of two students cheering at a football game has energy and personality and tells a story. A crowd shot is just a photo of a bunch of people.

Alternate text <alt="Description of image."> is required for all images for blind and low-vision readers. Alt tags should describe the image, such as, "Photo of WMU student at Bronco Bash." They should not be used as a caption, "Bronco Bash is Sept. 7 in Fountain Plaza." The alt tag should include any text in image art. The presence of a photo caption does not eliminate the requirement of alternate text.

Images may be saved in the following file types: jpeg or jpg (preferred for photographic images); gif (commonly used for image art); png (preferred over gif for image art). In Photoshop, use "Save for Web and Devices," especially for larger jpeg files.

Image sizes

Column 1 - No images

Column 2

Standard sizes are recommended (1) to promote a consistent appearance, just as in print publications; (2) to promote ease of changing images without altering page layout; and (3) to facilitate automatic resizing of images in the WMU Content Management System.

Billboard images

Images for slideshows and other full-width images, referred to as "billboard" size in WMU CMS, should be 16:9 aspect ratio, which is full screen on most devices and monitors.

For WMU CMS, billboard images should be uploaded at the highest resolution available between 560 x 315 pixels (minimum) and 1920 x 1080 pixels (maximum). The latter is HDTV resolution. The CMS will render the image at the resolution needed.

For Dreamweaver, billboard images should be 550 x 310 pixels. Save original image files so higher resolution files can uploaded when you move to WMU CMS.

Collage of standard size imagesStandard image sizes and aspect ratios

All of recommended sizes are standard aspect ratios for still photography and video. If you work to these sizes, images from a variety of sources will work in your layout.

Standard images sizes
Name Ratio Nominal CMS range
Billboard 16:9 550 x 310 560 x 315 to 1920 x 1080
Large 3:2 225 x 150 225 x 150 to 1620 x 1080
Spotlight 3:2 135 x 90 135 x 90 to 1620 x 1080
Medium 2:3 150 x 225 150 x 225 to 720 x 1080
Small 1:1 90 x 90 90 x 90 to 300 x 300
Portrait 2:3 150 x 225 150 x 225 to 720 x 1080
Thumbnail 3:4 69 x 92 69 x 92 to 225 x 300
Slides 16:9 550 x 310 560 x 315 to 1920 x 1080

In WMU CMS, image size is constrained by width. (You can do the same thing in Dreamweaver, set width="xxx" in the img src code.) A "medium" image will be constrained (or stretched) to 150 pixels wide. Standard sizes are 150 x 225 (2:3), but you can use any size image, and the height will scale proportionately. Images can also be uploaded in column two at "original" size, but as previously noted, it is preferable to use standard sizes whenever possible.

Standard medium images and spotlights are both 3:2 aspect ratio, which means the same images cropped to 3:2 used for one can be used for other, provided the image is saved to a large enough size.

"Portrait," Thumbnail" and "Slide" are specific images sizes and are constrained by both height and width. Portraits are the same dimensions as a standard medium image. Slides are the same dimensions as a standard billboard. Portraits and thumbnails are used in directory pages; slides are used in slideshows.

Nonstandard image sizes

Anytime the image cannot be cropped to 3:2, 2:3 or 1:1, you may use a nonstandard size. Common examples:

  • Image of a book or magazine cover
  • Some logos
  • Poster art

Slideshows

In WMU CMS, slideshow images are billboard size and should be uploaded at the highest resolution available up to 1920 x 1080.

Individual billboard (full-width column two) images are constrained by width and can be inserted anywhere in column two, which is also true of large, medium and small images. Slideshow images—slides—are constrained by both height and width, and the slideshow can only be inserted directly below the h1 head at the top of column two. If you upload an image that is not 16:9, the CMS will arbitrarily crop the image to the largest 16:9 size possible.

Slideshows are limited to a maximum of five slides, and slides can be linked to additional information.

In CMS, real text can be added to each slide, which is highly preferential to embedding text in the image because it will scale depending on the device and remain legible on the smallest display. The CMS uses white text on a transparent black background for real-text captions, and positions them across the bottom of the image. CMS does allow for a slide title as well as regular caption text. If used, the title displays at a slightly larger font. Both the slide title and caption should be written in news case—capitalize only the first word and proper nouns.

Slideshows are only impressive if the individual slides are impressive. Every home page does not need to have a slideshow, every slideshow does not need to have five slides, and if you don't have good, compelling photographs that tell a story relevant to the purpose of the page, don't do a slideshow.

Go to page content for more information about column two recommendations and requirements.

Directory pages

Portraits are used on individual directory pages. Thumbnails are used on department directory pages and should be a tightly cropped headshot from the same photo as the portrait. Portraits are the same aspect ratio and size as standard medium images. In WMU CMS, a medium image is constrained by width only; a portrait is constrained by both width and height. Thumbnails are also constrained by both width and height.

Go to directory pages for more information about directory image requirements.

Column 3 - Spotlight images

Images can be up to 135 pixels wide by any height. The standard is 135 x 90 (3:2) and is recommended. By designing to the standard, spotlights from a variety of sources can be used and shared readily. Spotlights can be photographic images or graphic designs.

Photographic images, especially photos of people, are generally more appealing than logos. When designing image art, such as logos and buttons, keep it simple and use text sparingly.

The table above offers recommended sizes for saving standard spotlight images. For WMU CMS, images should be uploaded at the highest resolution available, up to the maximum listed above. The CMS will render the image at the resolution needed by the device. For Dreamweaver, images should be uploaded at size (135 x 90), but save all original image files, so higher resolution images can be uploaded in WMU CMS.

Go to spotlights for more information about column three and spotlights.