This is the second part of this post about how Android browser reduces 32 and 24 bits PNG images to 16 bit images, at loadtime. In a mobile device this may not mean a great visual impact. But when you are using PNGs to store data this is a big problem.

On the first part of this post I talk about how to store data in a bitmap and later using it from the web using javascript and canvas element. That technique failed with all Android device browsers I tested due to that bit depth reduction.

The solution is fairly simple. Instead of using one pixel to store one byte of data you could use two pixels per byte, using the 4 more significant bits of each pixel. A possible java generation code could be now something like this:

// Suppose 'width' and 'height' as image dimensions
// and 'string' as in data

// Create image
int type = BufferedImage.TYPE_BYTE_GRAY;
BufferedImage image = new BufferedImage(width*2, height, type);
// Get raster
WritableRaster raster = image.getRaster();
int index = 0;
for(int y=0; y<height; y++) {
  for(int x=0; x<width; x++) {
    // Get data (filling with zeros at the end)
    int current = index<string.length()? (int)string.charAt(index++): 0;
    // Get data more significant bits setting the others to zero
    // and store them
    int hi = current&0xf0;
    int[] hiArray = { hi };
    raster.setPixel(x*2, y, hiArray);
    // Get data less significant bits moving them to more significant
    // bits position to store in image
    int lo = (current&0x0f)&lh;<4;
    int[] loArray = { lo };
    raster.setPixel(x*2 + 1, y, loArray);
  }
}
// Finally write the image to disk
ImageIO.write(image, "png", new File(filename));

With this piece of code the generated image has doubled in width. You may think this would cause the image to be doubled size. But due to PNG image compression the resulting image gets only a few KBs more. Compressing my AirStrike 10K game with this technique only got a few 100 more bytes. And it worked on Android browsers!

Now, in the javascript side, we have to get image pixels in pairs and create one data byte per pair. But, if you remember the last part of this post, Android browser makes some dithering  when reducing bit depth. So, we need to have this in mind when unpacking data bytes. Simply getting the first pair byte for the most significant bits and the second pair byte for the less significant bits may not work in cases where dithering effect occurs.

Another time the solution is easy. Simply add some increment to image input bytes — something centered between 1 and 15. This will avoid the dithering effect getting the right original value. Then, in the other post’s javascript code, when retrieving data from image data, just make something like this:

// ...
var hi = (data[index]+8)&0xf0;
var lo = (data[index+4]+8)>>4;
index += 8;
var value = hi + lo;
if(value>0) {
  var char = String.fromCharCode(value);
  // ... do something with char value
}
// ...

And that’s all! Now you can use the PNG compression method in Android browsers too.

I’ve seen Android web browser reduces the quality of images inside an HTML in load time. I’ve reproduced this behaviour with some Android 2.x devices and various emulator configurations. It seems that when it loads 24 or 32 bits images it reduces them to 16bits (4 bits per component: reed, green, blue and alpha). And you cannot do anything about it (if you know how to avoid it, please tell me!).

That doesn’t have very high visual impact. But you may have problems when trying to read data from PNGs (supposed to be lossless). This is a technique based on HTML5 canvas element and its method getImageData, storing some data in a PNG file and then reading it from the web using javascript. For example, you can write into a PNG some javascript code – using a gray scale image and storing one character per pixel -. Reading from the web and extracting the original javascript code from its image obtaining a code string can be evaluated with eval. This is just an example, you can use it to store anything you want: CSS, more HTML, a love letter, etc.

Why would you do this? The answer is PNG compression. But when we try to use this technique in Android browsers, due to that image bit reduction, we only get useless broken data.

Let’s see what happens from a basic example. We’ll generate a gray scale image with only one horizontal line. Each pixel in that line will have values from 0 to 255. The java generation code could be, for example:

// Create image
int width = 256;
int height = 1;
int type = BufferedImage.TYPE_BYTE_GRAY;
BufferedImage image = new BufferedImage(width, height, type);
// Get raster
WritableRaster raster = image.getRaster();
for(int x = 0; x < width; x++) {
  // and put values
  raster.setPixel(x, 0, new int[]{x});
}
// Write image to disk
ImageIO.write(image, "png", new File("image.png"));

That code above simply creates a 8 bit gray scale image and set its pixels with values from 0 to 255 values. Now, from the client side, we could retrieve this data with this javascript code:

// Create image to store PNG
var image = new Image();
// When image is load this function is called
image.onload = function() {
  // Create canvas
  var width = this.width;
  var height = this.height;
  var canvas = new Element('canvas', {
    width:width,
    height:height
  });
  var context = canvas.getContext('2d');
  // Draw image in that canvas...
  context.drawImage(this, 0, 0);
  // ...to get its imageData
  var imageData = context.getImageData(0, 0, width, height);
  var data = imageData.data;
  var values = "";
  for(var x = 0; x < width; x++) {
    var value = data[x*4];
    values.push(value);
  }
  // Do something with values
  // [...]
};
// Set the image src to load it
image.src = "route_to/image.png";

Look at canvas getImageData method documentation if necessary to understand all the code above.

In all platforms, except Android, you get all the values as expected: values from 0 to 255. But in Android browsers you get something very different. This are the values requested:

0, 0, 0, 0, 0, 0, 8, 0, 8, 8, 8, 8, 8, 8, 16, 8, 16, 8, 16, 16, 16, 16, 24, 16, 24, 16, 24, 24, 24, 24, 33, 24, 33, 24, 33, 24, 33, 33, 33, 33, 41, 33, 41, 33, 41, 41, 41, 41, 49, 41, 49, 41, 49, 49, 49, 49, 57, 49, 57, 49, 57, 57, 57, 57, 66, 57, 66, 57, 66, 66, 66, 66, 66, 66, 74, 66, 74, [... ...], 206, 206, 206, 206, 206, 206, 214, 206, 214, 214, 214, 214, 214, 214, 222, 214, 222, 222, 222, 222, 222, 222, 231, 222, 231, 231, 231, 231, 231, 231, 239, 231, 239, 239, 239, 239, 239, 239, 247, 239, 247, 247, 247, 247, 247, 247, 255, 247, 255, 255, 255

This is like we were lossing the 4 less significant bits. The logic behind it is that Android browser converts all images to 16 bits, 4 bits per component. So, even our image was 8 bits gray scale, it only respects the 4 more significant bits, repeating them for the red, green and blue components.

But you have to be careful, because it also introduce a little dithering while reducing. Let’s see it graphically in this table:

So if we want to use the PNG data extraction method and doing it in a fully portable way (or at least working on Android) this method is not valid, because our data will be broken!

In the second part of this article we will discuss one relatively easy solution to this problem. Stay tunned.