- Premium Data
- Getting Started
- 51Degrees.php Config
- Using the Detector
- Advanced Usage
- Accessing Metadata
- Image Optimiser
- Client Side Overrides
- Passing Properties To Client Side
- User Performance Monitoring
- Usage Sharing
- Automatic Data Updates
- Advanced Suggestions
Image Optimiser - Version 3
51Degrees can be used to optimise your pages' images, resizing to be more appropriate for the viewing device. The PHP optimiser works by passing an image path and the desired size to a PHP page, 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.
In this mode the image must be requested from the 51Degrees ImageHandler PHP page with the image path and desired size as a query string. The PHP page will find the image, resize, cache and respond with the image. The request should like like a regular img tag:
<img src= "ImageHandler.php?src=Test.jpg&width=300" >
<img src= "Test.jpg" >
<img src= "E.gif" data-src= "ImageHandler.php?src=Test.jpg&width=auto" >
E.gif is 1x1 pixel place holder for the image, and the data-src attribute should contain the location of ImageHandler.php, with the image path in the query string. 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 optimsier will only call a 1x1 image.
The following script should then be included in your page after the body tag:
<script src= "51Degrees.core.js.php" ></script> <script> new FODIO(); </script>
In both cases, the image handler should be given a relative path from the image handler to the image, not the web address. Up directory (../) and file paths with directory names are allowed. In the examples given, 'Test.jpg' must be in the same directory as 'ImageHandler.php'.
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 51Degrees.php file:
- $_fiftyone_degrees_max_image_width: integer - determines the maximum width an image can be resized to. Aspect ratio will be retained if possible to do so.
- $_fiftyone_degrees_max_image_height: integer - determines the maximum height an image can be resized to. Aspect ratio will be retained if possible to do so.
- $_fiftyone_degrees_image_factor: integer - controls a factor that image height and width must be resized to. For instance, if $_fiftyone_degrees_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.
- $_fiftyone_degrees_image_width_parameter:* string - controls the width query string used in the url that the image resizer responds to.
- $_fiftyone_degrees_image_height_parameter:* string - controls the width query string used in the url that the image resizer responds to.
A demonstration can be seen in example/Gallery.php, distributed in the API download.
Your PHP server may encounter out of memory errors when resizing large images. You may try allocating more memory to the server or using smaller source images.