Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do browsers detect GIF image sizes?

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 200x160+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.

here is the image

like image 325
stevebot Avatar asked Jul 25 '11 20:07

stevebot


People also ask

What determines the size of a GIF?

The number of pixels compressed into the image is the biggest factor for determining the file size of the GIF. Most of the time, GIFs are made to be less than 500 pixels wide.

What is the size of a animated .GIF image?

Uploads are limited to 100MB, although we recommend 8MB or less. Source video resolution should be 720p max, but we recommend you keep it at 480p.


1 Answers

Header of this GIF file does not correspond to it's body. enter image description here

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 200x171 but it's actual size is 200x160

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 200x171 but the actual image is 200x160 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 200x171 but the single frame with the size 200x160. So most editing programs and libraries which doesn't support animated gifs will extract the first frame and display it with the size 200x160 the browsers and editors which do support animation should display it with the full size of 200x171.

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... :)

  1. GIF format byte order
like image 190
Ivan Avatar answered Sep 24 '22 01:09

Ivan