Web development by PHP-Web-Host.com   Website Hosting by PHP-Web-Host.com
Web Hosting by PHP-Web-Host.com

HTML Tutor!

HTML Tutor, learn to author your own website

 

 

Resources

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

Before we go on, we need to go over something. When you include images on your page, remember that they contain a lot 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 can result 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 3.
(This older, non time limited version is still available. Even though it's older and not as
fancy as the latest version, it's 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 may leave and they won't see anything.

I suppose that these days, with cheap bandwidth and so many folks hooked up to broadband internet connections, watching your image sizes seems unimportant... but I'd argue it's still a good thing to keep a handle on. All things being equal, you are better off with a trim and quickly loading site rather than one that's needlessly bogged down with a bunch of overly bloated images.


If you like playing with online toys, and just to see how much images can be reduced, try GIFWorks...

Click here to go to GIFWorks

GifWorks is a really nifty online GIF editor and optimizer. You don't need to download a thing. You can send it an image and optimization is just one of the many things it can do. While you're there, you can check out their other neat tools or browse their vast image collection. Go ahead and give it a whirl.

FAQ: What should I use for my pages... GIF or JPG?

A: Good question. The short answer is... use a JPG for photographs or images with a lot of blends or gradients, and use a GIF for simple or line drawn type images that contain relatively few colors. A more throrough answer is given in GIF or JPG?

And for a couple more interesting image related pages, have a look at GIF Compression Explained and Image Compression Examples.

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 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD

 

 

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

 

 

We accept PayPal

 

Web Hosting by PHP-Web-Host.com Website Hosting by PHP-Web-Host.com

[ Home ] | [ Software ] | [ Web Development ] | [ Resources ] | [ Contact ] | [ Privacy Policy ] | [ Acceptable Use Policy ] | [ Terms of Service ] | [ Sitemap ] | [ Clients ] | [ Affiliates ]

[ PHP Web Hosting ] | [ Linux Web Hosting ] | [ 500mb PHP Web Hosting ] | [ 1Gb PHP Web Hosting ] | [ 3Gb PHP Web Hosting ] | [ 6Gb PHP Web Hosting ] | [ 10Gb PHP Web Hosting ]

[ HTML Tutor ] | [ CSS Tutorial ] |