Cafe LaTe Home
Contents
Background
Getting Started
arrow Images
Links
Tables
Lists
Resources
Tag Index

Ichariba Home Page
The Cafe LaTe HTML Tutor
Basic Web Page Construction
for Japanese Teachers of English

Web Page Graphics

Section 3 - Images:
   Introduction to Web Page Graphics


Note: You can change your user name at any time from this page. Just click the Change name link above. Bookmark this page now if you think you might want to change your user name later.


   In the lessons of this section, you will learn how to put photos, illustrations, and other graphics on your pages.

Getting images into your computer
Image formats
Types of images

Getting images into your computer

   Images used on web pages are actually not part of the web page file itself. Remember, web page files contain only text. Each image on a web page is a separate file. In your web page file you place links to your image files. When I look at your page on the Internet, first, my browser reads your source file. When my browser sees the links to your images, it sends out requests for those images, and builds your page on my screen as each image is received.

   There are several ways of getting images into your computer. One way is to copy images from the Internet. If you have never copied graphics from the web, you probably don't realize how easy it is. All you need to do to copy an image from a web page is to right-click on the image and choose Save Image Then, save the image to the folder of your choice. Before using any graphics copied from the Internet make sure you have permission. cd Graphics collections are also sold on CD-ROM's. You can copy graphics from CD's to your computer, but again, make sure you have permission to use them on the Internet. See the Resources page for some websites which offer free graphics.

   You will never have to worry about copyright problems if you create your own graphics. There are many excellent graphics programs on the market. With graphics software you can get information about your images such as the number of colors used in the image, and the size of the image in pixels. With a graphics program you can resize your files, change their colors, create your own illustrations, and enhance your photographs. All web authors need a graphics program for everyday tasks. If you are the creative/artistic type, there is no end to what you can do with a good computer graphics program. See the Resources page for some recommendations.

scanner    You can also scan photos or other graphics, and save them as files in your computer. If you have a digital camera, you can send photos directly from your camera into your computer. It's easy just to copy graphics created by other people, but if you want your page to be unique, you should create your own graphics.

   It is easy and tempting to use a lot of graphics on your pages. But remember, the smaller your graphics files are, the faster your pages will load. Don't use graphics if they aren't really necessary. And never use graphics which are bigger than they need to be.


Image Formats

   In the Background section of this tutorial, you learned about word processor file formats. Graphic files also have many different formats. However, only two types are commonly used on the Internet. Both are compressed formats, but they use different types of compression. These formats are known by their filename extensions: .gif and .jpg.

   GIF stands for Graphic Interchange Format. GIF files use only 256 colors. However, each file may use a different 256 colors. GIF compression works best on files with few colors, files with large areas of the same color, and files with sharp lines. In general, GIF is the preferred format for illustrations and animations.

   JPG is short for JPEG, which stands for Joint Photographic Experts Group, the name of the group that developed this format. JPEG files can contain 16 million colors. Unlike GIFs, the quality of JPEG files can be adjusted. The better the quality, the bigger the file size will be. There is always a tradeoff between size and quality. For files with many colors, JPEG does a better job at compression. Better compression means smaller files, and faster page loading. JPEG is best for files such as photographs, which have lots of colors which blend into one another.

JPEG This JPEG compressed photo has a file size of 9kb. Keeping the same dimensions on the page, the same photo in GIF format would be 29kb, more than triple the file size.


   You may think that because JPEG's are smaller and can contain more colors, they would be used for everything. But GIF's can do some things which JPEG's can't. First, GIF's can be animated, JPEG's cannot. Also, unlike JPEG's, one of the colors in a GIF file can be set as transparent. Take a look at these examples:

Gif Compression is good for files with large areas of the same color. This image has only four colors. not transparent In this file, the color "gray" has been set as transparent.
GIF files can also be animated, like this one.		 animated gif


Types of Images

   Graphics are used for more than just large photos and illustrations. Some kinds of graphics are commonly used for certain elements on web pages. Banners are graphics used in advertizements, or for headlines. The headlines on the top of this page are graphics. Graphics are often used for buttons, which are used for links. Each of the buttons in the top left menubar on this page is a separate graphic file. Sometimes a long, narrow graphic called a bar or line is used as a divider to separate two sections of a page, like the one below the Review at the bottom of this page. Because large photos take a long time to load, some people just put tiny versions of their photos called thumbnails on their pages, and then link the thumbnail images to the full-sized images which are placed on other pages. That way, initial pages will load faster. People who want to see the larger photos can then click on the thumbnails to view them. One final common use of graphics is for wallpaper. A piece of Ryukyu kasuri (ikat) fabric was scanned to create the wallpaper file for this page. You will learn more about background graphics in the next lesson.

Review:

  • The two most common graphic file formats used on the Internet are GIF and JPEG.
  • GIF file names take the .gif extension, and JPEG file names take the .jpg extension.
  • GIF's are used most commonly for illustrations and animations.
  • JPEG's are used most often for photographs.
  • JPEG's can contain 16 million colors, and usually compress to a smaller size than GIF's.
  • GIF's can contain only 256 colors, but GIF's can be transparent, and can be animated.
  • All web page authors should have at least one graphics program.
  • You must have permission to use graphics copied from CD's or from the Internet.
  • In addition to large photos and illustration panels, graphics are typically used for such things as banners, link buttons, lines, and page backgrounds.
  • To save a copy of an image you see on a web page, just right-click on the image and choose Save Image.
  line

Previous Lesson Next Lesson
 

[Cafe LaTe Home] [Chat Lounge] [Community Center] [Newspaper] [HTML Tutor]


Last revision: 2002/03/04, Copyright © The Three Cities Workshop
This website includes images from CorelTM Webmaster and other Corel products wihch are protected by international copyright. Used under license. Images are for viewing purposes only. Except where expressly stated otherwise, images may not be copied or downloaded.