Pixelated images on iOS10 when building with Xcode 10

问题

According to my test I only face this issue when making Archive and uploading it to Fabric or iTunesConnect. It's OK in simulator and on real device in debug. I tried both pdf and png. And I tried to change compression type in assets catalog.

Archive on the left, Debug on the right

回答1:

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 'XXX-ABC-ZZZ-Normal@2x.png' 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/

来源：https://stackoverflow.com/questions/53427686/pixelated-images-on-ios10-when-building-with-xcode-10