Chapter 5: Image Format Considerations in migration of iPhone applications to Windows Phone 7

Date: Tuesday, April 26, 2011, 12:00:00 AM

Tags: iPhone, WP7, Porting, image

Table of Contents

Images play a critical role in today's mobile applications. Applications engage users visually with images rather than with use of the written word. It is important to account for resources such as images, video, and audio when you plan your Windows Phone 7 project.

If you are planning to migrate or rewrite your iPhone application to Windows Phone 7, it is important for you to reuse your existing images. However, due to differences in the format, size and resolution of images on the two platforms, you will not be able to use images from your iPhone application in your Windows Phone 7 application. You should consider redesigning the images or converting them. Redesigning images can be expensive whereas conversion of images can be time consuming.

In this blog, we will cover what developers and designers should know about the images in their Windows Phone 7 application. We will introduce the image sizes and formats required by the Windows Phone 7 and show how they compare with the iPhone image formats. This will help you plan your image conversion. We will provide some quick command line examples on how the ImageMagick tool can be used for the conversion. We provide an introduction to a Microsoft Image Converter tool, built on top of ImageMagick, that can be used to migrate your existing iPhone images to work in the Windows Phone environment.

Critical role of Iconography in Windows Phone 7

Windows Phone 7 uses a unique design experience, called Metro, in the Windows Phone 7 OS and applications. The WP7 application design and User interface guidelines blog provides guidance on the look and feel of the application, including images and fonts. You are advised to pay close attention to images being designed for the Windows Phone Application. It is important that your application behaves consistently with the overall Windows Phone experience and stands out.

Metro Image Guidelines

Metro UI design uses a clean, light and open interface design model which puts emphasis on content and not on the chrome. It uses flat, monochrome images for standard application tiles and toolbar icons. It recommends that developers use Metro design guidelines in their applications to present a consistent experience. You will need to redesign or convert some of your iPhone application images to be consistent with the Windows Phone experience.

image

Device resolutions

iPhone and Windows Phone devices use different screen sizes and screen resolutions. This can affect how your images will look on the phone. If you use an existing image out of your iPhone application and use it without modification in your Windows Phone 7 application, the result may not be pleasing.

Resolution

Size

iPhone

480x320

3.5 inch diagonal

iPhone 4

960x640

3.5 inch diagonal

Windows Phone 7

800x480

Varies from device to device

As you can see from the above table, because of the different screen resolution, images designed for one platform cannot be used as is. They need to be - at least- resized to respect the aspect ratio of the target platform. The problem is even more complex if the images don't meet the resolution for the Windows Phone 7 Platform. The image conversion process is more complex to preserve an acceptable image quality.

Differences in iPhone and WP7 Image Resolutions

Each platform has its own unique requirements when it comes to image sizes and their look and feel. As you migrate or rewrite your application for Windows Phone 7 platform, you will realize that you might be able to use some images without modification but others will need to be changed to make them look right on the new platform.

Standard Image Requirements

The following table shows the comparison and association between iPhone and Windows Phone 7 image resolutions and types:

iPhone image type Resolution Resolution Windows Phone image type
Application icon 57x57 or 114x114 for high resolution 173x173 for tile Application icon for tiles
N/A 62x62 in app list Application icon in app list
App store icon 512x512 99x99 small mobile artwork Market place icons
173x173 large mobile artwork
200x200 in PC marketplace catalog
Small icons for search and settings 29x29 or 58x58 for high resolution N/A
Tab bar icons 30x30 48x48 Application bar icons
Toolbar / navigation bar 20x20 N/A
Launch image 320x480 or 640x960 for high resolution 480x800 Splash screen image or page background
N/A 1000x800 Background Art for Panorama control

As you migrate your application to Windows Phone 7, you will need to scale the images up or down depending on the type and resolution of your images. Here are some samples of iPhone and Windows Phone 7 images.

In App Images

There are two types of iPhone images - those for iPhone 3 or before and those for iPhone 4, which are also known as retina images. Retina images are higher resolution images. As we saw earlier, Windows Phone 7 screen resolution of 800x480 is higher than iPhone 3 resolution but lower than iPhone 4 resolution. Application images designed for iPhone will need to be upscaled to be used in Windows Phone 7 applications. On the other hand, application images designed for the retina display will need to be downscaled.

Windows Phone 7 Application Bar Images

Application bar icons on Windows Phone 7 should be 48 pixels by 48 pixels and must have a white foreground on a transparent background using an alpha channel. The Application Bar colorizes the icon according to the current style settings. Thus application bar icons must be designed appropriately for them to display correctly on Windows Phone 7.

Other issues

Windows Phone 7 applications built using Silverlight handle images in JPEG or PNG format. GIF images are not supported in Silverlight. If your application uses GIF images, they need to be converted to either JPEG or PNG.

If your iPhone application PNG images are loaded via XCode, you should be aware that XCode optimizes these images while bundling them. Using or converting PNG files from your iPhone application bundle won't work properly. Use images from your XCode source directory and not the application bundle.

Managing Images for Windows Phone 7 Projects

Let us look at different types of images required by Windows Phone 7 and understand what you need to create such images using your iPhone image resources

In this section we look at various Windows Phone 7 images and how to generate these images from your existing assets. One option is to use an open source tool called ImageMagick which is a very capable tool but can be difficult to use. We have given command line options for ImageMagic for each Windows Phone 7 images.

