The WebApp can be used to optimise images on website's pages, resizing to be more appropriate for the viewing device. The optimiser works by passing an image path and the desired size to a Java listener, which then resizes the image, caches it and then serves it. The cache means that an image in a particular size is only created once. To do this some 51Degrees javascript needs to be added to the page and the img tags to be written in a slightly different way.

The image optimiser has two basic modes of operation: manual sizing in which the developer chooses what size the image should be, or auto sizing, where the browser uses javascript to determine the best size. Both modes require using the 51Degrees ImageHandler, distributed in the Java API download. The service is hosted entirely on your server, and there is no external dependency on a 51Degrees server. The following examples both resize on an image's width, but height resizing is also an option. If only one dimension is specified the optimiser will preserve an image's aspect ratio.

Manual Sizing

In this mode the image must be requested from the 51Degrees ImageHandler with the image path and desired size as a query string. The handler will find the image, resize, cache and respond with the image. The request should look like a regular img tag:

										
										<img
										
										
										src=
										
										
										"51D/Images/Test.jpg?w=300"
										
										
										>
										
									

This will call to the image handler asking for 'Test.jpg' to be resized to 300 pixels in width. The optimiser will try to maintain the original aspect ratio. This mode requires no Javascript on the device.

Auto Sizing

To do this some 51Degrees javascript needs to be added to the page and the img tags to be written in a slightly different way.

The following img tag:

										
										<img
										
										
										src=
										
										
										"Test.jpg"
										
										
										/>
										
									

Becomes:

										
										<img
										
										
										src=
										
										
										"E.gif"
										
										
										data-src=
										
										
										"51D/Images/Test.jpg?w=auto"
										
										
										/>
										
									

E.gif is 1x1 pixel place holder for the image, and the data-src attribute should contain path to an image that needs to be resized. The optimiser script looks for img tags with the data-src attribute and calculates the size the image should be by inspecting the DOM. Note that if the containing html blocks have default size the image block will have a 1x1 size, so the optimiser will only call a 1x1 image.

The following script should then be included in your page after the body tag:

										
										<script 
										
										
										src=
										
										
										"51D/core.js"
										
										
										></script>
										
										
										<script>
										
										
										new
										
									 FODIO();

										
										</script>
										
									

Image Paths

In both cases, the image handler should be given a relative path from the image handler to the image, not the web address. File paths with directory names are allowed.

If an image cannot be found the image handler will return a 404 error.

Additional Options

Additional options can also be set for image resizing to restrict how many images are created. All of these parameters are set in the web.xml file:

• IMAGE_MAX_WIDTH: integer - determines the maximum width an image can be resized to. Aspect ratio will be retained if possible to do so.
• IMAGE_MAX_HEIGHT: integer - determines the maximum height an image can be resized too. Aspect ratio will be retained if possible to do so.
• IMAGE_FACTOR: integer - controls a factor that image height and width must be resized too. For instance, if IMAGE_FACTOR is 2 then an image's height and width will be rounded down to the nearest size divisible by 2. This is to restrict images being made that are only very slightly different.
• IMAGE_WIDTH_PARAM:* string - controls the width query string used in the url that the image resizer responds to.
• IMAGE_HEIGHT_PARAM:* string - controls the width query string used in the url that the image resizer responds to.

*Note that if IMAGE_WIDTH_PARAM or IMAGE_HEIGHT_PARAM are changed from their default then the new value must be placed in the FODIO constructor. For instance, if they're changed to 'wi' and 'hi' then the FODIO constructor would be new FODIO('wi', 'hi');

A demonstration can be seen in the Gallery page in the example web site.