Use these to jump around or read it all...
[Here's What's Happening]
[Why Would I Do This?]
[When Would I Do This?]
[How Do I Make A LOWSRC Image?]
Watch this...
Not only is that thing above cool, but this is by far the dumbest use of the "So You Want A _____, Huh?" title on this site. But, I need to keep a flow going here.
What you see above is an example of a LOWSRC command. It is a very helpful image command that will move your page along if you are determined to use large, byte-filled graphics. Here's the command that made the image above:
<IMG HEIGHT="212" WIDTH="300" ALT="Phydueaux the Cat" SRC="cat.gif" LOWSRC="bwcat.gif">
Now, don't get thrown that it jumped to the next line, this is all one image command that produces the above picture... or two pictures as is the case.
Here's What's Happening
- IMG starts it all off like any other image command.
- HEIGHT and WIDTH denote the size of the image.
You should always include this in all image commands. See here for much more detail on how and why.
- ALT ditto always using this.
Again, see here for much more detail on how and why.
- SRC is the large color picture that came in over top of the black and white image. The color image name is "cat.gif."
- LOWSRC is the key to this tutorial. It is the black and white image of the cat face that came in first. The name of the LOWSRC image is "bwcat.gif."
Why Would I Do This?
Because it helps your viewer a great deal. Plus it looks cool. You see, if you have a huge image that is going to come in, that takes time. The color picture above is 56K.
However, the black and white picture is only 3K. It displayed in a heartbeat. The color pic just wiped over top of it. Yes, using the HEIGHT and WIDTH commands will create a box where the picture will go, and the ALT command will inform the viewer of what is going in, but by using this LOWSRC command, a smaller byte version of the picture zips right in, giving an example of what is to come. Neat, huh?
When Would I Do This?
There's no reason why you couldn't use this all the time, but remember that it does make each picture two hits. That slows the page a bit. I would reserve it for really large images. Smaller pics will do just fine with the HEIGHT, WIDTH, and ALT commands.
How Do I Make A LOWSRC Image?
If you haven't taken this from what I wrote above, the purpose of the LOWSRC command is to quickly put up a picture underlying a larger one. So, whatever picture you use for the LOWSRC, make is as low on the bytes as possible. Otherwise, the whole process is loopy.
Yes, if you really want, you can have two completely different pictures. The second will just wipe right over the first. This command will do that effect if that's all you want. I just thought I'd get that in before someone asks.
I made the black and white image above by opening the original color picture in my PaintShop Pro graphics program and reducing the color level to two colors, black and white. That immediately dropped the amount of bytes from 56K to 3K. Nice drop. You can do the same. Get your copy of PaintShop Pro here.
That's about all for that. I'm off to play with other little commands and waste more time until dinner... or lunch... or whatever other meal is eaten around the time you are reading this. "Midnight snack" might work, too, I guess.
[Here's What's Happening]
[Why Would I Do This?]
[When Would I Do This?]
[How Do I Make A LOWSRC Image?]
IE 7
Firefox 2.0