Microsoft Image Converter Tool

Microsoft has released an image converter tool, built on top of ImageMagick, to make the process of converting images easier. It provides options to create various images required for Windows Phone 7 application and marketplace.

Unless specified, Windows Phone 7 images must be in PNG format. In the commands below, the target parameter should be a PNG file.

Large PC App Tile Artwork

This 200x200 image is displayed in the Windows Phone 7 marketplace in the Zune PC client software. To convert an existing iPhone or other source image to this format, use the following options for the ImageMagick tool

Convert <source> -resize 200x200! -unsharp 0x1.1+.5+0 <target>

With resize geometry parameter of 200x200! ImageMagick converts the image to 200 x 200 and ignore the aspect ratio.

The same effect can be achieved using "Large PC App Tile Appwork" option in the Microsoft Image Converter tool.

image

Small Mobile App Tile artwork

This image is used in the phone marketplace catalog. This image of size 99x99 is the smaller of the two images used in the phone marketplace catalog. This image can be created using the following ImageMagick convert options.

Convert <source>-resize 99x99 -unsharp 0x1.1+.5+0 <target>

You can also use Small Mobile App Tile Artwork option in the Microsoft Image Converter tool.

Large Mobile App Tile artwork:

This image is used in the phone marketplace catalog. This is the larger of the two images used in the phone marketplace catalog.

The same size image is also used in the start experience on the phone. An Image of size 173x173 is used when the user pins the application to Start on the phone. The image must be in the PNG format

To create convert the image using ImageMagick convert tool, use:

Convert <source> -resize 173x173 -unsharp 0x1.1+.5+0 <target>

You can use the "Large Mobile App Tile Artwork" option in the Microsoft Image Converter tool.

WP7 Tile:

This image is used on the phone applist and must be a PNG image of size 62x62. To create convert the image using ImageMagick convert tool, use:

Convert <source> -resize 62x62 -unsharp 0x1.1+.5+0 <target>

You can also use the "WP7 Tile" option in the Microsoft Image Converter tool.

Panorama Background

This panorama artwork becomes the background for your application if it is a featured app on the Marketplace. This is an optional image of size 1000x800. Use the following options to convert the image to this format:

Convert <source> -resize 1000x800! -unsharp 0x1.1+.5+0 <target>

You can also use the "Background Art"option in the Microsoft Image Converter tool.

Details Page Screenshot

These images provide a preview of your app or game to users who are browsing your App details page on Windows Phone Marketplace. You must provide minimum one or maximum of 8 such images. Use the following options to convert the image to this format:

Convert <source> -resize 480x800! -unsharp 0x1.1+.5+0 <target>

You can also use the "Details Page Screenshot"option in the Microsoft Image Converter tool.

Flatten Images for application bar icons

Windows Phone 7 application bar icons are flat monochrome images with transparent background and white foreground, as described above. You can use the following ImageMagick options to create such images from iPhone tab bar icons which are monochrome. If you are transforming other multi-chrome images, you will need to use different options.

convert.exe <source> ( +clone ) -compose Difference -composite -modulate 100,0 +matte -threshold 0 -fill black +opaque rgb(255,255,255) -transparent black <target>

Or you can use the "flatten" option in the Microsoft Image Converter . If you are converting from an iPhone 4 image, use Retina option otherwise choose iPhone 3G option.

image

Convert Image Format

Since Windows Phone 7 does not support GIF images, you will need to convert your GIF images to PNG (or JPEG). Use the following option for converting your image format.

Convert <source> <target>

You may use the "Convert Format" to convert the format of images using Microsoft Image Converter tool.

Resize Images

Due to differences in the iPhone and Windows Phone 7 screen size, screen resolution and aspect ratio, you will need to convert your other image assets. Use the following ImageMagick convert options to resize the images

Convert <source> -resize <app geometry> <target>

You may use the Microsoft Image Converter tool to resize images. Use Retina if you are resizing the image from iPhone 4 project or iPhone 3G otherwise.

Learn Further about the Windows Phone 7 Image Format

UI Design and Interaction Guide for Windows Phone 7 and Windows Phone 7 Certification Guide provide definitive requirements for the resolution and types of images required for each Windows Phone 7 applications. The UI design guide provides guidance on the design of application bar icons.

Design New Images

Some of the WP7 images such as application tile or application list are particularly important since they always remain visible to users. They must be high quality and engaging. You may decide to redesign these images or start from the converted images and modify them further to suit your needs. Windows Phone 7 images may be designed using Microsoft Expression Design or Adobe Photoshop.

Conclusion

ISVs who want to migrate or rewrite their applications for Windows Phone 7 need to be aware that their images may need to be transformed to make them captivating on the Windows Phone. The differences in images on two platform are due differences in the screen resolutions and as well as in the standard image formats chosen for each platform. Redesigning the images may be an expensive and time consuming option. You can start by converting existing images using open source tool such as ImageMagick and customize them further.

Resources

1. Windows Phone 7 UI Design and Interaction Guide

2. Windows Phone 7 Application Certification Requirements

3. Microsoft's Windows Phone 7 Interoperability site

4. Microsoft iPhone to Windows Phone 7 Image Conversion Tool

5. ImageMagick tool

 
blog comments powered by Disqus