【コーディング】なぜ画像は2倍で書き出した方が良いのか。（デバイスピクセル）

画像の書き出し

2倍のサイズで書き出すと良いです。例えば、縦48px、横48pxの画像であれば、96px、96pxで書き出すという感じです。その理由はデバイスピクセルが関係してきます。

デバイスピクセル比（devicePixelRatio）

現在のディスプレイ機器におけるCSSピクセルの解像度と物理ピクセルの解像度の比を返す。

window.devicePixelRationを確認するとそのデバイスの比率を見ることができます。

パソコンの場合

2が採用されている。

iPhoneなどのスマホの場合

3倍になっています。

そもそもブラウザには二つのピクセルという概念がある。

ブラウザは以下二つの概念があります。

• CSSピクセル
• デバイスピクセル

CSSピクセル

Figma上でデザインやHTML/CSSでコーディングをしている時の基準はこちら。

デバイスピクセル

CSSピクセルとは必ずしも同じとは限らない。

例：デバイスピクセル比が2の場合

CSSピクセルの1px相当の大きさを端末で表現するためには4px必要になる。

コーディング時に起きていること

Figmaで等倍でエクスポートしてしまうと上記のように縮小が発生してしまう。(Figmaから画像ファイルにエクスポートする際に劣化することになる。)

export時に縮小して出力された画像をブラウザは拡大して表示してしまうので画質の劣化が発生するという流れになります。

とすると、スマホの場合はピクセルデバイス比が3倍なので3倍で書き出した方が良いのでは？と思われるかもしれませんが、スマホの場合は2倍で書き出しておけば縮小は発生しない。スマホの3倍はあくまで2倍をベースに細切れにしているロジックになっているからのようです。（拡大したら差が発生するくらいだが、あまりWeb開発においては画像を拡大することまで重視して実装はしないことが多い。3倍で出力するとデータ容量が飛躍的に増えてしまうので2倍でおkとしている。）

注意点

ただ、これはjpegやpngなどの画像フォーマットだけの話で、svgなどの伸縮しても画像が劣化しない画像に関しては当てはまることではないのでご認識ください。（Figma上でもsvgに関しては倍率などは選べないようになっている。）