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
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" >
The following img tag:
<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>
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 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.