バッテラが如く

プログラミングしましょ!

【SwiftUI】Imageの1x,2x,3xの挙動の違い

SwiftUI

はじめに

Assetsにある1x,2x,3xてあるけどどう変わるの? という疑問に対しての調査報告になります

前提

先に言っておきます。1x,2x,3xの細かいことは自分には分かりません。

端末ごとにRetinaのスケーリングが違うので最適化されるように複数設定するものと考えています。

どの端末がどのスケーリング(@?x)が使われてるかをまとめてくれているとサイトがありました。

qiita.com

iPhoneは@3x、iPadは@2xだよの知識で十分。

検証用の素材

イラスト屋さんの画像を使わせてもらいました。

画像の幅が「250」高さが「248」となっています

これを軸に検証したいと思います

検証1

iPhone13端末にて同じ画像の1x〜3xまでを別素材として作ってそれを並べて表示してみる

プログラム
struct TestView: View {
    var body: some View {
     
        VStack {
            Image("image_1x")
            Image("image_2x")
            Image("image_3x")
        }
    }
}
結果

1xが大きく表示され、3xが小さく表示されるという結果になりました。

プレビュー画面の下の方でImageのサイズを確認できたのでそれぞれのスクショです

@1xは元画像と同じサイズになっていました。

@2xは@1xの半分、@3はさらにその半分という感じになります。

これからわかることは@1xを想定サイズにし、@2xはその倍、@3xはさらに倍にするということ。

検証2

iPhone13端末にて異なる画像の1x〜3xまでを用意して表示した場合どれが使われるのか?

答えは@3xが使われるはずなのはわかってるが実際にそうなのか?という検証です

使い方間違ってますけど、↑の画像を表示したらどうなんのか?

どの画像も同じ幅と高さになっています。

プログラム
struct TestView: View {
    var body: some View {
     
        VStack {
            //Image("image_1x")
            //Image("image_2x")
            //Image("image_3x")
            
            Image("image")
        }
    }
}
結果

使われたのは@3xでしたので想定通りですね。

これはiPhone13のスケーリングが@3xだからという証拠です。

ちなみにiPhoneSE(2nd generation)でやると@2xの画像が表示されます、これはiPhoneSEのスケーリングが@2xだからです。

想定通りの動くをするのをちゃんと確認できました。

検証3

iPhoneSE(2nd generation)で@1xと@3xがセットされた画像があったら、どっちが使われるのか?

目的

検証2で適切なスケーリングの画像が使われることが理解できました。じゃあ適切なスケーリングがセットされていない場合はどういう挙動をするのかを検証したい。ちなみにiPhoneSEのスケーリングは@2xです(それを除いた画像を使う)

プログラム

検証2と同じ

結果

結果は@1xが使われていました。

なので見つからない場合は低い方が使われるということですね。

@2x想定端末は@3xだと負荷の懸念があるから@1xになるんだろうなー。

今後の検証事項

iPhone実機における@1xと@3xでの品質の違いがどれぐらいあるのか?

もし人間の目では判断できないんであれば、@1xだけでいいんじゃないと思っています。

ナンバリングによって物理サイズが変わってないからそこまで違いが出ないという勝手な予想です。。。