So we had a bit of an ongoing issue with a client site that had been perplexing us significantly. On their website they were seeing what they described as a 'blurry' navigation when they viewed their website on their computer.
"Can you help?" they asked and, thinking that they were using an archaic version of Internet Explorer or similar we said absolutely. Bound to be a PNG problem or images that are being resized by the browser we thought. No problem to us experienced folk.
We tested the site out in all those long forgotten versions of Internet Explorer like 5.5 in the excellent
IE Renderer only to find that the images appeared perfectly every time. No dice, it wasn't an IE problem.
Next we trawled through the source code of the website (which we didn't build) and the design was a fairly clean CSS/XHTML build and the images in question were actually JPEGs so transparency couldn't be the issue. Also they were being displayed at 100% of their size so no resizing in the browser was happening either. And that left us stumped.
We then supposed that it was an issue with monitor setup, maybe a field of dead pixels or something similar on the monitor in question, only to be informed that it happened on their laptop too, in Firefox! Bamboozlement!
So we asked the client to send us screenshots of the offending pages, which showed an image of crystal clear image elements surrounding a horrendously blurry navigation. Could the JPEG be compressed so much that it was blocky and pixelated? No, remember that we'd tested the site on a variety of browsers and OS setups prior to this, and it was fine.
It was only upon our intrepid nethead Kieran seeing the screenshots that the problem became clear. This sort of thing happened to him when he used his mobile phone as a modem to browse the net. A quick check around the screenshots showed a tab for 02 mobile, suggesting that the client was using mobile broadband. And eureka! Problem solved.
As web developers we face all manner of compatibility issues with browsers, operating systems, devices, mobiles and all manner of stuff, it's only a matter of time before Microsoft breaks the Internet again with its next version of Internet Explorer. We have enough on our plates in this regard.
Just when you thought it was safe to go back on your netbook welcome to 'compression artifacts.' In short mobile broadband suppliers are using little black boxes on their network to store images, compress them and then serve the compressed, and frankly messed up, versions to clients. This is an effort to make the images smaller and therefore save them money on the amount of data they have to serve.
Thank you mobile broadband suppliers. Maybe we'll start designing sites with massive byte sizes just to redress the balance and watch as your horrible masts strain and crumble under our wrath?
In a word, byte me...
More info for the fellow afflicted on
Wikipedia and on
Mobile Broadband RocksLabels: blurry images, compression artifacts, mobile broadband, pixelated images