Forum Moderators: not2easy

Message Too Old, No Replies

1x1 gif image is 43 bytes

why is it so large?

         

twist

8:03 pm on Jan 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am using a 1 pixel by 1 pixel transparent gif image as a spacer on my site. I used Fireworks to create the gif. Why is it 43 bytes? I would think it should be somewhere around 1 or 2 bytes.

dmorison

8:08 pm on Jan 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The .gif headers are larger than the actual image data.

garann

8:14 pm on Jan 22, 2004 (gmt 0)

10+ Year Member



43 bytes is pretty small.. You aren't by any chance confusing bytes with kilobytes, are you? ;)
At any rate, it shouldn't pose a problem, even on the most dog-slow modem connection.

limbo

8:32 pm on Jan 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Under 1KB.

keep your all your images as small as this and you are laughing :)

A typical letter, numeral or character, in plain text format, is around 8 bytes give or take a few.

Ta

Limbo

twist

12:39 am on Jan 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

jim_w

1:48 am on Jan 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How many colors are in the gif? Wouldn't it make it a few bytes smaller if you change the number of colors to 2, if they are not already? But at 43 bytes, I'm not sure it would be an issue for many people.

twist

9:14 am on Jan 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

ChrisG

7:14 pm on Jan 24, 2004 (gmt 0)



Why use gifs at all for spaces?

Why not use a table.
(i.e.)
<table>
<tr>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
<td width="34%">&nbsp;</td>
</tr>
</table>

Would that be smaller in size than .gif file?

twist

8:32 pm on Jan 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

grahamstewart

12:42 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why use tables or spacer GIFs? Can't you use an empty div instead?
[webmasterworld.com...]

trillianjedi

12:57 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A typical letter, numeral or character, in plain text format, is around 8 bytes give or take a few.

A standard ASCII character is 1 byte.

TJ

limbo

1:10 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A typical letter, numeral or character, in plain text format, is around 8 bytes give or take a few.

A standard ASCII character is 1 byte.

Really? - I was told something different (obviously) where did you read that? I want to be sure.

Ta

Limbo

choster

2:32 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



limb, I think you're thinking 8 bits, not 8 bytes. An ASCII character is 1 byte (8 bits), a double-encoded Unicode character is 2 bytes (16bits), and other systems may use even more.

limbo

2:38 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



*Plink*

(Penny drops)

trillianjedi

2:38 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



where did you read that?

It's just one of those things I know - can't remember from where (early programming days I suspect - circa 1979?!).

TJ

choster

3:10 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Actually, I need to correct myself just now-- ASCII for practical uses is an 8-bit standard, but actually it has 7 bits of data plus a "parity bit" for error checking.

twist

9:49 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just a rundown for anyone that cares,

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 &#038; or &#126;

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)

jim_w

9:58 pm on Jan 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Because there is all kinds on information in the gif header, including, how many colors the gif can support, not how many colors it has, is it transparent, etc.

[edit]Remember that a gif file is a non-destructive compression format[/edit]

ergophobe

9:47 pm on Feb 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




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.

twist

10:54 pm on Feb 2, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just for a update,

I learned how to create spacers using css and div tags. So I got rid of my spacer gif completely. Good bye 43 bytes.

jomaxx

11:00 pm on Feb 2, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Heh, I'll bet the CSS trick requires more than 43 bytes.

It is good not to have to deal with all those extra log entries, though.

twist

4:07 am on Feb 3, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.