Bad results with small GIFs

[julescarbon]

When using this app to display small GIFs, the images appear blurry and distorted.

Steps to reproduce:

1. Clone the app as per instructions
2. Load a small non-photorealistic "pixel art" GIF, preferably less than 100x100px
3. Observe blurred edges and interpolated color, lacking fidelity to the original pixel artwork.

I tried this with several gifs. Had the same problem with all of them..
http://jeweledplatypus.org/pixels/other/antenna.gif
http://www.pixeljoint.com/files/icons/full/avatar_n01.gif
http://www.pixeljoint.com/files/icons/rotating_skull.gif

While this may not be a problem with photorealistic gifs, where the interpolation might make sense, it is an issue with gifs using a modest color palette -- especially 32 colors or less. GIFs of the Web 1.0 era are the worst affected. This started becoming an issue for browsers circa 2003, beginning in Safari/Webkit and eventually spreading to Firefox and IE.

One solution would be to load the GIF as binary data, decode it into constituent frames, scale using the nearest-neighbor algorithm, and animate these images frame-by-frame on a canvas element. While this may detract from portability (right-click, save as, which could be spoofed with the contextmenu event), it will certainly improve fidelity.

Due to the same-origin policy, for this to work for GIFs hosted on a foreign server, you will need to host a small proxy for the binary data, which would transmit the file with the Access-Control-Allow-Origin header to allow client-side decoding.

Browsers that do not support CORS headers are left in the lurch. Safari 3, Firefox 2 are examples of this. An alternative for these browsers is decoding the GIF to constituent images server-side, and transmitting the frames as individual files.

These solutions will not work at all for GIFs hosted on a file:/// URL, in any browser.

Firefox now offers the css directive "image-rendering: -moz-crisp-edges;" which will perform a nearest-neighbor resize automatically. IE7 and up offer "-ms-interpolation-mode: nearest-neighbor;". However history has taught us not to rely on the browsers to preserve old functionality -- you need only look to the slow death of the marquee tag, or the quick death of blink.

We need to offer a fallback for newer browsers.

[protonpopsicle]

First off thank you for the excellent feedback. A little research confirms that there's no complete solution using vender specific css properties. The situation with Chrome is a real bummer.

This example of a canvas solution interests me, I'd love to avoid a server component.

As a stopgap, I've added a nearest-neighbor class inspired by this post. The issue should remain open until a real cross-browser fix is implemented.

<div id="gif" class="portrait nearest-neighbor" data-src="http://jeweledplatypus.org/pixels/other/antenna.gif"></div>

d34452d