Johan Lindström

JPEG 2000 is a really nice format, which should be very suitable for web use, as it sports good compression ratios, and even more importantly: alpha channels! Unfortunately, not many browsers support JPEG 2000 natively. However, Safari one of them, so why not save on bandwidth and send JPEG 2000 images when the user agent indicates that the browser is Safari/WebKit! This is easily done with some PHP scripting. This is how we did it on bullstorm.se with the huge screenshot images with alpha channel transparency. If the browser is Safari, a JPEG 2000 image is used, and the web page has a nice gradient background. If the browser is something else, that doesn't support JPEG 2000, the images are plain old JPEG, and the background becomes a single color (no alpha channel = no nice compositing).

So, all is nice and well? No! Take a look at the two images below. On top is what we would like the image to look like. At the bottom is what the image will look like some of the time in Safari. Due to a bug in Safari (or maybe Cocoa), the image draws progressively as it is being downloaded, but does not redraw the final state once the entire image has been downloaded, resulting in that on slow connections, the image will look horrible!




Below is a simple fix for this. It requires JavaScript, but most if not all Safari users will have JavaScript enabled anyway. Insert this tag where you want your image:

<img id="screenshot" width="554" height="384">

And then, insert this code somewhere on the page, but below the image tag, in a <script> block:

function loadImage()
{
    document.getElementById("screenshot").src = image.src;
}

image = new Image(554, 384);
image.onload = loadImage;
image.src = "images/Screenshot.jp2";

The image will download completely, before handing it off to Safari to display. This will ensure that the final, completely downloaded, image will be displayed by Safari. Yey!

Please note that this script requires that the image tag is defined before the script that loads the image. Otherwise you may run into trouble; with the image loading before the image element exists. You can probably fix that by some more JavaScript trickery, but this is simple and it works. Does it work in XHTML as well? Well, all bets are off...

Ok, so no more VCD Builder. I have not been completely idle for the last year and a half though. Been busy working on updates to some of the core tools of ffmpegX, and I have also been working on a rather big project myself, in an area similar to ffmpegX and VCD Builder. I'll let you know when it's finished; which should have been about six months ago, but it's taken a lot more time than I had originally planned. My new release date is "before summer", and I sure hope that I can keep that release date!