Articles, Blog

Fixing the Fuzzy Image in XCode – Intro to iOS App Development with Swift

November 12, 2019


The reason why this image is blurry, is because we are simulating our app on iPhone 5S, which has a retina display. Retina display means more pixels and therefore more quality. So what the simulator is looking for, is a 2x image. It’s looking for this image right here, which by the way is just two times the size of the 1x. And here I have the same microphone image, except that its size is 200 by 200 pixels. This is twice as big as the previous image we used. By the way, this image is also available in the instructor notes. So what I’m going to do is drag this image into the 2x. There. All right. I’ll go back to Xcode and then stop the project and run it again. Aha, the image isn’t blurry anymore. By the way, this form of attention to design detail is extremely important when building apps for the Apple ecosystem. And because it’s so important, let’s dive a little bit deeper into seeing what’s actually going on here behind the scenes. The thing to understand here is that the 1x scale factor works with non-retina phones. And these were used in old iPhones, like the iPhone 3G. The 2x scale factor, however, has a retina screen, and this is used in phones like the iPhone 4 and 5s. A phone that uses the retina screen in this case means double the number of pixels as compared to a non retina screen. And that is what produces a much better quality for these phones. So when we use an image from 1x in a phone like iPhone 5s, the image looks somewhat blurry as this phone is expecting a 2x image. Now you can imagine that the 3x scale factor is used for newer phones, phones like the iPhone 6 and iPhone 6 plus. If you want to learn more about this, we’ve added a couple of helpful links in the instructor notes.

1 Comment

  • Reply Scratch Programming Tutorial January 20, 2018 at 2:34 am

    This trick does not work with button image.

  • Leave a Reply