Forum Moderators: not2easy
The .gif headers are larger than the actual image data.
I figured it was something like that. I was going to complain but decided to look up what other formats would be on the same single pixel.
WBMP = 15 bytes
GIF = 53 bytes
BMP24 = 68 bytes
PNG24 = 193 bytes
PNG32 = 195 bytes
JPEG = 638 bytes
I guess I wont complain about gif headers.
How many colors are in the gif?
There are no colors in the gif. It's a single pixel transparent gif.
The gif is for creating spacers on my website. For example,
<img width="100" height="200" src="spacer.gif">
<img width="400" height="100" src="spacer.gif">
Same single pixel transparent gif stretched to 2 different sizes. I use them to keep my webpage a certain size. If a person were to decrease the size of my webpage window lower than 550px width (lets say) instead of smashing all my text and pictures together it would create a bar at the bottom of the page, thats all.
Why not use a table.
(i.e.)
<table>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
</table>
Would that be smaller in size than .gif file?
Why use gifs at all for spaces?
My website is setup like this,
100px on the left for a menu
100px on the right for advertisements
100% for the center content.
I use a 540px spacer image above the center content. This stops my page from decreasing below 740px which will fit into a 800x600 screen with scrollbar. This allows me to see exactly what my browser will look like to any visitor because i know that they will not see my website in under 740px.
There is a tag that will create this same effect without the image { min-width: 740px } but it isn't supported in IE6. I would really like to not use the image at all but I haven't yet found a better solution.
1 byte = 8 bits (bit is short for Binary digIT)
8 bits is like eight empty slots. There is a total of 256 possible combinations in a byte, zero being a number, so 0-255 are your options.
128+64+32+16+8+4+2+1 = 255
00000000 = 0
00000001 = 1
00000010 = 2
00000100 = 4
00001000 = 8
00010000 = 16
00100000 = 32
01000000 = 64
01111111 = 127
10000000 = 128
11111111 = 255
ASCII uses a parity check which sums the bits in a byte. If it is an odd number a 0 is tacked onto the end (slot 8) and if it is an even number a 1 gets put on. Then the byte is checked against the parity bit to see if they agree. Because the 8th slot is used to check for parity that only leaves the first 7 slots for possible combinations.
1111111 = 64+32+16+8+4+2+1 = 127
Thats why there is 128 basic ascii characters. Characters 0-127. So when you want to add ascii to your html you type & or ~
Your just telling the browser which ascii character number to draw.
If I screwed up anywhere sorry, it's been awhile since my computer science classes too.
P.S.
This is why I originally asked why it took 43 bytes to create a single pixel gif.
2 bytes = 256^2 = 65,536 possible combinations
and for 43 bytes = 256^43 = (you punch it in your calculator)
There are no colors in the gif. It's a single pixel transparent gif.
Well, Jim sort of beat me to it. Open it in something like Fireworks. It will probably say that you are using something like 1 color out of 256 (you have to be using at least one since gifs use index transparency, so transparent is a color; sort of).
Sometimes you'll save a byte or too if you bring the number of unused colors down, but not usually in Fireworks. It already optimizes for the number of colors used.
So if you are using 42 colors and bring the number down to 32, you'll shave some bytes. Generally, though, I find that Fireworks offers little savings if you have an image using 7 colors and you bring the color depth down to eight colors (3 bits). Can't speak to other applications.
Heh, I'll bet the CSS trick requires more than 43 bytes.
Here is the spacer to keep my page a minimum of 500 pixels,
<style type="text/css">
div.spacer { width: 100%; height: 30px; }
div.sp_min { width: 500px; }
</style>
<div class="spacer"><div class="sp_min"></div></div>
Here is what I was using for the gif spacer,
<style type="text/css">
div.spacer { width: 100%; height: 30px; }
img.spacer { height: 30px; width: 500px; }
</style>
<div class="spacer"><img class="spacer" alt="" src="http://example.com/images/spacer.gif /></div>
So the coding is about the same but I drop the 43 byte gif using the div.