51Degrees Image Optimiser is a simple and straightforward way of resizing images. Resized images are cached on the server and if an image of the requested size exists it will be retrieved from cache, preventing further, unnecessary resizing.

The image optimiser has two modes of operation:

• Manual mode where the developer chooses the size the image should be. Image size is hard coded into the image URL.
• Automatic mode where a JavaScript snippet is sent as part of the response. Javascript will then determine the best size for an image and automatically request it.

When enabled in the Web.xml file the image optimiser will intercept requests for images and provide a response based on the current settings. This functionality will operate without any further configuration and is supported in all versions of the data set including the free Lite version. Web sites using background images, or other large images will benefit immediately from this improvement.

Manual Resizing

In this mode the image must be requested from the 51Degrees ImageHandler with the image path and required 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"
										
										
										/>
										
									

Automatic Resizing

Add 51Degrees Core javascript to the page that requires image optimisation.

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

										
										</script>
										
									

The way in which images are included needs to be modified. The "src" element should now point to an empty transparent GIF image or a placeholder image whilst the actual path to image should be specified in the data-src. For example:

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

For best results, automatically resized images should be assigned a width of 100 percent as the script is looking at the dimensions of the encapsulating element.

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.

Configuration

Image optimiser is controlled via the Web.xml file. See the configuration page for more details.