Images and Graphics

Most sites on the web today use images or graphics. The two terms are generally interchangeable in a web context. (Sometimes a distinction is drawn between photographic "images" and line-art "graphics." We use the terms interchangeably.) The most important principles for images/graphics on EMU web sites are that they should be relevant, professional, optimized for the web, and legal.

The principles and guidelines here deal primarily with static images, but the same principles generally apply to images in flash animations, video clips and other multimedia presentations.

General graphics principles | EMU graphics standards | Image dimensions and proportions (size) | Getting Help & Using the EMU Image Gallery

General graphics principles

• Professionalism and presentation are important. The way your graphics are designed and presented is a reflection not only on your web site and its information and resources, but also on the entity your site represents (your program or college at EMU). If you do not have experience with professional design, we recommend that you obtain assistance from someone who does.
• Relevance is important. The graphics on your site should be directly and obviously related to your site's content.
• Legality is critical. Site developers must know, understand and comply with the rules of copyright for images on the web, as well as in print. The easy availability of images on the web, along with the anonymity of the web, can create complacency about image ownership and copyright. As a general rule, if you don't know who owns an image, or if you have not been granted express permission to use an image, DO NOT USE that image. Understand that at EMU, web site developers, as well as the directors who authorize site development, bear express and personal responsibility for all content of their sites. Site developers/directors also bear liability for any breach of copyright in all site content, including text, images and auxiliary site features.
• An important corollary to legality is ethics in the use of images and site content. EMU is committed to ethical web development. If you have ANY questions about the origin, alteration, use or development of the content on your site, please contact the director of Web Communications for consultation.
• Understand the regulations for using EMU logos and wordmarks on your web site.
• If you require assistance choosing, obtaining, or using images on your web site, contact the director of Web Communications for suggestions. You may also refer to the online image gallery (which is under continued development) if you would like to use existing EMU images on your site.

EMU graphics standards

• Keep all graphics for each site together in the images folder. The link paths in your site should be relative (i.e. "images/graphic.jpg" or "../images/graphic.gif," etc.).
• Use good syntax for naming images: lowercase letters, no spaces or extraneous characters except the "_" character, short and descriptive file names.
• Avoid using background images (sometimes called background gifs or tiling backgrounds). They are often distracting, and rarely add to the professionalism of a site's appearance.
• Avoid flashing or "animated" gifs. With rare exceptions, these icons do not add to the professionalism of a web page/site.
• Avoid using cute or whimsical "clip art." Graphics should be professionally produced and presented.
• Pay attention to colors. Your colors should work well together, and should complement the site's images and content. While you are not required to use the web-safe color palette, we do recommend that you optimize your colors for the web. The web-safe palette provides a good way to do this.
• Use .gif and .jpg images appropriately for the types of images on your site. While some browsers can read .png and .wbmp images, it is not a good idea to use these formats on your site. We recommend that you save your high-resolution original images in an image editing program, and create 72 dpi JPGs or GIFs for web use. (A note on image formats: For the most effective use of the relative compression algorithms, JPG is usually used for photographic images, and GIF is usually used for graphics with larger areas of common color. It is important to note that JPG does not support transparency, so if you want a transparent image, it will need to be a GIF. You can simulate transparency on a JPG by setting it on a background identical to the background color on a web page.)
• Optimize your graphics for small file sizes. Your entire web page should load in about 8 seconds at 56k. Full-featured image editing programs (such as Photoshop) provide tools for image optimization. These include reducing the color palette, creating slices, and increasing image compression. Be careful that your selections for image optimization do not degrade image viewing quality.
• Always use "alt tags" for images, as a component of accessibility.
• All EMU logos, wordmarks and symbols are trademarked and copyrighted by EMU. Further information and regulations governing their use are here.

Image dimensions and proportions (size)

Do not resize images in browsers; this degrades image viewing quality. Resize your images in an image editing program such as Photoshop, then specify each image size at its actual pixel dimensions (width and height) for the browser.

Each image should be presented at 100% of its original proportions. Do not stretch or squish images to fit a particular area of your web pages. If you need an image at different proportions than your original image, either crop the image to fit the space at 100% proportions, or select an alternative image that better fits your web page.

In addition to using 100% dimensions and proportions for your images, please make sure that your images are prepared at 72 dpi in your image editing program. Browsers have to "interpret" images at other sizes, and the results are undesirable.

Finally, larger images are not necessarily better--in fact, they often distract from the professionalism and usability of your site. Remember that people use browsers of different sizes, so a 4x6 image on your browser may take up most of someone else's screen.

Getting help & using the EMU image gallery

If you do not have experience with creating and editing images for the web, we recommend that you obtain assistance from someone who does. You may also consider attending one of the ICT workshops on this topic, such as "Photoshop Elements: Editing Digital Images." Workshop materials for this course are also available online.

In addition, EMU does provide a gallery of images online for official web development at EMU. These images may or may not suit your needs; we will be adding images to this gallery over time. PLEASE NOTE that all images in the gallery are permitted for use on official EMU web sites only.

Questions about this site should be referred to the director of Web Communications.