3 reasons why vector assets are superior to bitmap assets
In Zeplin, you get the option to download assets as bitmap or vector.
I had always chosen bitmap assets because that was what other tutorials used. However apparently vector assets are superior. This article has a great explanation of why that’s the case.
I say “apparently” because I have heard that iPhones don’t really scale vector assets in the same way that Android phones do. Here’s what I’ve heard from those much wiser then I. Android phones really do use algorithms from the vector asset to generate the image in any size required. Makes sense given the wide breadth of devices and screen sizes for Android.
However vector assets in iPhones don’t actually scale with algorithms. So you don’t get higher quality images by using vectors over bitmaps. Instead what you get is the same quality as bitmap. The iPhone simply takes the “vector” asset and converts it to the same three bitmap sizes.
Nevertheless there are a few benefits of using vector assets for iPhones.
- Reduces likelihood of human error. Right now there are three bitmap sizes (1x, 2x ,3x). That means you need to upload three images to your assets. That’s three opportunities to accidentally drag and drop the wrong image. When you use vector assets (which come up as universal in Xcode), you only need to upload one image instead of three. There’s less chance of uploading the incorrect size or image.
- Speed. Same reason as #1. If you are using a lot of images in your app, then using vector assets reduces the number of images you need to upload by a third.
- Future proofing. The iPhone currently only uses three image sizes (1x, 2x, 3x). This is to do with the increased retina quality of the screens. When Apple introduced the high retina screens a few years ago, the number of pixels per point increased for a sharper image.
It seems extremely likely that similar technological increases will continue to occur. In the future, we may need to upload 4x, 5x and 6x images. If we use a vector asset, the app will scale the image for us. This saves us from dropping in the new sizes of the bitmap asset.
Although I have to admit I’m a bit confused about this, given that iPhone vector assets don’t seem to actually work on algorithms. So I’m not sure how they will automatically scale to larger sizes. But my wise mentor explained this and I trust him!
Ultimately there don’t seem to be any downsides to using a vector asset, only upsides.
Great. Now we want to use a vector asset (i.e. pdf file). How do we upload it to our asset catalog?
Follow the same process you are used to. However before you drag and drop, you need to change the “Scales” factor to “Single Scale”.
Open the Attributes Inspector and scroll down until you see the option.
Update on 18 June 2017: Apple have announced in WWDC that iOS is now supporting true scalar images! Or at least, that’s what I think they announced. Now there is even more reason to use to use a single scale.