"Creating Web Pages With HTML - Simplified"
Chapter 6: Pages 86-99

Working With Images

IDG's 3-D Visual Series
Navigation Bar
Main Table of Contents Previous Chapter Next Chapter

Table of Contents

Convert An Image To GIF or JPG
Define Image Size
Increase Image Size
Reduce Image Size
Reduce Colors In An Image
Make Image Background Transparent
Interlace A GIF Image 
	88 Convert An Image To GIF or JPG
	

		
» You can convert an image to the GIF or JPEG format.

		
 

		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the image you want to convert to the GIF or JPEG format.
    
		
    
		
  3. Click File.
    
		
    
		
  4. Click Save As.
    
		
    
		
  5. If you want to rename the image, type a new name.
    
		
    
		
  6. Click the down arrow in this area to list the available image formats.
    
		
    
		
  7. Click the image format you want to use.
    
		
    
		
  8. Click Save.
    
		
    
		Note #1: To convert an image to the GIF or JPEG format, you need an image editing program such as Paint Shop Pro.
    
		
    
		Note #2: If you selected the GIF format, a dialog box appears, stating that the image will be limited to a maximum of 256 colors. Click Yes to convert the image.
    
		

		
» What is the difference between the GIF and JPEG formats?

		


		
GIF
		
 Graphics Interchange Format (GIF) images are limited to 256 colors and are often used for logos, banners and computer-generated art. GIF images have the .gif extension

		Example: Photo.gif.


		
JPEG
		
Joint Photographic Experts Group (JPEG) images can have millions of colors and are often used for photographs and very large images. JPEG images usually have the .jpg extension

		Example: Photo.jpg.
		

		

		






	90 Define Image Size
	

		
» You can define the width and height of an image. Your Web page will appear more quickly since Web browsers do not have to calculate the size of the image.

		
 

		
» Determine Size Of The Image

		
 

		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the image you want to determine the size of.
    
		
    
		
  3. Position the mouse anywhere over the image.
    
		
    
		
  4. The bottom bar will display the size of the image in pixels.
    
		
    
		
  5. Write down the width and height values on a piece of paper.
    
		
    
		Note: To determine the size of an image, you need an image editing program such as Paint Shop Pro.
    
		

		
 


		
» Define Size Of The Image

		
 

		
    
		
  1. In the <Img> tag for the image, type Width=? replacing ? with the width of the image in pixels. Then press the SpaceBar.
    
		
    
		
  2. type Height=? replacing ? with the height of the image in pixels.
		

		






	91 Increase Image Size
	

		
» You can increase the size of an image on a Web page by specifying a new width and height for the image.

		
 

		
    
		
  1. Define the size of the image you want to change.
    
		
    
		
  2. Replace the Width and Height values with the new width and height you want to use in pixels.
    
		
    
		Note: You should avoid making images too large since the images may appear grainy.
    
		

		





	92 Reduce Image Size
	

		
» You can reduce the size of an image so the image will take up less space on your Web page.

		
 

		
Note: To reduce the size of an image, you need an image editing program such as Paint Shop Pro.

		
 

		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the image you want to resize.
    
		
    
		
  3. Click Image.
    
		
    
		
  4. Click Resize. The Resize dialog box appears.
    
		
    
		
  5. Click Pixel Size.
    
		
    
		
  6. Type a new width for the image in the area that displays the width of the image. 
		The program automatically calculates the height for you to keep the image in proportion.
    
		
    
		
  7. Click OK to confirm your changes.
		

		
 


		
» Save changes

		
 

		
    
		
  1. To create a new file that will store the image with your changes, click File.
    
		
    
		
  2. Click Save As. The Save As dialog box appears.
    
		
    
		
  3. Type a name for the new image.
    
		
    
		
  4. Choose a location where the program will store the image.
    
		
    
		
  5. Click Save.
    
		
    
		Note: Reducing the size of an image will speed up the display of the image on a Web page.
		

		





	94 Reduce Colors In An Image
	

		
» You can reduce the number of colors in an image. This will decrease the file size of the image so the image can transfer more quickly over the Internet.

		
 

		
Note #1: To reduce the size of an image, you need an image editing program such as Paint Shop Pro.

		
 

		
Note #2: You should not reduce the number of colors in a JPEG image. 
		The JPEG format was specifically designed to store images containing millions of colors using small file sizes.
		In many cases, reducing the number of colors in a JPEG image will increase the file size of the image.

		
 

		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the image you want to change.
    
		
    
		
  3. Click Colors.
    
		
    
		
  4. Click Decrease Color Depth.
    
		
    
		
  5. Click the number of colors you want the image to contain.
    
		The Decrease Color Depth dialog box appears.
    
		
    
		
  6. Click OK to confirm your change.
    
		
    
		
  7. To create a new file that will store the image with the new number of colors, click File and choose Save As.
		

		





	96 Make Image Background Transparent
	

		
» You can make the background of a GIF image transparent so the background will blend into a Web page.

		
 

		
Note #1: To make the background of a GIF image transparent, you need an image editing program such as Paint Shop Pro.

		
 

		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the GIF image you want to change.
    
		
    
		
  3. Click on the Eye Dropper "color select" Tool.
    
		
    
		
  4. Position the mouse over the background area of the image. Then click the right mouse button.
    
		The outside border of the picture displays the color you selected.
    
		
    
		
  5. Click Colors.
    
		
    
		
  6. Click Set Palette Transparency.
    
		The Set Palette Transparency dialog box appears.
    
		
    
		
  7. Click the middle option: Set the transparency value to the current background color.
    
		
    
		
  8. Click OK to confirm your selection.
    
		
    
		
  9. Click File/Save to save your change.
    
		
    
		
  10. If you no longer want to display the image with a transparent background, repeat steps 1-9, selecting No Transparency in step 7.
		

		
» What should I consider when making the background of an image transparent?

		
    
		
    
		
  1. Single Background Color
    
		Choose images with a single background color. If an image has a multicolored background, only one of the colors in the background will become transparent.
    
		
    
		
  2. Different Background Color
    
		Make sure the background color does not appear in the image itself. When you make the background of an image transparent, every part of the image that displays the same color as the background will also become transparent.
		

		





	98 Interlace A GIF Image
	

		
» You can interlace a GIF image. An interlaced GIF image first appears blurry and then gradually sharpens as it transfers to a computer.

		
 

		
Note #1: To interlace a GIF image, you need an image editing program such as Paint Shop Pro.

		
 

		
    
		
  1. Start your image editing program.
    
		
    
		
  2. Open the GIF image you want to interlace.
    
		
    
		
  3. Click File.
    
		
    
		
  4. Click Save As.
    
		The Save As dialog box appears.
    
		Make sure the image is a GIF image.
    
		
    
		
  5. Click Options
    
		The Save Options dialog box appears.
    
		
    
		
  6. Click Interlaced.
    
		
    
		
  7. Click OK to confirm your change.
    
		
    
		
  8. Click Save to save your change.
    
		A dialog box appears, stating that you will replace the original image.
    
		
    
		
  9. Click Yes to replace the original image.
    
		The image is now interlaced.
    
		
    
		Note #2: An interlaced GIF image will appear on the screen as it transfers to a computer. This gives your readers some idea of what the final Web page will look like. Noninterlaced images must fully transfer to a computer before appearing on the screen. This leaves readers unsure of what the final Web page will look like.