| Day 3 - Web Graphics
Today we will learn how to insert graphics in a Web page. Assuming
we have a graphic file called logo.gif, we can insert it by:
<html>
<head>
<title> Place your page title here </title>
</head>
<body>
<img src="logo.gif>
</body>
</html>
The two most popular types of graphic files are JPEG (.jpg) and GIF
(.gif).
JPEG
JPEG stands for Joint Photographic Experts Group, a file
compression scheme to minimize graphics file sizes. JPEG uses the
24-bit or true color scheme as compared to an 8-bit color scheme used
by GIFs. With this, JPEG are widely used to compress photographs or
images that use a lot of colors.
Looking at the above photographs, the original (left photo) has a
file size of 15 Kbytes. By using JPEG compression the file size can be
further reduced to 3 Kbytes (middle photo) or even smaller, 2 Kbytes
(right photo). Smaller file size leads to faster downloads. The
tradeoff is as you compress an image, the photo quality degrades.
GIF
GIF stands for Graphic Interchange Format. To reduce the file
size of graphic image, GIF uses a file compression algorithm call
Lempel-Zev-Welch (LZW). This algorithm compresses an image by reducing
the colors used to display an image, and compresses horizontally.
Look at the samples below to get an idea of the effectiveness of GIF
compression.
 |
 |
 |
302 bytes
|
416 bytes |
419 bytes |
 |
 |
 |
| 302 bytes |
473 bytes |
608 bytes |
The tools used to create Web pages are software such as PhotoShop,
Jasc PaintShop Pro, and Macromedia Fireworks.
If you are comfortable with today's lesson, then we can move on to day
4.
|
