I was noticing that a GIF was being displayed with padding in FireFox 5 and IE 8. When I viewed the image size via FireBug, I noticed that it was a few pixels larger than expected.
Expected height: 160px vs. actual height: 171px
When I opened the GIF in an image editor, the editor displayed the correct dimensions, however when I ran ImageMagick identify I received the following information:
newGif.gif GIF 200x160 200x171+0+5 PseudoClass 256c 30kb
If I modified the geometry to 200×160+0+0 the image displayed as I expected it to in FireFox. FireFox and IE 8 seemed to be referencing the Image’s page geometry rather than dimensions! Is my analysis correct and if so is this true for all image types or just GIF’s?
Updated, I have included an image for your viewing pleasure! This image displays as 200 x 171 for me in FF, but is actually 200 x 160 when you download and view in a graphics program.
Header of this GIF file does not correspond to it’s body.
Image dimensions are stored in 6th to 9th bytes and from the screen shot you can see that dimensions in the header are 00C8 x 00AB which is 200×171 but it’s actual size is 200×160
So this image is not valid. There are no standardized behavior for parsing invalid gifs and that’s why there is this inconsistency.
Most probably firefox preallocates place for images before they are fully downloaded, when an image is fully downloaded it is put into the center of preallocated space. and because preallocated space is 200×171 but the actual image is 200×160 you will see a border.
EDIT: After going through GIF format reference it appears that GIF does allow this. So the image is valid. So here’s what’s actually going on here:
GIF format consists from several blocks. There is a header block and one or more(if the image is animated) image blocks (there could be other blocks as well, but they are not connected with the issue). Header block holds some information about the image, including it’s width and height. However each image block has it’s own width and height as well. So what happens with the image in question that it has the main image size as 200×171 but the single frame with the size 200×160. So most editing programs and libraries which doesn’t support animated gifs will extract the first frame and display it with the size 200×160 the browsers and editors which do support animation should display it with the full size of 200×171.
PS Every image block has image top and image left position. It seems that by allowing frames to be smaller than canvas, and allowing to move frame’s position on the canvas, GIF’s developers tried to shave couple of bytes of the animated gif files. I wonder if any of the modern graphic editors take advantage of that… probably not… 🙂