- Updating Device Data
- Web Apps
- Reference Pages
- Useful Links
- Supported Versions
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.
Using Image Optimiser With Java
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.
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" />
<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.
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.
Image optimiser is controlled via the Web.xml file. See the configuration page for more details.