How to compress images with Google App Engine Blob

Question

We have an app that servers a series of images from blobstore. An example is here:

http://lh4.ggpht.com/f76xUkRZLRkb_Qz5uu82TX3LoBRh4eYb9hxYwMRMLCk5ghO_OL0DW2v4rRnkewUyDWfBuBttgbUvuJJXwtFQosEB=s0

It was a huge png, so this downloads at 536K.

If we resize it to 400 across, it's still huge (263k):

http://lh4.ggpht.com/f76xUkRZLRkb_Qz5uu82TX3LoBRh4eYb9hxYwMRMLCk5ghO_OL0DW2v4rRnkewUyDWfBuBttgbUvuJJXwtFQosEB=s400

How can we request or store the picture in some kind of better compression? We have a mobile client for our app, and waiting through 273K is making it really slow.

Answer 1

You can use PIL to serve the re-compressed image dynamically from your frontend instance.

Answer 2

There is Images API. To compress and resize image:

// get image from blobstore
ImagesService imagesService = ImagesServiceFactory.getImagesService();
Image oldImage = ImagesServiceFactory.makeImageFromBlob(blobKey); 

// compress & resize it
OutputSettings settings = new OutputSettings(ImagesService.OutputEncoding.JPEG);
settings.setQuality(90);
Transform transform = ImagesServiceFactory.makeResize(newWidth, newHeight) 
Image newImage = imagesService.applyTransform(transform, oldImage, settings);
byte[] blobData = newImage.getImageData();

//save data to blobstore
FileService fileService = FileServiceFactory.getFileService();
AppEngineFile file = fileService.createNewBlobFile("image/jpeg", someFilename);
FileWriteChannel writeChannel = fileService.openWriteChannel(file, true);
writeChannel.write(ByteBuffer.wrap(blobData));
writeChannel.closeFinally();

// get the blobKey to newly written data
BlobKey blobKey = fileService.getBlobKey(file);

Answer 3

You can enable Pagespeed service to re-compress images on the fly.

Answer 4

You can upload differents version (with different compression ratio) of your images to the blobstore or cloud storage and select the version to display client side (using CSS or client side logic).