Google Web Toolkit Tip... PNGCrush with ImageBundle

Here’s a tip when using GWT’s image bundle.....

The short version



Use PNGCrush to compress the image after GWT compiling.



The long version...



First, a quick overview as to what an ImageBundle is.... basically its a way to consolidate a number of images into 1 bundle to save downloads reduce app startup time

GWT’s ImageBundle makes creating bundles easy. Heres the main steps


1) Create a new interface which extends ImageBundle e.g.;

package com.garrykelly.images;

public interface MyImageBundle extends com.google.gwt.user.client.ui.ImageBundle
{
public AbstractImagePrototype bgColor();
public AbstractImagePrototype bgColorSelected();
public AbstractImagePrototype fgColor(); // add more images as you need them
}



2) Now create your images as pngs, gifs or jpgs. You’ll need to put your images in the same directory as the java file. In this case, you’ll need bgColor.gif, bgColorSelected.gif and fgColor.gif and drop them in your .../images directory. Note: You can have mixtures of gifs,pngs etc, the important thing is the name of your image file must match the method signature.



3) In your GWT XML file, you’ll need to specify the app uses the ImageBundle.



As part of the compilation process, GWT then creates an ‘image strip’ or image bundle which is a png file with all your images in a horizontal line. The advantage of this is that your browser just hits the server once to get all the tool tip images as a sprite. So layout is much quicker. heres the image bundle from the GlowDay Widget Designer






4) From a programming perspective there isn’t much changes....Wherever you need to add the image to your page, you’ll need first to initialize the image bundle using something like. theImageBundle = (MyImageBundle) GWT.create(MyImageBundle.class);

You will only need to do this once and can reuse the class to create all your images. To actually create the image.

Image mBgColorButton = theImageBundle.bgColor().createImage();


Thats it, youre done!


Now, during createImage, GWT actually creates a transparent image with the same height/width as your original image, but with the part of the ‘image strip’ that corresponds to the image you want as the visible background. When GWT creates the image, it’s named something like 68EA4F204B56176611D9707828B376DD.cache.png -- the important thing is the name will only change should the images making up the bundle change, so rebuilding and redeploying your app works fine for browser caching.



Pngcrush

http://pmt.sourceforge.net/pngcrush/ is a great free utility which tries different compression levels when saving a png file and saves it using the one that gives the smallest file size....For me, using the ImageBundle reduced the file size from 79k to 34k...

Normally, If you’re image bundle has just images for a toolbar, they will probably be all the same height and the bundle will be just a consolidated strip of these images.

Normally, If you’re creating a toolbar the images will be the same size and the sprite will be just a consolidated strip of these images. In my case I had a few images that were significantly bigger (for the color picker), so there is quite a lot of transparent space on the image ...


At present, the Widget Editors image bundle has 38 separate images. In Windows Explorer the total size in bytes is 34k, so GWT combined with pngcrush works pretty well, it saves 37 downloads and no overall increase in file size. So if you're image bundle has many different sized images, it makes sense to try it out.


To see it in action, check out the Widget editor at www.glowday.com/editor.... You’ll see the 38 buttons in action for stuff like changing the font, colors, opacity etc of components as you design your widget. All comments/feedback welcome either here or on the GlowDay site.



Cheers, GK