|
Division of Information Technology
Web Publishing @ SFSU
Graphics & Images
|
| What are Graphics
|
Graphics refer to images included in or
linked to a web Page. Images are separate files on the server, referenced using HTML markup codes. Different browsers
treat graphics in different ways. Some text based browsers
cannot show images. It is very important to provide alternate image information
describing what the image represents so that those who are not viewing images
do not miss any information.
|
| Graphic Formats
|
Images published on the web should be either GIF or JPG format. GIF and JPG formats differ by the number of
colors available, compression ratios, and by simple special effect features. You can view examples of GIF and JPG graphic features
here.
|
| Inline/External Images |
An inline image is displayed within the web page. An External
image is displayed by itself either by the browser
(Netscape) or by a helper/viewer application. Images should be either GIF
or JPG. If you have lots of images to display
on a page it is a good idea to create thumbnails (little versions) of your
pictures. This can be done manually using the resize command found in most
paint programs. |
| Testing images
|
To ensure readability preview your images using:
- A Color & Grayscale Monitor- Switch Color Mac's to
Grayscale using Monitors:Control Panel
- A VGA (256 colors) and SVGA (16 million colors) - to test palette
- Lynx to check your ALT tags are working
- Different size monitors - 12"-17"
- A slow modem - to see if they take too long to appear
|
| Scanning Images |
Images can also be scanned from other media to be included
in web pages. Special concern should always be made to ensure copyrights
are not infringed. Digital Cameras can also be used to create images. |
| Converting Images
|
Images can usually be created using your favorite graphics
software program. Images can then be converted GIF and JPG formats using
Graphic programs, or special converter programs. Several of the graphic editors
found on the web publishing software page can be used
to open images from many formats and save as GIF or JPG. |
| Sample Code |
<IMG SRC="URL" ALT="text">
<IMG SRC="URL" ALT="text" WIDTH="pixels" HEIGHT="pixels">
<IMG SRC="URL" ALT="text" ALIGN=TOP>
In the Examples above, if the image does not have a "text alternative",
use matching quotesafter the "ALT" tag to indicate to text browsers
there is no image alternative.
|
| For More Information
|
Transparent/Interlaced
GIF Resources
Animated
GIF Resources
Web66 Cookbook
- Step by step for Mac/Win 95 users
Yahoo's Picture
Collection
NCSA's guide to images
|
Home
Search
Need Help?