WWW Style Guide for SDSU - Use of Graphics
WWW Style Guide for SDSU - Use of Graphics
Most of the Graphical Based WWW Browsers can automatically display GIF (Graphical Interchange Format) images. Some Browsers can also display JPEG (Joint Photographic Experts Group) images. While JPEG images can contain more than the 256 colors that GIF files are limted to, and in many cases are considerably smaller in size, the image compression technique can reduce image quality. For the time being, GIF images should be used for compatibility purposes.
Use of Color Maps is also very important. Although many WWW
developers have displays that can show thousands or millions of colors,
many end users of information can display far fewer colors (black/white,
16-color, 256-color.) On screens that can not display the number of colors
that are needed, color substitution and/or dithering is used to achieve the best
image possible. Every image on a screen puts a demand on the color map.
If the colors demanded by the display (many of which are defined long before
the end-user may start, or before an user starts a WWW browser) are more than
that which can be displayed, images may not appear as they were designed.
This is only one reason to use the fewest number of colors that still make
an image presentable.
Image size (in bytes) will have a major affect on download speed. Many
end-users will 'give up' on a page if it takes too long to download. The
size of GIF images in large part is determined by the number of colors in
the graphic. There are obvious differences in the two images shown below,
but one is 40% smaller than the other without giving up significant quality.
Using the first image puts less demand on the color map and makes download
time much quicker.
The graphic on the SDSU Home Page (non-interlaced, 32 colors, 29580 bytes):
The same image (non-interlaced, 182 colors, 51194 bytes):
With very few exceptions, end users should not have to scroll the page
to see an entire image. If they have to scroll, often the desired affect
of the image is lost. A typical browser using a 640 x 480 display will
display an image size of 480 x 250 without scrolling. (Mileage may vary
depending on the browser and configuration settings.)
Thumbnail images are also a way to place a large quantity of images
on a page while allowing the end-user to select which images to take
the time to actually download and view in full-size. For example a user
could click on one of the following thumbnails:
Image sizes are greatly reduced in this way. Byte size for the images
are: SDSU Home Page Image - 31558 (full size) - 2573 (thumbnail), Campus
Info Image - 20242 (full size) - 1695 (thumbnail), and WWW Search Image
- 10058 (full size) - 987 (thumbmnail).
Serious consideration should be given to this technique if a large number
of images are on a single page (such as a photo album.)
The main graphic on the
SDSU Home Page
is an interlaced GIF. On browsers that support interlaced GIF's, interlacing
gives the affect of the image being scanned onto the display getting sharper
with each pass. These images are often larger (the one on the SDSU Home page
is 31558 bytes compared to 29580 for the same image non-interlaced.)
If the choice is made to use one or more interlaced GIF's on a page, it is
important to consider that interlaced GIF's do not add anything to the
presentation if they are not seen in the act of downloading. Therefore, if
an image does not appear on the initial part of the page that is displayed,
it typically does not make sense to use an interlaced GIF.
We have created a
graphics library
for use by SDSU WWW developers. There are advantages and disadvantages
to using the graphics library:
Advantages of the SDSU Graphics Library:
An assumption should be made that all images seen on WWW are copyrighted.
Although it is fairly easy to copy images for use elsewhere, this should
not be done without permission of the original artist. If it is not possible
to receive permission, don't use the image. It should also be assumed
that all images on SDSU servers are copyrighted and permission should be
sought before using any of these images (except where otherwise stated.)
The SDSU
graphics library
images may be used by SDSU Campus WWW Developers.
Color Maps:
Physical Size of Images:
Use of Thumbnail Images:
Main SDSU Home Page Image
SDSU Campus Information Image
Search SDSU WWW Image
Interlaced GIF/Progressive JPG Images:
SDSU WWW Graphics Library:
Disadvantages of the SDSU Graphics Library:
Are images copyrighted?
