Wensus Analytics

Windows Phone 8 Iconic Tile Image Size Comparison

image Based on the discussion on StackOverflow, I decided to test out the different IconicTileTemplate sizes. The idea was to try to find out:

  1. What are the correct dimensions for images used in the IconicTileTemplate
  2. What image is used when the iconic tile is in wide mode

The test images

I used the free Syncfusion Metro Studio to create the following images (the actual images have a transparent background):

110×110 pixels

image

202×202 pixels

image

132×202 pixels:

image

72×110 pixels:

image

72×72 pixels:

image

The emulator

I used the 720p emulator to run the tests.

Test run #1

image

  • Small tile: 110×110
  • Medium tile: 202×202
  • Support for large tiles enabled

Results:

The medium tile image is used when the tile is in default size:

image

The small tile image is used when the tile is in small size:

image

The medium tile image is used when the tile is in wide mode:

image

When the tile is in wide mode and it has large content set, the small tile image is used:

image

Test run #2

image

  • Small tile: 72×110
  • Medium tile: 132×202
  • Support for large tiles enabled

Results:

The medium tile image is used when the tile is in default size:

image

The small tile image is used when the tile is in small size:

image

The medium tile image is used when the tile is in wide mode:

image

When the tile is in wide mode and it has large content set, the small tile image is used:

image

Test run #3

image

  • Small tile: 72×72
  • Medium tile: 132×202
  • Support for large tiles enabled

Results:

Tile in wide mode, large content set:

image

Conclusion

The first question was: What are the correct dimensions for images used in the IconicTileTemplate?

As the answer on StackOverflow points out, the images used in IconicTileTemplate should have the following sizes:

  • Small: 72×110
  • Medium: 132×202

When we compare the 132×202 and 202×202 images, the difference is quite minimal: The latter one looks maybe more natural (more like the 1st party apps) and it’s smaller, but both the tiles have the correct aspect ratios:

image

The largest difference can be found when the tile is in wide mode and the tile has content. In these situations the Small image is used. Here’s a screenshot again with 110×110 image:

image

And here’s the one with 72×110:

image

And for comparison, this is the one with 72×72:

image

Only the 72×110 looks correct.

The second question was: What image is used when the iconic tile is in wide mode?

The answer depends on whether your tile has content set or not:

  • Without content: The medium tile image is displayed.
  • With content: The small tile image is displayed.