Xcodeにベクタ画像(pdf)を追加してもジャギる(iOS開発)
iPhoneの種類が増えるにつれ、各解像度にあわせて @1x
@2x
@3x
の画像を用意するようになりました。
そしていつからだか、Xcode(iOS)がベクタ画像 *1 に対応しましたね。
「やったー!これで用意する画像1つだけでいいじゃん!」
と喜びつつも、実際に使用してみると
「ジャギるじゃん!(怒)」
そんなデザイナーやエンジニアのみなさん!
原因が判明しました!
実は
「ベクタ画像に対応した」
→ 「 ベクタ画像がそのまま使用され、どの解像度でも綺麗に表示される 。」
→ 「 ベクタ画像をもとにラスタ画像を生成し、従来 *2 と同様に扱われる。 」
ということでした。
例
100 x 100 px の image.pdf
という画像を用意したとすると、ビルド時に下記ファイルが生成される。
ファイル名 | サイズ |
---|---|
image.png |
100 x 100 px |
image@2x.png |
200 x 200 px |
image@3x.png |
300 x 300 px |
結論
ベクタ画像(PDF)をセットすると、ビルド時にXcodeで
@1x
@2x
@3x
のPNG画像が生成されて使用される。PDFを使用する場合は、
@1x
の時に必要なサイズでPDFを書き出して使用する
参考
xcode 8 import pdf (vector) intro image assets not working well - Stack Overflow
How do vector images work in Xcode (i.e. pdf files)? - Stack Overflow
後記
最低週1くらいは更新できたらいいな。
技術的なこと書くと下調べが面倒臭いからこういう記事になっちゃう。