これは何？
画像を扱うアプリを練習で作っていました。そのときに、以前からしっかり調べたいと思っていた、解像度と画像の関係について調べたノートです。
実際に実装する際の足掛かりとしてまとめているだけなので、コードはほとんど書いていません。参考記事をまとめたノートにとどまっています。
PCよりスマホの方が画像を大きく作成しないといけない理由
-
フルHD（1920 x 1080px）... 一般的なオフィスで使われているPCの画像サイズ。13インチのノートPCだと、これより解像度が小さいこともある。
-
4K（3840 x 2160px）... フルHDの四倍の解像度。同じ画面サイズでもフルHDの四倍の密度でピクセルが密集している状態
参考記事：4Kテレビは2Kや8K、ハイビジョンやフルハイビジョンとどこが違うの？
iPhoneは6plus（2014年発売）の時点で、すでにフルHDに対応していて、Retinaディスプレイというディスプレイを採用してからは、同じサイズのディスプレイでも二倍の解像度で画像が表示されるようになっています。
iPhoneではなくても、４Kやそれ相応に高解像度のスマホは珍しくありません。
参考記事：
スマホ時代に最適な画像のサイズや新常識
等倍サイズの画像は、高解像度のディスプレイだとぼやける
例えば、100 x 100pxの画像をブラウザで表示するときは
size: '100x100'
を指定して、画像サイズと同じサイズでブラウザで表示させるのが通常ですが、iPhoneのような高解像度ディスプレイのスマホでは、これらの画像はぼやけて見えます。
対策
対策は至って単純で、画像を200 x 200pxと二倍サイズで作成し、
size: '100x100'
で表示することです。
しかし、それだと通常の解像度を利用しているディスプレイで、不必要にページが重くなることは否めません。
そのため、
<img src="img/photo01.jpg" srcset="img/photo01.jpg 1x,img/photo02.jpg 2x" alt="sample photo">
このようにsrcset属性で表示する画像をディスプレイの解像度ごとに変える書き方もあります。
ここでは、コードの意味する内容なのど詳しい解説は、参考にしたこちらの記事に譲りたいと思います。
Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法
CarrierWaveでの画像表示の最適解？
ところで、CarrierWaveにはいくつか画像リサイズのオプションがあります。使用頻度が高そうなものとしては、resize_to_fitとresize_to_fillでしょうか。
今回作っていたアプリでは、画面上では400 x 400pxで表示させるという仕様になっていたので、実際で表示することを考えるならは800 x 800pxで画像を作成した上で、画面上では400 x 400pxで表示するのが良さそうです。
さらに言えば、srcset属性で表示する画像を出し分けるのが良さそうでした。
今回は練習用のアプリなので、これ以上の実装はしませんでしたが、
Railsでsrcset属性を使い画像を出し分ける処理を書いていた人もいたので、実際に同様のアプリを作ることがあるなら、こちらを参照したいと思います。
image_tagでsrcset属性を使いたいときのTips（carrierwave）
追記：単純に２倍なら良い、というものでもないらしい
その後、「単純に２倍じゃないんだよー」というご指摘とともに、以下のリンクをいただいたので、忘れない様に貼り付けておきます。