Why is an image created with Google's Swiffy blurry on SOME browsers?

Content
1

Have a weird issue that I hope SOMEONE has an answer for, or at least can oint me in the right direction.

I recently converted my wife’s website so that I removed all Flash elements and rendered them in HTML5 via Google’s Swiffy tools. The reason for the conversion was that Flash no longer is supported on mobile devices, by default and we didn’t want to lose those views.

I converted a flash header, among a few other Flash elements, with swiffy into HTML5 and the resultant code works great, on most browsers. In fact, I’m only having problems with ONE of the Flash elements, and specifically only with ONE of the images related to that Flash element.

The element is simply a set of four images arranged horizontally that transition into other images. There are about 4 images per panel that rotate.

The problem is on panel number 2, the First image comes up EXTREMELY blurry, to the point it is not recognizable, on some browsers. It is only the first image in the sequence.

The weird part is that the image is perfectly clear and fine when viewed with Chrome, Firefox, and Safari (v 6.0.5). BUT if I view it with Safari (v 5.0.6), Samsung’s mobile browser found on their Galaxy line of phones, or Mobile Dolphin Browser it comes up blurry for that photo only. If I switch to Chrome’s Mobile Browser it looks fine.

Anyone ever experienced this? Anyone have any ideas?

Another detail to note is that the swiffy conversion process encoded the images into the file itself meaning there are no image file references, the images are actually encoded directly into the file.

Any help figuring out this mystery very appreciated.

Joel Z.

The site is located at to see an example of what I’m talking about: http://www.drcarolinemin.com

2

I’d check that within the original flash animation, the particular image doesn’t have any filters or transforms applied even if set to minimal values. Some effects may only translated to browser specific css3 transforms which may explain why it’s only showing up in a certain browser engine.

3

Also, in flash animations if image smoothing was set off and non-while pixel coordinates were used, you’d sometimes see odd artefacts so might be worth checking this as well.

4

Great reply! Thanks! Seems to make sense, there is definitely some color fading effects going on with the image, as well as transition effects. What I don’t understand is that I believe all the other first images have the same type of effects applied to them.

I guess my next question is, can I just change the swiffy generated JSON in the js file to use an image file reference rather than the inline encoded image data?

Right now it uses a “data” key then lists the encoded text version of the image along with a few parameters specifying image characteristics (height, width, etc…).

What would be the proper way to refer to an image file instead? (Just getting familiar with JSON and js.

Thanks!

Jz.

5

You could of course refer to an external image asset, however then you have the issue whether the animation can operate asynchronously (i.e will the javascript and html collapse while waiting to load this image). I’d check first by saving out the image whether the blurriness is an artefact that has ben imprinted into the image, or whether it’s a result of an animation effect.