SOME pictures are worth a thousand bytes .... |
Using the right type of image can make a big difference to your page without anybody noticing. As a general rule - use JPEG images for photographs or very complex images, use GIF images for simple line art, and never use BMP images (they can be HUGE!).
|

|
As a gif image, this picture is 19686 bytes
As a jpg image, this picture is only 7439 bytes
|
|

|
As a jpg image, this picture is 29510 bytes
As a gif image, this picture is only 2476 bytes
|
|
Choosing the correct type of image for the 'coins' and the 'notice' on this page, meant downloading around 10k, whereas choosing the 'wrong' type of image meant downloading almost 50k. Difference? Around 15 seconds faster! |
|
Speed/Courtesy Tip
If you want large pictures on your pages, be prepared for long, slow downloads. You may *love* the pictures, but visitors really want to see the content quickly. One good solution - thumbnail images linked to full size images. A thumbnail image is a small version of the big picture (no kidding!), not the big picture forced into a smaller size!!
|
 This image is the original money picture with height and width forced to a smaller size. This picture is still 7439 bytes - and it looks worse than the original. |

.... but this image is a reduced size version and it's only 2469 bytes. And it looks just as sharp as the big money picture.
|
End result - a small image that looks as good as the bigger one, and a much faster download time. Now a visitor can look at the small image and decide if it is interesting enough to justify the wait to see the bigger picture. Everybody wins - you have your big picture on your web site, and visitors don't have to wait a long time to see it unless they want to.
How do I get to see the big picture? Here's an example using a picture of my office (I wish). Put your mouse over this thumbnail for information, and ...
And the html for that ... <a href="bigpicture.jpg"><img src="smallpicture.jpg"></a>
|