Instructions

Objectives

  • Learn 3 different methods to optimise images for mobile devices.
  • Provide multiple image sources to image controls.

Prerequisites

Step 1 - Server Side

Create a new Mobile Web Form page and add the following code between the form tags of the aspx page.

<mob:Image ID="Image1" runat="server"
    Width="128px" CalculateSizeMode="Server">
</mob:Image>

This code uses an image that is 256 pixels wide being displayed in an image control which is 128 pixels wide. How wide do you think the image downloaded to the browser will be? If a normal ASP image control was used the full 256 pixel wide image would be sent over the internet to the browser. The browser would then shrink the image to fit the controls dimensions. In this case 128 pixels.

With the addition of the 51Degrees.mobi attribute CalculateSizeMode the server can apply some intelligence to the process. Before sending the image to the browser the server will resize the larger image to the required size. This approach significantly reduces the amount of data sent from the server to the mobile device improving page load time.

To verify this behaviour right click on the image within Internet Explorer and choose Properties. A dialogue similar to the following should be displayed.


Notice the dimensions of the image are 128 pixels even though the source image is 256 pixels.

Step 2 - Server Side with Multiple Images

Sometimes scaling a single image to fit different dimensions may result in the image becoming distorted. This problem can be particularly troublesome for images that are being shrunk significantly. In this situation multiple source images may need to be provided to enable the server to choose an image that is closest to the desired size.

The 51Degrees.mobi Image control has been extended to support a collection of alternative image sources that can be specified along with the original ImageUrl property of the control. Replace the code from Step 1 with the following code.

<mob:Image ID="Image1" runat="server" ImageUrl="http://demos.51degrees.mobi/images/256x256_wizard.png"
    Width="128px" CalculateSizeMode="Server">
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/16x16_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/24x24_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/32x32_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/48x48_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/64x64_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/72x72_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/128x128_wizard.png" />
</mob:Image>

The image will now appear to be almost identical to that rendered in Step 1. However rather than resizing a 256 pixel wide image to 128 pixels wide, the server has chosen the 128 pixel image as the source. Right click on the Image and choose Properties to see the difference. A screen similar to the following should be displayed. Notice that the image source is 128 pixels wide. Also compare the image size in bytes to the one produced in step 2. Automatically resized images can often be larger than a equivalently sized image rendered specifically for the dimensions.



So far we've set a fixed width for the image in pixels. However the image width could be set at runtime. Add the following C# code to the page source code to set the image width to 50% of the screen width.

protected void Page_Load(object sender, EventArgs e)
{
    Image1.Width = Request.Browser.ScreenPixelsWidth / 2;
}

If you're using Internet Explorer the resultant image will be 400 pixels wide. Try accessing the same page from an emulator and placing break point in the Page_Load event to see the different ScreenPixelsWidth returned for different devices.

Setting image dimensions in code is a simple way to ensure images are always optimised for the requesting mobile device.

Step 3 - Client Widths

The server only knows about the image control and knows nothing about CSS or other surrounding controls. For this reason image dimensions provided when CalculateSizeMode is set to Server should always be provided in pixels and set explicitly. If percentage or point size units were used the server would not know how to interpret them.

To overcome this problem the CalculateSizeMode property supports additional values to calculate the width of the required image on the mobile device or client and request an appropriately sized image from the server. Remove the Page_Load code added at the end of Step 2 and modify the ASP code to specify the width of the image as 50% and ClientWidth as the CalculateSizeMode value. The following code should be displayed.

<mob:Image ID="Image1" runat="server" ImageUrl="http://demos.51degrees.mobi/images/256x256_wizard.png" Width="50%" CalculateSizeMode="ClientWidth">
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/16x16_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/24x24_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/32x32_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/48x48_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/64x64_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/72x72_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/128x128_wizard.png" />
</mob:Image>

Opening the web page in Internet Explorer and then displaying the Properties dialogue shows the image width exactly 50% of the browsers current width. A dialogue similar to the one shown below should be displayed.



Try resizing the browser and then refreshing the page. The image will always be exactly half the current browser width.

Step 4 - Containers and Client Height

Some times it's helpful to calculate the size of the image based on it's container rather than an explicit width. Modify the ASP code so that the Image control is contained within a Panel whose height is set to 3em. The Image control's CalculateSizeMode property should be set to ClientHeight and the height of the image should be 100% of the container. The following code can be used.

<mob:Panel runat="server" Height="3em">
    <mob:Image ID="Image1" runat="server" ImageUrl="http://demos.51degrees.mobi/images/256x256_wizard.png"
        CalculateSizeMode="ClientHeight" Height="100%">
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/16x16_wizard.png" />
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/24x24_wizard.png" />
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/32x32_wizard.png" />
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/48x48_wizard.png" />
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/64x64_wizard.png" />
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/72x72_wizard.png" />
        <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/128x128_wizard.png" />
    </mob:Image>
</mob:Panel>

Now display the page in Internet Explorer. The image will be exactly the height of the panel. Open the Properties dialogue for the image to view the size of the image in pixels. A dialogue similar to the following will appear.



In this instance 3em works out to be 48 pixels. The image is provided to exactly this size from the server reducing the amount of data that would otherwise need to be transmitted if a pixel dimension had been provided. em units adapt to the font size the browser is currently using. For more information see this page from w3school. They're a very easy way of ensuring images appear proportional to the current font size.

Tutorials

NumberSorted By Number In Ascending OrderTutorialSummary
1InstallationInstall 51Degrees - .Net Mobile Framework and confirm the installation is successful.
2EmulatorsConfigure IIS to work with mobile device emulators improving development productivity.
3Hello WorldAdd a mobile label control to a mobile page and understand major differences compared to standard ASP.NET.
4Mobile ProfileUse a simple database to gain additional insight into the mobile device performance, optimise view state and persist data.
5Clever ImagesOptimise images to consume the bare minimum amount of data for the display on the requesting mobile device without compromising image quality.
6Entering TextMake it easier for your users to enter text by remembering previous values and providing common options.
7DatesCaptures dates quickly and easily using all the capabilities of the requesting mobile device.
8LocationFind out where the requesting mobile device is or get location information from users.
9MapsDisplay maps from Google or Bing, move around and show multiple markers.
10Data Lists and PagersDisplay lists of items and page between them.
11Styling Mobile ControlsStyle mobile web applications using different common characteristics of mobile devices such as screen size or input method.
12DeploymentDeploy the Framework onto a production server and configure IIS and SQL.