spacer trick (html)

[swedeheart]

I'm helping a friend with her blog but I'm afraid I don't know very much about (x)html myself. I've attempted something and it looks very neat on Firefox even if I do say so myself, but I'm aware that pages can look very differently on different browsers and with different screen resolutions and so on and so forth, so I'm hoping for some reassurement from you guys that I have performed this trick correctly:

Prerequisites: I've used what was originally a 1 pixel square transparent gif for a spacer between other images in order to distribute these other images to a specific length. Example: Say I have 5 images and they are all 100 pixels wide. That makes my horisontal row of images 500 pixels wide, right. But say I want that row to be 580 pixels wide instead. What I've done is I've used the transparent spacer gif in the in-betweens, i.e. four times, and I've set its width to 20 pixels in my html code snippet. And hey presto the row is now 580 pixels wide and looks perfect to me.

What I'm wondering is this: Is ^^that the correct way to use the transparent spacer gif, or should I have resized it to 20 pixels width instead of just *displaying* it as such, in my code? Or doesn't it matter one way or the other? Not that it would make a difference in this particular case but just generally will the page load faster if you preserve the original image teeny-tiny and just display it as bigger?

[swedeheart]

...and is there some kind of risk involved in not resizing it.

[squarebear]

Sounds good to me. The smaller the image, the quicker it loads. However, I doubt the difference between loading a 1 pixel and 20 pixel image will be noticeable to anyone.

[swedeheart]

Thanks squarebear. I'm not expecting the computer to blow up or anything;-) I just wanna be sure it looks good on all browsers and so forth. / I love your avatar, it makes me want to write a children's book:)