Understanding misaligned images in Instruments
I attended the Berlin Tech Talk conference on november 2. The last talk was given by Michael Jurewitz and was titled Your iOS App Performance Hitlist.
This talk was excellent, the best in my opinion (But that’s because I love talking about performances), and it was focused on using Instruments.
The talk was divided in 3 parts :
- Launch Quickly / Avoid Blocking Work
- Minimize Memory Usage
- Draw Efficiently
I’m not going to talk about the 2 firsts because they were pretty straightforward, and I didn’t learn much that I already knew here, but if you are interested you can check this great post by Ole Begemann and this one by Cyril Godefroy.
So let’s jump directly to the third topic, In the Core Animation instruments in the Debug options area there is a checkbox called Color Misaligned Images.
This option does 2 things :
- It highlights scaled and stretched content in yellow. So UIKit elements (like
UINavigationBar…) will be highlighted, but no worry here, Apple uses stretching a lot for UIKit in order to consume less memory and reduce its size. You should look at YOUR things here.
- It highlights misaligned images in magenta. But what the hell is a misaligned image ?
To put it simply, your screen has a resolution of 960x640 pixels (or 480x320 depending on your device), but UIKit and Core Graphics use floating points values.
When it comes time to render the content, these coordinates have to be mapped to the pixels grid of the screen before they are displayed.
If your content is not aligned on integral coordinates it will require much more work from the GPU, and there is a big chance that your content will be aliased and looks really ugly.
So if you do some calculations to display, for example, an image gallery, always cast the coordinates to integer values to avoid these kind of trouble.
Let’s finish with a quote from Michael Jurewitz.
“If you have a label that is aliased, I guarantee you at 100% that it is misaligned.”