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.
Width="128px" CalculateSizeMode="Server">
</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.
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">
CalculateSizeMode="ClientHeight" Height="100%">
</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.