• 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['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>

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)

Documents to download

Mike
>

Products Team

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia m.dot Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV programmatic PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images Responsive web design RESS Review reviews RIM Ringmark RTB RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Server-side optimisation Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE