Really big pictures take a long time to load on your computer. They have to travel over many miles of different types of communications links, some faster than others. On your computer, while building your page, you insert a 500KB (1/2 Megabyte) picture file. It only takes 2 seconds to load on your computer. That's because it only goes from your hard drive to your monitor (so to speak). When you post that on the Internet, it travels form your Internet Host to your friend's computer over a phone line connection and takes about 5 minutes to load. I hate waiting for large graphics.

When I made my first page, I had several such graphics on my page. You know, the one I was so proud of. I called my friend Carrie and had her view the page. I called a half hour later so she could praise my great work. Yes, I was soliciting praise. She said, " I'm not sure yet. It's still loading." Back to the drawing board.

There are a few ways to attack this problem.

• Do Not surprise your viewers with massive graphics

• Thumbnail link to the larger image version

• Optimized graphics resolution

• Compressed graphics

• Compromise file size and viewing size

• Reduce images to real time viewing size

• Use multiple pages to show graphics series

Thumbnail Links

Thumbnails are small versions of the original graphic image. In this example, the image of my dog, Soboku, is a link to a larger image of him, but not the same image. Your images do not always need to be the same images. The theory is the same. You use a small image that loads real fast to give your viewer an idea of what is there. Then they can make the conscious decision to load the big graphics or not. It is also polite to let them know how big it is, if it is really big.

The IMG SRC tag is enclosed in the link tags. For more about link tags see the Tags Guide.

<A HREF="pictures/soborocks.jpg"><IMG BORDER=0 SRC="pictures/sobohome.jpg"></A>

This image is only 9KB. The linked image is 110KB. The BORDER=0 option removes the colored link ring/border around the image on the left. The image on the right does not use the BORDER=0 option. Isn't he handsome?

Optimized Resolution

When you use a scanner or digital camera to load images on your computer, your graphic images might be 72, 150, or 300dpi resolution or even higher. Your monitor can only put out about 72dpi, so anything greater than that is wasted on your viewers. It also adds more bulk, which is really time, to your website. High resolution graphics are great for printing or manipulating on your computer, but they add nothing to your web page but size.

One of the things you need to decide is, how big of a picture do I want my viewers to see? Size and bulk also go hand in hand. All graphic images can be measured in pixels. Pixels are the individual dots of color that make up your total screen image.

I have my 17" monitor set up to view at a screen resolution of 800 x 600 (pixels). So it is easy for me to imagine how big a 400 x 300 pixel image would look on my screen. 800 x 600 is a good resolution to design pages at because it is one of the most common screen resolutions used.

The images on the Fun Page are just right for good viewing at 800 x 600. They are just about snapshot size, 252 x 189 pixels. This was a conscious decision on my part to give you six images to see without a heavy time burden.

I could have done the thumbnail thing and showed each picture one at a time, but at a larger size with no real problems. It is a little more difficult for your viewers though to click an image, then go back, click another, etc. Of course if I do that my total website picture count goes down because I only have so much free space on the Internet Host's computer. There is always a compromise between how big and how many.

Here is a table to show you the relationship between picture size, resolution, and file size. This chronicles one picture being reduced for the Fun Page.

file: funpage_01.jpg

Viewable Size/Pixels	DPI	File Size	Print Size
1280 x 960	144	697 KB	8.9" x 6.7"
1280 x 960	72	697 KB	17.9" x 13.3"
640 x 480	72	262 KB	8.9" x 6.7"
640 x 480	72	*56 KB	8.9" x 6.7"
252 x 189	72	51 KB	3.5" x 2.6"
252 x 189	72	*14 KB	3.5" x 2.6"
* These images were compressed to about 50% on the jpeg compression/quality scale, significant difference.

By the way, all the pictures (7 counting the background) on the Fun Page originally totaled over 5.5MB file size. That would take about 50 to 60 minutes to load on a typical phone line Internet connection. The finished files totaled only 152KB or approximately 1/8MB. 1000KB=1MB or so depends on who's counting but that's another story. The whole page should only take approximately 1 minute now. I hope that helps show you the relationship between time and size. It is your decision, more pictures or bigger pictures.

Use Backup Copies

I like to keep my high resolution pictures intact so I can play with them later. To do that I always copy my images to my web folder and play with the copies instead of the originals. One time I made a thumbnail of an image but forgot to Save As another file name. Then I was stuck with a tiny picture of Soboku without a real size image to view.

JPEG (.jpg) Compression

JPEG compression is what really makes the difference for me. There are other compressable file formats, but I don't get into them much. If you look at the table above, you can see two examples of image compression and the file size savings it can bring. A 50% compression ratio can effectively reduce file size by 4 times or more, and this is the important thing, without noticable image quality reduction. It's no good to save size if it screws up the view.

Your graphics program will ask you when you try to save a JPEG (.jpg) image if you want to adjust the compression ratio or image quality. The scale might be 0 to 100%, 1 to 10, high or medium or low, or even poor or good or best. They all do the same thing.

I always use 50%, 5, Medium, or good JPEG compression.

Reduce Images to Viewing Size

I always reduce my images to fit the space I want to place it in. It may take a little time to custom fit the images, but it is worth it. If I want my viewers to see this image at 252 x 189, like the Fun Page, then that is the size I make my images. If I want you to see the image at 640 x 480 then that is the size I post. I could post a 1280 x 960 image but only allow you to view it at 640 x 480, but then I am also posting the file bulk as well.

