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.

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 PHP page, distributed in the PHP 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 optimser will preserve an image's aspect ratio.

Manual Sizing

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"
										
										
										>
										
									

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.

										
										<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>
										
									

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. 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

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.

Troubleshooting

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.