学生かえるエンジニアのブログ

iOSを主にやる勉強中エンジニア。かえるが好き。ピクルスってかわいいよね。

Xcodeにベクタ画像(pdf)を追加してもジャギる(iOS開発)

iPhoneの種類が増えるにつれ、各解像度にあわせて @1x @2x @3x の画像を用意するようになりました。

そしていつからだか、Xcode(iOS)がベクタ画像 *1 に対応しましたね。

「やったー!これで用意する画像1つだけでいいじゃん!」

と喜びつつも、実際に使用してみると

「ジャギるじゃん!(怒)」

そんなデザイナーエンジニアのみなさん!

原因が判明しました!

実は

「ベクタ画像に対応した」
「 ベクタ画像がそのまま使用され、どの解像度でも綺麗に表示される 。」
→ 「 ベクタ画像をもとにラスタ画像を生成し、従来 *2 と同様に扱われる。 」

ということでした。

100 x 100 pximage.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 @3xPNG画像が生成されて使用される。

  • 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くらいは更新できたらいいな。

技術的なこと書くと下調べが面倒臭いからこういう記事になっちゃう。

*1:ただしPDF形式のみ。

*2:ベクタ画像が対応されていなかった時代