You can place a large image in a small section on your web page by setting the HEIGHT and WIDTH options in the IMG SRC tag. It looks small but it is still the full file size. The height and width options only set the viewing size. It does not change the file size. I don't like to do this unless I really want them to have the full size image, but don't want to crowd the screen. This works well if I want to give my friends a picture to print or something like that.

I do however use this method to determine the right size for my graphics sometimes. If you have a space for a picture but are not sure how big the picture should be, then place the image there and use the height and width options to size it until it looks good there. Then take the image to your graphics program and resize it to that size. No wasted bulk or load times. It's efficient.

The height and width options method is not the way to make thumbnails. If you merely reduce the viewable image size to create a thumbnail, you might as well post the real image there instead because the image file sizes are the same. Reduce your thumbnails to actual thumbnail size.

Background Images

Once again we can use the Fun Page as an example. This time as an example of a background image on a page. It works pretty neat, but you need to be careful. You can overdo it. A really bright background can really distract from your regular content. It kind of comes down to, what are you trying to show, the background or the foreground? The background image should be there as a visual enhancement, not an attraction.

I usually take a fun image and remove all color from the image and then lighten, brighten, contrast reduction, or whatever it takes to take the edge off the image so it will not be really strong behind my content.

Your browser will automatically tile the image to cover the whole page with multiple incidents of the image. The background image should be very small in file size. This one is only 4KB. You don't want to burden your viewers with a time consuming background when you have fun things like baby pictures or something else you really want to show them.

It's your page. You be the judge, but remember it's really for sharing with others.

Use Multiple Pages for a Series

If you have a lot of images to share, you can divide them up between multiple pages. If I hade more Legoland pictures to share on the Fun Page, I would create a second, third, or fourth page, etc, as necessary, linked to each other. The basic principles still apply. Do not overload a page. Each page would be fun to look at but not real intrusive to your viewers valuable time. Besides they can then decide for themselves if they want to see more.

Image Tags Explained:

<IMG SRC="xxxxxx.ext">

Image Source Use this tag to insert graphics into your web page. Type the filename.ext, or the path to your picture if it is not in the same directory as the web page, between the quotation marks.

Code: exact case duplication is important when stating the filename.ext or directory names.

<IMG SRC="pictures/sobohome.jpg">

Result:

There are quite a few options for placing your image on your page or how it relates to the text on you page.

ALIGN=RIGHT Aligns your image on the right side of the page and your text will word wrap around the image.

Code: Notice the ALIGN option is placed between IMG and SRC.

<IMG ALIGN=RIGHT SRC="pictures/sobohome.jpg">This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines.

Result:

This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines.

ALIGN=LEFT Aligns your image on the left side of the page and your text will word wrap around the image.

Code:

<IMG ALIGN=LEFT SRC="pictures/sobohome.jpg">This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines.

Result:

This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines. If we keep writing text you will see how it will eventually find the edge of the document again. See what I mean. Yeah I know this part of the text was not in the code text above. It was a last minute add to show the word wrapping.

ALIGN=TOP, MIDDLE, or BOTTOM These option align the adjacent text as told, but the next line will be below the image. This might work well for a short caption.

Code:

<IMG ALIGN=TOP SRC="pictures/tayhome.jpg">As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Result: The top of the first line of text aligns with the top of the image.

As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Code:

<IMG ALIGN=MIDDLE SRC="pictures/tayhome.jpg">As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Result: The bottom of the first text line aligns with the center line of the image.

As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Code:

<IMG ALIGN=BOTTOM SRC="pictures/tayhome.jpg">As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it. It's not so bad with the bottom alignment, but you have a lot of dead space above the text.

Result: The bottom of the first text line aligns with the bottom line of the image.

As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it. It's not so bad with the bottom alignment, but you have a lot of dead space above the text.

Here are some other examples of image code options.

<IMG BORDER=10 SRC="pictures/tayhome.jpg"> The BORDER=0 option is useful if you do not want to see a hperlink colored border around an image being used as a link. It can also be used to place a visible frame around your image, like the example code. Example:

<IMG HSPACE=40 VSPACE=40 ALIGN=MIDDLE SRC="pictures/tayhome.jpg"> Horizontal Space, Vertical Space: The HSPACE format places a buffer, as specified in pixels, on the right and left side of the image. The VSPACE format does the same for above and below the image. This is useful to keep your text from crowding your images or vise versa. Notice how the example is spaced from the wall and below the previous text. Example:

Notice the VSPACE?
Notice the HSPACE?

<IMG WIDTH=35% HEIGHT=200 SRC="pictures/tayhome.jpg"> HEIGHT and WIDTH can each be specified in % (percent) of page or number of pixels. I prefer to size my images before placing them in my document. In this example I made it 35% of the width available, not counting the frame on the left of the screen or the indent from the list format I am using. The height was adjusted to 200 pixels. Be carful not too stretch your images too much. Example:

<CENTER><IMG SRC="pictures/sobohome.jpg"></CENTER> Use the CENTER tags to place your image in the center of the available horizontal space. I don't think you can word wrap around a free standing, centered image.

by Craig Walker