Windows Phone 8 Iconic Tile Image Size Comparison
Based on the discussion on StackOverflow, I decided to test out the different IconicTileTemplate sizes. The idea was to try to find out:
- What are the correct dimensions for images used in the IconicTileTemplate
- 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):
110x110 pixels
202x202 pixels
132x202 pixels:
72x110 pixels:
72x72 pixels:
The emulator
I used the 720p emulator to run the tests.
Test run #1
- Small tile: 110x110
- Medium tile: 202x202
- Support for large tiles enabled
Results:
The medium tile image is used when the tile is in default size:
The small tile image is used when the tile is in small size:
The medium tile image is used when the tile is in wide mode:
When the tile is in wide mode and it has large content set, the small tile image is used:
Test run #2
- Small tile: 72x110
- Medium tile: 132x202
- Support for large tiles enabled
Results:
The medium tile image is used when the tile is in default size:
The small tile image is used when the tile is in small size:
The medium tile image is used when the tile is in wide mode:
When the tile is in wide mode and it has large content set, the small tile image is used:
Test run #3
- Small tile: 72x72
- Medium tile: 132x202
- Support for large tiles enabled
Results:
Tile in wide mode, large content set:
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: 72x110
- Medium: 132x202
When we compare the 132x202 and 202x202 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:
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 110x110 image:
And here’s the one with 72x110:
And for comparison, this is the one with 72x72:
Only the 72x110 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.