Before you continue, we should point out that the technique below has two bad side effects:

So I would recommend doing this only for your own personal custom channels or if you are absolutely sure your customers really want this. In other words, do not use this technique to create a super-huge banner ad.

Topics in this section:

The original oversized image

Suppose that you wanted to take this map of the T (the Boston subway system) and put it on your mobile device.

Image Copyright 1999 by the Massachusetts Bay Transit Authority. Not to be reproduced without express written content from the MBTA.

The first thing you would do, of course, is convert it to greyscale and posterize it down to a 4-gray image so that it will not dither on a 4-gray device like a Palm III.

Right now, the image is 381x426 pixels — that is way over our "150-pixel in either dimension" limit, so you are going to have to shrink it down (and if you do not, the AvantGo sync server will do it for you). This means you will end up with a 134x150 graphic that looks something like this.

This clearly is not good. None of the station names in the image are readable.

Breaking up the oversized image

While it is true that the AvantGo sync server will not accept any image larger than 150 pixels, that does not mean you cannot give readers the illusion that it is a whole lot larger. First, with your favorite graphics-editing program, break this image up into several chunks that are no larger than 150 pixels in any side.

Table 4-2 Image in pieces under 150-pixel limit

Re-assembling the image

Now all you have to do is create a table with border=0, cellpadding=0, and cellspacing=0. Then place the different chunks of your image in that table.

Table 4-3 Image pieces reassembled in table

When you look at the image in the AvantGo Client, it will look like one large image. Now I will be able to look at my Palm and navigate the Boston subway flawlessly! (Except for the fact that I live in San Francisco, this would be really convenient.)

Easy ways to break up images

This looks really tedious to do by hand! Is there an easy way to break up images?

Both Adobe's ImageReady and Macromedia's Fireworks have Image Slice tools. These will easily let you split up an image into several parts, which you can then save into a table. Both programs will create the HTML for the table, as well as create several image files (one for each of the image "chunks") and place them in a folder of your choosing.

If you are generating images dynamically, there is probably a way to automate this process. Perl and PHP will let you alter JPEG files if you have the GD graphics library. And if you are writing Java servlets, the drawImage() and clipRect() functions should prove quite useful.