実は奇麗に表示されてない？スマホには表示できる画像に上限サイズがあった

たまーにiPhoneでSafariやChromeでブラウザ中に、画像をうまく表示できないことってありませんか？

表示までにかなり重かったり、こんな感じに切れてしまったりしますよね。

それは実はスマートフォンの処理能力に大きな関係があります。

iOSブラウザで扱える画像のサイズの上限

スマートフォンやパソコンにはRAMと呼ばれるメモリが処理速度に大きく影響を与えます。

半導体素子を使った記憶装置のひとつ。データの書き込みと読み出しができるメモリーのこと。

——Kotobank

iPhone4の場合は512MB。iPhone5だと1GB (=1024MB)。

Xperia NX、SX、GX、AXなどはそれぞれ1GB。
Xperia A、UL、Z1はそれぞれ2GB搭載しています。

数値だけみてもなんのこっちゃわかりませんが、iPhone5は4と比べて2倍の処理速度があるんだな、という風に解釈するとわかりやすいでしょうか。

ここから本題にうつります。

iPhoneの話になりますが、Appleが開発者向けにSafari (サファリ)の表示できる画像リソースの上限サイズについて公式に発表しています。

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

The maximum decoded image size for JPEG is 32 megapixels using subsampling.

——Safari Developer Library

要約すると

「iPhone4より下位機種の場合、PNG、GIF、TIFFはでは3メガピクセルが上限。
iPhone4以上の機種は5メガピクセルが上限。」

「Jpegの場合は32 メガピクセルまでは扱えるが、2メガピクセル以上の画像はサブサンプリングされてサイズが落とされる。」

この2点ですね。

3メガピクセルは大体2048×1536。
5メガピクセルは大体2560×1920ぐらいです。

ポイントは

画像のファイルサイズではなくピクセル数で制限があること。

Jpegでは上限は高いけど表示するときに画質が悪くなること。

ふむふむなるほど。

理論的にはなんとなくわかったのですが、実際のところどうなのでしょうか。

高画質画像を引っ張ってきて比較してみました。

iPhoneで高画質画像は奇麗に表示されるのか？

実験環境

使用するのは以下の2つ。

・iPhone5
iOS 7.0.4

・Macbook Air
OS X 10.9.3
プロセッサ 1.7GHz Intel Core i5
メモリ4GB

2種類の画像の拡大表示を比べてみました。

まず1つ目がこちら。
こちらは圧縮されていますが実際のサイズは13,992px × 6048pxで4.9MB。
奥のカウンターを拡大してみます。

(実寸大の画像はこちら)

iPhone5で拡大した場合。

Macで拡大した場合。

全く同じファイルサイズのものを取り込んで拡大してみましたが、iPhone5の場合かなり画質が荒くなっていることがわかります。

2つ目の画像でも検証してみましょう。

こちらも圧縮されていますが実際のサイズは15,180px × 12,450pxで40.3MB。
観覧車の内側にあるネオンライトを拡大してみます。

 (実寸大の画像はこちら)

iPhone5で拡大した場合。

Macで拡大した場合。

やはりiPhoneだとかなり劣化します。
そしてMacはピクセル1つ1つが見えるところまで拡大できました。

iPhoneに取り込んだ段階で劣化した？

これは考えられる原因の1つかもしれません。

試しにiPhoneで実験に使用した画像を再度パソコンに取り込んで拡大すると、パソコン表示と同じように細かく拡大できました。

iPhone内で確認すると、画像サイズ、ピクセル数ともに取り込む前と一緒だったため、取り込んだ段階で劣化したことは考えられません。

やはりスペック上表示には限界があることがわかります。

上の画像は容量も大きいためパソコンでさえも拡大するのに多少時間がかかりました。

実験を踏まえてのまとめ

スマホでは画像自体は劣化しないが、表示画質が悪くなる。

iPhoneではどんなに高画質の画像を持ち歩いたとしても、画質の持ち味を再現することはスペック上不可能だということ。

そもそもファイルサイズが大きいとクラッシュして読み込まない可能性も十分ありますが…。

デザインの仕事などで大きいファイルを取り扱う方は、これを念頭に入れておけばトラブルも少なくなるのではないでしょうか。

ひとこと

実際遭遇することは少ないです。

合わせてこちらもどうぞ：

趣味発見! iPhoneの写真上達講座 iPhone 5s/5c/5 iOS7

posted with カエレバ

ビビッドパートナーズ FOM出版 2014-09-10

Amazon

楽天市場