継続は力なり＃４６

出力先に合わせて異なるサイズの画像を表示させる方法

従来のパソコン画面の解像度は長いあいだ 96ppi *(1) 程度だった
2010年に Apple が発表した iPhone 4 の画面（ Retinaディスプレイ）の解像度は、一気にその倍以上になった *(2)
それ以降、さらに高い解像度の機器もどんどん登場している
（パソコンのディスプレイでも同様に高解像度のものが増えている）

＊（１）
ppi は pixel per inch の略
96ppi とは、1インチの幅に物理的なピクセルが96個入っている画面ということになる
この場合、ピクセル 1つの大きさは 1 / 96 インチ

＊（２）
画面の物理的な１ピクセルの大きさは一般的に、近くで見るために作られた画面ほど小さく、遠くで見るための画面ほど大きくなる
基本的にスマートフォンの１ピクセルはパソコン画面の１ピクセルよりも小さいので、それらを単純に比較することはできない
実際、パソコン画面の解像度とスマートフォンの画面の解像度を比較すると、スマートフォンの解像度は数字の上では２倍をはるかに超えて、３倍以上となっている

写真を綺麗に印刷するには、96ppi の画面で見る時に必要となるサイズよりも大きな画像が必要になるのと同じ理屈で、高解像度の画面で画像を綺麗に表示させる場合にも大きな画像が必要になる
話をわかりやすくするために、従来から画面を 100ppi、高解像度の画面を 200ppi として考えてみる
100ppi の画面にある物理的なピクセルと 200ppi の画面にある物理的なピクセルの大きさは以下の図のようになる

解像度（ppiで示す数値）が２倍になると、１つの物理的なピクセルの大きさは半分になり、必要なピクセル数は縦横２場合になる
ここで、縦横２ピクセルのビットマップ画像があったとする
100ppi の画面では、画像の１ピクセルをそのまま画面のピクセルに当てはめて表示するだけでOK
しかし、200ppi の画面では、１ピクセルをそのまま画面のピクセルに当てはめて表示させると、表示される画面の大きさが半分になってしまう
100ppi の画面と同じ大きさで表示させるには、元の画像を引き延ばすなどして足りないピクセル分のデータを補わなければならない
結果として、画像からはシャープさが失われ、ぼやけたような状態で表示されることになる
このことから、もし 200ppi の画像で綺麗に表示させようと思ったら、縦横２倍のサイズの（縦横４ピクセルの）画像が必要となることがわかる
300ppi で綺麗に表示させるのなら、同様に縦横３倍の画像が必要となる
100ppiの画像を基準として考えた場合、この 200ppi の画面は「ピクセル密度が２倍」であるとも表現する
300ppi であれば「ピクセル密度は３倍」となる
この「ピクセルの密度」という用語は、この後に説明する属性を指定する際にも登場する

スマートフォンでの画像表示の確認

それでは、ピクセル密度が２倍の画面において、通常サイズの画像と縦横２倍サイズの画像が具体的にどのように表示されるのかを見てみる

例

HTML

<p>
<img src="logo200.png" width="200" height="100" alt=""> <!-- 200×100の画像 -->
</p>
<p>
<img src="logo400.png" width="200" height="100" alt=""> <!-- 400×200の画像 -->
</p>

このサンプルをピクセル密度が２倍の iPhone 8 で表示させると以下のようになる
上が 200×100 ピクセルの画像で、下が 400×200 ピクセルの画像
２つを比較してみると、上の画像の方が輪郭がぼやけていることがわかる