【SwiftUI】Imageの1x,2x,3xの挙動の違い - バッテラの弱火でじっくり

SwiftUI

はじめに

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

前提

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

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

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

qiita.com

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

検証用の素材

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

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

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

検証１

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はさらに倍にするということ。

検証２

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

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

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

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

プログラム

struct TestView: View {
    var body: some View {
     
        VStack {
            //Image("image_1x")
            //Image("image_2x")
            //Image("image_3x")
            
            Image("image")
        }
    }
}