Web Design and HTML Tutorials: Basic HTML Tutorial

Before we go on, we need to go over something. When you include images on your page, remember that they contain alot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half results in an image only 1/4 the size in Kb. Also you can reduce the number of colors. For example:


Dimensions 310 x 304 # of colors- 238 Size - 69 Kb

Dimensions 207 x 203 # of colors- 238 Size- 34 Kb	Dimensions 207 x 203 # of colors- 48 Size - 19 Kb

All image editing was done with Paint Shop Pro.
(An older, non time limited version is available here. Even though it's older and not as fancy
as the latest version, it is a GREAT graphics editor - PERFECT for new web authors.)

Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if your page takes forever to load, your visitors will probably leave and they won't see anything.

Just to see how much images can be reduced, try the GIF Optimizer below. You send it your image, and it comes back progressively more "optimized". Note that the GIF Optimizer is not actually a part of this tutorial. It is a program that resides on another computer. This is just an interface and you must be online to use it.

GIF Optimizer

GifOptimizer is a FREE, online tool that reduces the file size of GIF images up to 75%, allowing web pages to load faster. Optimization is achieved in four simple steps:

Upload the GIF to the GIF Optimizer server.
Reduce the number of colors used in the image. This step also removes extra data and comments from the GIF.
Reduce the height and width of the image.
Save the optimized GIF to your computer for use on your website.

GifOptimizer can reduce the file size of GIF images (up to 150K in size),
even animated GIFs. Use it as often as you like, there's never any charge.

Step 1: Upload GIF

Check out other FREE online tools and files from Media Builder:
GIFWorks ò Animated Banner Maker ò 3D Text Maker ò ButtonMaker ò FontMapper
Animated GIFs ò Backgrounds ò Borders ò Icons ò Lines ò Fonts

<< BACK         NEXT >>

PageTutor - So, you want to make a Web Page!

   Lessons:   Intro  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24

Upload Your Pages      216 Color Chart      Color Picker

Index & Quick Reference      Barebones HTML Guide      Joke Break

Print version available - Get the PageTutor book & CD

Become a member - Get more good stuff!