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 by 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. The WMU content management system will automatically add the border and there is a "no border" option.
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, "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.
Standard sizes are recommended:
- To promote a consistent appearance, just as in print publications.
- To promote ease of changing images without altering page layout.
- To facilitate automatic resizing of images in the WMU Content Management System.
Images for slideshows should be 16:9 aspect ratio, which is full screen on most devices and monitors.
For WMU CMS, images should be uploaded at the highest resolution available between 640 by 480 pixels (minimum) and 3840 by 2160 pixels (maximum). The latter is HDTV resolution. The CMS will render the image at the resolution needed.
Standard 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.
|Large||3:2||225 by 150||225 by 150 to 1620 by 1080|
|Medium||2:3||150 by 225||150 by 225 to 720 by 1080|
|Small||1:1||90 by 90||90 by 90 to 300 by 300|
|Slides||16:9||640 by 480||640 by 480 to 3840 by 2160|
|Spotlight||3:2||135 by 90||135 by 90 to 1620 by 1080|
In WMU CMS, image size is constrained by width. A "medium" image will be constrained (or stretched) to 150 pixels wide. Standard sizes are 150 by 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.
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
In WMU CMS, slideshow images should be uploaded at the highest resolution available up to 3840 by 2160.
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.
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 by 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.
Go to spotlights for more information about column three and spotlights.