Use these to jump around or read it all…
[The Image]
[How To Do It]
[Why On Earth Would I Do This?]
[Some Images For Your Page]
See that black line above? That’s what this tutorial is about, a 1 by 1 pixel-sized image. People have started using them to add lines and blocks of color to their pages. It’s a fairly simple process and here’s how it’s done.
The Image
No way around it — you need to be able to make an image — a 1 by 1 pixel-sized image. I use a program called PaintShop Pro. It’s shareware and available at a number of different sites. See Shareware.com for a list of sites that will be just giddy to let you download the program.
That done, use the image program to create an image that’s one pixel high by one pixel wide. Some programs won’t allow you to make anything smaller than 2 by 2. That’s fine — do it. My 1 X 1 looks like this:
Honest to goodness, there’s an image up there. You have to look closely. Put your face right up to the screen. Don’t touch it with your nose though — it’ll leave a smudge.
All of the lines above were made using that same image. Even that thick black line above.
How To Do It
Easy as pie (mmm, pie…). Once you have the little image, you can play around with its size through height and width commands. See that thick black line up there? Here’s the code I used to place it on the page:
<IMG WIDTH=”500″ HEIGHT=”25″ SRC=”1×1.gif”>
See? It’s just a little image named “1×1.gif” made far larger than it really is through the use of height and width commands. For more than you’ve ever wanted to know about height and width commands – see So, You Want Height and Width Commands, Huh? Plus, since the little image is all one color, the line is a solid color the whole way across.
Why On Earth Would I Do This?
Speed. Pure and simple. Just speed. Remember that a server has to transfer every image that must be placed on a page. The smaller the image, the faster the image travels across phone lines, and the faster the image loads. Let’s take a look at relative sizes for the different sized lines above:
| Line Size | Bytes Required |
| 500 by 2 (Thin line above) | 256 bytes |
| 500 by 25 (Thick line above) | 3001 bytes |
| 1 by 1 (Small image above) | 8 bytes |
You can see that the one-byte image will load and display far faster than creating the images in different sizes. Plus, one image covers all of the lines, rather than the server being asked for three different lines.
If you go with a 2 by 2-pixels image, then you can add some color into the deal, like the line above. Here’s the image that made the line above:
…and only 16 bytes.
Ooooooh, that line above is ugly, but only 30 bytes. It’s a 2 by 10. You see, your graphic program may allow you to enlarge your image to be so big that you can see each individual pixel. If so, then change the color of each individual pixel to add color. That’s how I got the little purple and black line and that ugly deal above. By playing around a little, you can make some neat lines.
Some 2 X 2 Images For Your Page
No graphics program, huh? That’s okay — here are a few 2 X 2 images that you can use just like the ones above. Now, keep in mind that when you click on the image it will appear in the upper left-hand corner of the screen. You may not see it too clearly, but it’ll be there. Just choose SAVE AS from under the FILE menu and save the image as a .gif with whatever name you want to give it. Choose from:
[Red]
[Blue]
[Green]
[Purple]
[Yellow]
[Orange]
[Black]
[Pink]
[White]
It’s all about speed and making your page come up faster. Try a few of these for yourself and see if you like them. They add crisp lines and blocks of color to your page without the need for large byte-filled images.
[The Image]
[How To Do It]
[Why On Earth Would I Do This?]
[Some Images For Your Page]
Enjoy!
