Using 51Degrees Image Optimiser In .NET, PHP and Java
Images and graphics can often cause websites to take a significant amount of time to load and constitute a large chunk of traffic. This is especially a problem for devices with slow Internet connection. Using RWD does not eliminate this problem either. This article will demonstrate how easy it is to use 51Degrees Image Optimiser and provide two examples in PHP.
Image Optimiser
Version 3 the 51Degrees Image Optimiser is available to all, regardless of the data file type used. The following platforms are currently supported: PHP, .NET, Java. Image optimiser works in manual and automatic modes. Manual mode lets you choose image size while automatic mode will find the best size.
Resized images are cached so the same process won't have to be repeated many times for the same images.
The automatic mode relies on JavaScript to serve the correct size. If you wish to use automatic mode then you will need to include a 51Degrees.core.js file and use the FODIO JavaScript object. Click on the 'Learn more' link for the relevant technology below.
.NET
To make use of 51Degrees .NET Image Optimiser you will need to enable it in the 51Degrees.config file. If you are performing a new install the relevant option may already be enabled. With .NET very little effort is actually required to make use of the image optimiser. For example:
Manual mode:
<img src=”/Landscape.jpg?w=300”/>
Automatic mode:
<img src="/Empty.gif" data-src="/Landscape.jpg?w=auto" style="width:100%;"/>
PHP
To make use of Image Optimiser in PHP the format of the links will need to change slightly. Instead of the usual direct link to image in src you will need to link to the ImageHandler.php which is located in the 'core' directory along with 51Degrees device detection files and supply the link to image you want to resize as a parameter. For example:
Manual mode:
<img src="ImageHandler.php?src=Test.jpg&w=300" >
Automatic mode:
<img src="E.gif" data-src="ImageHandler.php?src=Test.jpg&width=auto" >
Java
51Degrees Image Optimiser for Java works by passing path to image and the desired image parameter such as width or height to listener. Image is then either resized if this is the first encounter for image/size combination or retrieved from cache. For example:
Manual mode:
<img src="51D/Images/Test.jpg?w=300" >
Automatic mode:
<img src="E.gif" data-src="51D/Images/Test.jpg?w=auto" />
PHP Examples
To illustrate how 51Degrees Image Optimiser is used with PHP we will look at the following two examples:
First PHP Image Optimiser example is straightforward: supply the right size for the right device type. For this example we have a single page that contains an image and some text. We are using 51Degrees device detection to provide a product image of the appropriate size for the viewing device. In this example we supply images of the following sizes: 1000px for desktop, 800px for a tablet, 600px for a smart phone and 200px for small screen devices as shown in the following snippet:
<?php
switch($_51d['DeviceType'])
{
case 'Tablet': $width = 800;
break;
case 'SmartPhone': $width = 600;
break;
case 'Desktop': $width = 1000;
break;
case 'SmallScreen': $width = 200;
break;
}
?>
For this example you need an Enterprise or Premium data file.
Second example is a very basic image manipulation tool that allows user to select the size of picture they would like from preset sizes or enter the desired width in pixels. The page consists of a form where the user can input the desired width, height or both and the actual image. You may choose to add an upload feature so custom images can be manipulated. This demo makes use of a specific image called 'lions2.jpeg' located in the 'core' directory.
This code snippet processes user input and sets the image parameter string that will later be used to display the image using ImageHandler.php.
<?php
/****** snip ******/
if(isset($_GET['w']) && !empty($_GET['w']))
$width = intval($_GET['w']);
if(isset($_GET['h']) && !empty($_GET['h']))
$height = intval($_GET['h']);
$image = "core/ImageHandler.php?src=lions2.jpeg";
if($width > 0)
$image .= "&w=".$width;
if($height > 0)
$image .= "&h=".$height;
?>
To display an image the following code is then used:
<img src="<?=$image; ?>" >
Form to set width and height parameters:
<form name="input" action="image.php" method="GET">
Width: <input type="text" name="w"><br>
Height: <input type="text" name="h"><br>
<input type="submit" value="Resize">
</form>