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.
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.
To make use of 51Degrees .NET Image Optimiser you will need to enable it in the 51Degrees.config file. Learn how. 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:
<img src="/Empty.gif" data-src="/Landscape.jpg?w=auto" style="width:100%;"/>
Learn more about 51Degrees Image Optimiser for .NET
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:
<img src="ImageHandler.php?src=Test.jpg&w=300" >
<img src="E.gif" data-src="ImageHandler.php?src=Test.jpg&width=auto" >
Learn more about 51Degrees Image Optimiser for PHP
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:
<img src="51D/Images/Test.jpg?w=300" >
<img src="E.gif" data-src="51D/Images/Test.jpg?w=auto" />
Learn more about 51Degrees Image Optimiser for Java
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:
case 'Tablet': $width = 800;
case 'SmartPhone': $width = 600;
case 'Desktop': $width = 1000;
case 'SmallScreen': $width = 200;
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.
/****** snip ******/
if(isset($_GET) && !empty($_GET))
$width = intval($_GET);
if(isset($_GET) && !empty($_GET))
$height = intval($_GET);
$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">
Below is a simplified demo of how our Image Optimiser automatically adds images of the correct size, for the relevant container. A Full demo and description can be viewed at Image Optimiser page.
Read More About Image Optimiser
Download Examples Source Code