iMacの5K Retinaディスプレイは綺麗なのだけれど、サイト運営者やブロガーなど情報発信者側からは1つ難儀な点がある。掲載する画像の大きさだ。

何が問題かというと、普通のディスプレイなら、今まで通りの画像サイズでアップロードしていても画像の表示品質に問題がなかった。

ところが5K Retinaディスプレイで見ると、今まで問題ないと思っていた画像の大きさが足りないらしく、ややボヤッとした表示になってしまうのだ。

早速違いをご覧頂こう。

長辺1024ピクセルと2048ピクセルの画像比較

左が1024ピクセルの写真。Retinaディスプレイを使用している人にだけ見えるボヤッとした画像。右が2048ピクセルの写真を掲載した記事。Retinaディスプレイでも綺麗に見える。

スマホで閲覧している方はあまり違いが分かりづらいかも知れない。国産のWindowsデスクトップパソコンの通常のディスプレイで見ている方も恐らく同じ画質に見えるのではないだろうか。

ところがiMacのRetinaディスプレイで見ると、違いがハッキリ出てくる。画像の大きさは2倍の違いがあるものの、表示サイズは同じ。画像の表示設定も小さい方の横幅1024ピクセルのサイズに合わせてあるのになぜ？　その原因を説明していきたい。

Retinaディスプレイって何？

なぜウェブに掲載している画像をRetinaディスプレイで見ると、ボヤッとしてしまう事が起こるのか。Retinaディスプレイは、ザックリ言ってしまうと、1つのピクセルに4つのピクセルを詰め込んで、まるで実物が目の前にあるかのような、画面から今にも飛び出してきそうな精細な表現を実現している。

ディスプレイの解像度は5120×2880ピクセルだが、領域は2560×1440ピクセルになり、iMacの設定画面では疑似解像度と表示されている。最初iMacを購入する際に、ディスプレイの解像度が5120×2880ピクセルあると聞いて、かなり広い作業領域を確保できてたくさんウィンドウを広げても狭く感じないだろうけれど、その分カーソルも文字も小さく表示されて使いづらくないだろうかと不安だったが、Retinaディスプレイ仕様なので、27inchの画面に疑似解像度2560×1440ピクセルの領域で、何もかも最適な大きさで表示される。オマケに大きい画像を一回り小さな領域にギュッと表示させるから精彩になる。のだと思う。技術者ではないからその辺りの詳しいことは分からないし、書いていて頭がこんぐらがってきたのでこの当たりで止めておく。

Retinaディスプレイで表示させることで出てくる問題点

ところで1つのピクセルに4つのピクセルを詰め込んで表示しているという事は、面積にして4倍。長さにして2倍の画像が求められることになる。

このブログは横幅を1024ピクセルに設定している。言い換えると1024ピクセルの大きさで画像が表示されるようになっている。となるとRetinaディスプレイで今まで通りボヤッとしない、問題のない表示にしようとすれば、2倍の長さの横幅2048ピクセルの画像が必要ということになる。

これが今まで通りの横幅1024ピクセルの画像を用意すると、1ピクセルの中で足りない3ピクセル分がゴムのように引き延ばされてボヤッとした表示になってしまう。解決策としてはブログの横幅を半分の512ピクセルに設定すればいいのだが、それだとちょっと小さすぎやしないか、見づらくなりやしないかということになる。

Retinaディスプレイに対応するための画像と、画質の設定

つまり2倍の横幅2048ピクセルの画像を用意して、1024ピクセルで表示させてやれば解決する。

しかしRetinaディスプレイに対応しようとすると、1つ問題がある。2048ピクセルで画像保存すると、一枚の画像の容量が2MB以上というとんでもない数値になってしまうのだ。2MBの画像を1ページに10枚も20枚も掲載すれば、かなり重くなる。

そこでどうしようかと頭をひねらせた。写真の容量を下げるには、キヤノンの純正RAW現像ソフトDPPを使って、RAWデータからJPEG変換保存する際に、画質の項目の数値を下げればいい。

というわけでまずは最高の10から8へ。それでもまだまだメガ級なので更に5に下げて、まだ大きいので3にしてみたら、まぁ数百KB程度に収まったがまだ大きい。最終的に最低画質の1にしたら、300KB台に収まった。

最低画質の1・・・。せっかくいいカメラやレンズで撮ったのに？と訝ったが、実際にブログに掲載した写真を見てみると、最高画質の設定10の写真と遜色ない。要は画像表示が1／2の大きさに、面積にして1/4に縮んでいるから、粗が分かりにくくなっている。

等倍で見ると、やはり描写が若干ではあるがモザイク崩れを起こしているのが見受けられる。さすがにデータをお渡しする際にこの画質ではお渡しできない。設定が固定されるから設定を直し忘れて画質1で渡してしまいそうだから気をつけなければ。

しかしRetinaディスプレイ対策としてブログに表示させるなら、最高画質に近い全く問題ない綺麗な画質で表示される。しかしDPPの最高画質10の設定で、1とはどれくらいの画質劣化なのだろうかという疑問が湧いた。そこでAdobe Lightroomと比較してみた。

Canon DPPとAdobe Lightroom、保存時の画質設定の数値の違い

Lightroomでも保存時に画質の設定が出来る。こちらはパーセンテージで指定するようになっている。DPPの画質1はLightroomの画質何パーセントに相当するのか、JPEG変換したファイルがほぼ同じファイルサイズになるよう実験してみたら、Lightroomの画質65％で保存した画像が、DPPの画像ファイルと大体同じ大きさになった。

• 各種パラメータ：撮影時の状態
• 画像の大きさ：長辺2048px

見比べてみると、DPPの方が色が濃い。これは各RAW現像ソフトに始めに取り込んだ際の特色から来る違いだろう。

左がDPPの画質1。656KB。右がLightroomの画質65％。661KB。

というわけで、DPPの画質1はLightroomの画質約65％に相当することが分かった。DPPの方は画質設定の最低の1ではあるが、ウェブで十分鑑賞に堪えうる画質になるように設計されているように思われる。Lightroomの方は、同じ1/10だからと10％で保存すると、モザイク描写がちらほらと見受けられ、ちょっと見るに堪えない画質になった。

Twitterでの表示はどうか

Twitterに画像を上げると画質が劣化するという話を良く聞く。先日撮影したレイヤーさんも写真をTwitterに上げる際にせっかく綺麗に撮ってくれたのに画質が劣化するという事で、何かテクニックを使って写真を上げ直していた。ありがたいありがたいと保存させて使わせて貰ったが、Retinaディスプレイで見ると当然Twitterの画像も大きいサイズの方が綺麗に表示されることになる。

実際自分の撮った風景写真、DPPで画質1に設定した（Lightroomなら恐らく画質65％相当）長辺2048ピクセルの写真を上げてみると、とても綺麗に表示された。これが1024ピクセルだと、なんだかボヤッとしてしまう。

というわけで、ツイッターに僕が撮ったコスプレ写真を上げる際は、長辺2048ピクセルの大きさにして貰えると、ブログで使用する際に綺麗な表示になるので助かります。