Web Idea Center
Search    

What's New | IT Help Center | UD Home | Comment  
Home How to Images and Templates Read More Get Help

paper Images & Templates
    IMAGE & LOGO LIBRARY > UD STANDARDS & GUIDELINES ON GRAPHICS > PRINCIPLES OF WEB GRAPHIC DESIGN

PRINCIPLES OF WEB GRAPHIC DESIGN
File formats

There are currently two graphic file formats that most browsers recognize: GIF and JPEG. Many browsers also accept the PNG graphic file format. (Descriptions from the Web Style Guide)

Color

Each computing platform (Mac, Windows, UNIX system, etc.) and each type of browser displays colors differently. An image you prepare to look a specific way on your own monitor will most likely not look the same on someone else's.

Size

One of the most important considerations when using graphics is the trade-off between loading time and the number and size of graphics on your page. Every image on your page increases the loading time, and viewers are often unwilling to wait for a slow-loading page.

  • Loading time (Description from the Web Style Guide)
  • Physical size:

    Most computer monitors have a display resolution of 72 pixels per inch. Even if you work on your image at a higher resolution, once you have completed editing it, you will convert the image to 72 ppi before saving it as a GIF file.

    An image for the web should be no larger than 560 pixels wide by 410 pixels high and no greater than 50 KB.

    Limit the use of large graphics and the total number of graphics on a page. Graphics add to download time, so make sure that each graphic that you use contributes to the content of your page.

  • Resolution
Type

To customize your page, you may decide to create graphics using more elaborate type styles than are readily available using basic HTML code. The important issue is legibility.

You can create graphics using type, instead of relying solely on HTML type and the restrictions it currently imposes. Below are examples of graphic treatments of type. Choose your typeface carefully and be aware that some typefaces are more legible than others. What is legible at a larger size will not necessarily work at a smaller size.

Copyright

You must be aware of copyright issues, especially when using images, such as stock art or scanned photographs, from other sources.


University of Delaware