画像サイズ(縦横サイズ)の決め方
- 理論
- 結論
- 必要最小限の画像サイズで書き出すべきである
- 理由
- 必要以上に大きくても画質上のメリットはない
- 通信量は小さいに越したことはない
- デコード処理量は小さいに越したことはない
- 例外
- SVGはベクター画像であるから、サイズを気にする必要はない
- かたや、小数点以下の桁数は調整の余地がある。それはそれて知見なので、この場では議論しない
- SVGはベクター画像であるから、サイズを気にする必要はない
- 結論
- 実践
- 必要サイズの決定
- その画像が表示されうるpx(絶対単位)に、想定する端末のピクセル密度をかけた数値
- 画面の幅や高さに応じていくらでも拡大されうる画像については、合理的な上限を設けるべきである
- 複数の箇所から利用される画像については、最大の大きさになる箇所の大きさに準じる
- pxの測り方
- デザインツールによる
- はじめから縦横2倍にしたサイズでデザインデータが作成されているばあいは、数値を半分にする
- 想定すべきピクセル密度
- 実運用上は、2倍のピクセル密度(1ピクセルあたり2×2=4画素)を用意しておけば問題ない
- 3倍以上の端末も存在する。しかし2倍より大きなピクセル密度を想定しても、見た目上の差異は小さく努力の価値は薄い
- JPEGの圧縮率
- 2倍のピクセル密度で画像を用意するばあい、JPEGの圧縮率は30%~50%くらいにまで落として問題ないことが多い
- 1倍のピクセル密度で圧縮率80%にしたときと、結果としてのファイルサイズは同じくらいになることが多い
- 必要サイズの決定