• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Image Resizing For Mobile Devices

Published on Friday, September 26, 2014

Image Resizing For Mobile Devices

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

Manual mode:

<img src=”/Landscape.jpg?w=300”/>

Automatic mode:

<img src="/Empty.gif" data-src="/Landscape.jpg?w=auto" style="width:100%;"/>

Learn more about 51Degrees Image Optimiser for .NET

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

Learn more about 51Degrees Image Optimiser for PHP

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

Learn more about 51Degrees Image Optimiser for Java

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)
{
	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) && !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">
</form>

Visual Demo

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.

Image optimiser at work. Image resized to specific size. Image optimiser at work. Image resized to specific size. Image optimiser at work. Image resized to specific size.
Image optimiser at work. Image resized to specific size. Image optimiser at work. Image resized to specific size.

Read More About Image Optimiser Download Examples Source Code

Comments (0)

Author: Products Team

Categories: Development

Tags: Java , PHP , NET

Documents to download

Mike
>

Products Team

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE