Pixelated images on iOS10 when building with Xcode 10

Instructions for creating ButtonBarItem images

create a PDF file with the dimensions 22 x 22
draw the content with vector tools (do not embedd images into the PDF)
use a stroke width of 1pt or 1.5pt
drag & drop the PDF to Assets.xcassets
there are slots with three different scales, choose the left with 1x
otherwise don't change the default settings

At build time XCode creates the correct images in 1x, 2x and 3x scale.

If this does not produce the desired result, you will find here some hints on how to dig further.

What is difference between debug and final release version

When you submit to the app store a process called App Thinning is started that creates variants for different actual devices. Also stuff like image compression happens then.

It is inconvenient to wait for a build of the App Store version, but you can also perform App Thinning locally and analyze the exact created image version. But there are some manual steps involved.

What we are looking for is the .png file that is created out of the arrow PDF file. Since multiple images are compressed and combined into a .car file we need also a tool to extract the images from that file. One could use an application called 'Asset Catalog Tinkerer' available from GitHub - but it can also installed using the package manager Homebrew, see https://brew.sh. More details below.

How to do App thining locally

in Xcode choose <Product/Archive>
open <Window/Organizer>
for the created archive choose 'Distribute App' on the right side
from the sheet choose 'Ad Hoc'
from the App Thinning combo choose your model or 'All compatible device variants'
in the next dialog choose 'Automatically manage signing'
then it takes some time
then choose 'Export' and save it

Extract Asset.car

in the output folder there is now a file 'App Thinning Size Report.txt' open it in a text editor
there are all generated variants for different devices listed
e.g. if you have a 5s with iOS 10 it would list as [device: iPhone6,2, os-version: 10]
the corresponding .ipa file is a just a zip file, unzip it from the command line ('unzip xxx.ipa')
in the extracted 'Payload' folder there is the app, in Finder right-click it and choose 'Show Package Contents'
there is a file called 'Asset.car' that contains the images created in the final format

Extract images from Asset.car

install Asset Catalog Tinkerer by using homebrew on the command line: brew cask install asset-catalog-tinkerer
Start Asset Catalog Tinkerer from the normal Applications directory
use <File/Open> to open the 'Asset.car'
choose 'Export All Images...'
then you can take a look at the final image in an image editor

It should have a name like '[email protected]' and should have a resolution of 44x44, since it has 2x-scale.

More information:

Take a look at this WWDC 2018 video: Session 227, Optimizing App Assets, https://developer.apple.com/videos/play/wwdc2018/227/

Recommended topics

Hot tags