5 ms·

The file size isn't too bad, but in Safari the rendering time is terrible. You can see it render each block, and it takes about 10 seconds to render the whole t

The file size isn't too bad, but in Safari the rendering time is terrible. You can see it render each block, and it takes about 10 seconds to render the whole thing. I assume this is because it's not a commonly used feature, so the code paths are only implemented for compliance rather than performance.

deleted 13y ago
[deleted]
joshzayin 13y ago
That's just the animation -- the gif is constructed to animate displaying each block.
- fredsted 13y ago
  I find it very weird that the author of the page did not display this information on the page.
  - deleted 13y ago
    [deleted]
  - dfox 13y ago
    He uses mechanism that is inherent in GIF specification and can be used for animation, more than 256 color images or images that do not store image data for empty areas (or any combination). GIF stores sequence of rectangular blocks of image data each with its specified position in resulting image, own palette and optional delay before start of drawing (for animation). Browsers tend to assume that GIFs with multiple blocks with zero delay between them are broken animated GIFs (and enforce some minimum delay), because such files do exist and are certainly more common than GIFs with holes or large numbers of colors.
  - michaelvillar 13y ago
    http://cl.ly/image/3W2V3T3N3P2i http://cl.ly/image/3W2V3T3N3P2i
simonlc 13y ago
Same thing in Firefox.
- rorrr2 13y ago
  Same in Chrome 26 (Win7)
mvzink 13y ago
It may be possible to work around that: the trick they use to get full color is that each animation frame is allowed to have its own 256 color palette. So for each block of 256 colors, you have a single animation frame "played" which colors in only that block (the rest is transparent). Hypothetically, the only reason it renders so slowly is that there's a pause between playing each frame.
- Someone 13y ago
  Yes, but it seems that delay may not be avoidable. http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi... says Safari does 16 frames per second max. Drawing 32k colors at 256 colors per frame takes 128 frames. At 16 fps, those would take 8 seconds to draw.
  - jamesaguilar 13y ago
    I think it would be cool if the gif gradually enhanced the colors, starting out with the 256 colors and filling in details in subsequent passes. The user would just notice the color fidelity increasing. The trouble is that I don't know if gif implements non-looping animation.
    - tekromancr 13y ago
      It does support non looping animations. The problem is that I am not sure how you would calculate the 'tween frames. I get the first frame, it's just the final image dithered to 255 colors, but what would one of the intermediate frames look like. A small box with a more restrained palate, or would you break the final image into frames based on spectrum?
      - jamesaguilar 13y ago
        I would try to maximize the delta(PSNR) per frame, as a first cut. There are also good perceptual difference metrics. I don't know what algorithm to use. Maybe just the absolute difference on each pixel. Or, you could think of groups of colors to enhance if you're willing to grow the size of the image.
buddydvd 13y ago
It's actually more of a hack to deal with malformed GIFs and goes directly against spec. To address GIFs where each frame has a 0 frame delay, most GIF decoders implement a minimum frame delay value. See: http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi... Edit: This is what it looks like with all frame delays set to 2 centiseconds: http://i.imgur.com/24xpZEd.gif http://i.imgur.com/24xpZEd.gif On Chrome and Firefox, you should see it animate more quickly.
- tekromancr 13y ago
  I figured that that was the issue. Thanks for the link!
- Wevah 13y ago
  GIF performance seems improved in safari, at least in 6.x, though this is just anecdotal evidence. The GIFs with 0.02 second frames (the actual ones, not just the "here's what it looks like under x browser" ones) seem to render with the same frame rate for me in Safari and Chrome now.
- sitharus 13y ago
  Interesting, thanks for the details
gilgoomesh 13y ago
> The file size isn't too bad 184,565 bytes for the GIF versus 34,991 for a PNG of the same or 7,692 for a JPEG with no visible artifacts. I'd say the file size is unusably huge.
- kijin 13y ago
  Convert it to true-color (24-bit) Windows BMP, and it's 141,538 bytes. So the GIF is even larger than the raw RGB values of each and every pixel concatenated together.

deleted 13y ago

[deleted]

joshzayin 13y ago

That's just the animation -- the gif is constructed to animate displaying each block.

fredsted 13y ago
I find it very weird that the author of the page did not display this information on the page.
- deleted 13y ago
  [deleted]
- dfox 13y ago
  He uses mechanism that is inherent in GIF specification and can be used for animation, more than 256 color images or images that do not store image data for empty areas (or any combination). GIF stores sequence of rectangular blocks of image data each with its specified position in resulting image, own palette and optional delay before start of drawing (for animation). Browsers tend to assume that GIFs with multiple blocks with zero delay between them are broken animated GIFs (and enforce some minimum delay), because such files do exist and are certainly more common than GIFs with holes or large numbers of colors.
- michaelvillar 13y ago
  http://cl.ly/image/3W2V3T3N3P2i http://cl.ly/image/3W2V3T3N3P2i

simonlc 13y ago

Same thing in Firefox.

rorrr2 13y ago
Same in Chrome 26 (Win7)

mvzink 13y ago

It may be possible to work around that: the trick they use to get full color is that each animation frame is allowed to have its own 256 color palette. So for each block of 256 colors, you have a single animation frame "played" which colors in only that block (the rest is transparent). Hypothetically, the only reason it renders so slowly is that there's a pause between playing each frame.

Someone 13y ago
Yes, but it seems that delay may not be avoidable. http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi... says Safari does 16 frames per second max. Drawing 32k colors at 256 colors per frame takes 128 frames. At 16 fps, those would take 8 seconds to draw.
- jamesaguilar 13y ago
  I think it would be cool if the gif gradually enhanced the colors, starting out with the 256 colors and filling in details in subsequent passes. The user would just notice the color fidelity increasing. The trouble is that I don't know if gif implements non-looping animation.
  - tekromancr 13y ago
    It does support non looping animations. The problem is that I am not sure how you would calculate the 'tween frames. I get the first frame, it's just the final image dithered to 255 colors, but what would one of the intermediate frames look like. A small box with a more restrained palate, or would you break the final image into frames based on spectrum?
    - jamesaguilar 13y ago
      I would try to maximize the delta(PSNR) per frame, as a first cut. There are also good perceptual difference metrics. I don't know what algorithm to use. Maybe just the absolute difference on each pixel. Or, you could think of groups of colors to enhance if you're willing to grow the size of the image.

buddydvd 13y ago

It's actually more of a hack to deal with malformed GIFs and goes directly against spec. To address GIFs where each frame has a 0 frame delay, most GIF decoders implement a minimum frame delay value. See: http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi... Edit: This is what it looks like with all frame delays set to 2 centiseconds: http://i.imgur.com/24xpZEd.gif http://i.imgur.com/24xpZEd.gif On Chrome and Firefox, you should see it animate more quickly.

tekromancr 13y ago
I figured that that was the issue. Thanks for the link!
Wevah 13y ago
GIF performance seems improved in safari, at least in 6.x, though this is just anecdotal evidence. The GIFs with 0.02 second frames (the actual ones, not just the "here's what it looks like under x browser" ones) seem to render with the same frame rate for me in Safari and Chrome now.
sitharus 13y ago
Interesting, thanks for the details

gilgoomesh 13y ago

> The file size isn't too bad 184,565 bytes for the GIF versus 34,991 for a PNG of the same or 7,692 for a JPEG with no visible artifacts. I'd say the file size is unusably huge.

kijin 13y ago
Convert it to true-color (24-bit) Windows BMP, and it's 141,538 bytes. So the GIF is even larger than the raw RGB values of each and every pixel concatenated together.