スマホのWebブラウザで画像が荒い原因とは？
1. 背景
2. 目的
3. 調査結果3.1. 解像度の意味は2つある3.2. 解像度3.3. ピクセル/dpi/インチの関係3.4. Retinaディスプレイ登場3.5. Retinaディスプレイでの解決策4. 結論
5. 感想
6. 参考文献
1. 背景
バイト先で，スマホのブラウザでWebサイトを表示すると，画像が荒いという問題があった．
上の方は，ピクセルサイズを大きくすることなく，解像度を上げることで解決したい．
僕は，ピクセルサイズを大きくしないと画質は上がらないと考えていた．
2. 目的
スマホのブラウザでWebサイトを表示すると，画像が荒い原因を特定する．
3. 調査結果
原因はRetinaディスプレイにあった．
3.1. 解像度の意味は2つある
解像度は，最初，密度としての意味で使われていた．
後に説明するdpi, ppiである．
例）300dpi
しかし，現在では，ディスプレイの総ピクセル数としての意味でも使われるようになった．
例）1920×1080
密度での意味では，解像度．
総ピクセル数での意味では，画像解像度．
と分けるみたい．
(これがいろんな人の混乱を生んでる気がする)
3.2. 解像度
dpi(dots per inch)と呼ばれている．
1インチ内にドットがどれだけあるかという数値である．
同じサイズであれば，解像度が高い方がきれいに見える．
※ppiについては説明を省略します．ディスプレイで見る場合は，dpi≒ppi
3.3. ピクセル/dpi/インチの関係
pixel ＝ inch × dpi
例）モニタの解像度を高くすると，アイコンが小さくなるのは，dpiが高いせいで少しの面積でアイコンを表示できるから．
3.4. Retinaディスプレイ登場
Retinaディスプレイが登場する前までの画像解像度は，
物理的な値 ＝ 論理的な値
であった．
Retinaディスプレイの登場で，物理解像度と論理解像度が違うようになった．
例）iPhone6s
物理解像度 750×1334
論理解像度 375×667
この場合，普通の大きさで表示したいなら2倍の大きさが必要．
3.5. Retinaディスプレイでの解決策
PCでのディスプレイで表示していたサイズをRetinaで表示した場合，
2倍で表示されてしまう(？)ため，画質が悪くなってしまう．
そこで，ピクセルを大きく作成し，小さく表示することで，解像度を上げるという手法がある．
例）非Retinaで1000×1000 150dpiで表示していた場合．
2000×2000 150dpiで画像を作成．
Webでは，1000×1000で表示することで，300dpiで表示される．
4. 結論
Retinaディスプレイに画像を綺麗に表示する際は，ピクセル数を大きく作成し，小さく表示することで，高解像度で表示できる．
5. 感想
ピクセルの大きい画像をWebブラウザで小さく表示すれば綺麗に見れる．
これは感覚ではわかっていただけど，論理的ではないけど，ある程度根拠(？)を述べれるようになったのはよかった．
正直こんなことないと，いろいろ調べないんだよね...笑
Androidの勉強会とかあって，dp(dip)とかSVGとかは知っているんだけど，
今回みたいな古い規格(？)は調べるのが億劫だから基礎がなくて，こういう時に困っちゃうんだよね．
6. 参考文献
techacademy.jp
インチ - Wikipedia
paint.syumideget.com
qiita.com
qiita.com
yamasha.net
[http://un-tech.jp/display-resolution/yamasha.net:embed:cite]
www.capricious.info
www.capricious.info
