Online tips, tutorials, and book on designing Web sites.  


 

        Home   |   About   |   Archives   |   Links   |   Contact          >> Join the free newsletter
Menu

About

Table of Contents
The Basics
HTML
Web Graphics
Web Promotion
Web Design Tips
Analysis and Case Studies
Web Safe Color Chart
 - - -
Buy The Book
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.

15 KB 3 KB 2 KB

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.

     Copyrightę 2002 Joel Mangilit  :  (632) 522-6912  :  (0917) 539-0450  :  joel@webphil.com  :  www.webphil.com