AppleのRetinaディスプレイはなぜか写真画像が粗く見える。その対策

昨秋に購入したMacBookPro Retina の液晶モニタは、Appleが「美しい」と喧伝しているRetinaディスプレイだから、さぞ写真画像が高画質で見られるでのは、と期待していました。

Retinaディスプレイとは、モニタの解像度を2倍、画素数で4倍にした超精細なディスプレイのことです。iPhone やMacBookPro Retina などのアップル製品に主に装備されています。

しかし、美しいはずのMacBookPro Retinaでは、なぜか当ブログの写真画像がボケて見えます。高精細なモニタなのに写真やイラストがボケるとは「なんかヘンだな」と思いながらもブログを更新していました。

原因に気がついたのは3週間ぐらい過ぎてからです(汗)。従来のディスプレイに最適化された画像データはRetinaディスプレイではボケて表示される仕様なんです。そういえばphotoshopでもそういう風に見えたなあ。

ナナオL997とMacBookProRetinaでそれぞれ画面ショットを撮って下に並べてみます。

01

モニタによって見え方が違いますが、通常モニタで見ると、ナナオL997の方は普通に見えますが、Retinaの方は解像が低くボソボソして見えるでしょう。背景の葉っぱの違いが分かりやすいです。

対策は簡単です。

Retinaディスプレイは通常モニタに比べて解像度が2倍あります。したがって写真データのピクセル数もこれまでの2倍(面積比で4倍)にします。

当ブログはカラムの幅が540ピクセルあります。
これにぴったり収まるようにするには、写真を幅1080ピクセルにします。

07 180105s

540ピクセルのブログ幅にぴったりと収まっていますね。
保存は、Photoshopならjpeg画質3の低画質に設定します。何しろ面積比4倍ですから少しでもデータを軽くしたい。モニタには1/2に縮小表示されるから見た目の画質は充分に確保されています。
08

これには作業上の問題がひとつあります。幅1080ピクセルの写真はそのままでは当ブログに収まりきりません(本当はブログの仕様で勝手にリサイズされて収まるんですが、それでは写真がシャープに見えないことが多々あります)。WordPress4.4以降ならレスポンシブ表示になるし、ブログデザインや画像データのクオリティをあまり気にしない一般ブログなら大きめの画像データを作っておけばそれで足りるかもしれません。

が、フォトグラファーとしてはそれでは困ります。

Retinaディスプレイに最適化するには、写真の幅を正確に2倍(面積比4倍)にしなければなりません。幅540ピクセルなら1080ピクセルにします。決して1079ピクセルではありません。2で割り切れない数字にするとやっぱり表示がきれいになりません。

そして、写真をアップロードするたびに1/2表示をするコードを書き加える必要があります。毎度の作業が面倒ならfunctions.phpに直接コードを記述すれば1度で済みますが、それはそれで別の問題がおきそうです。写真をきれいに表示したいだけなのにハードルが多すぎますね。

では簡単にできる対策はないか、というとあります。

Mac用ブログ作成エディタ MarsEditを使う

Mac用のブログ作成エディタ MarsEdit はブログを書くのにたいへん優れたソフトです。v.3.6.8からRetina に対応しました。ぼくは以前はWordPressの管理画面で記事を書いていましたが、今ではMarsEditなしにブログ記事を書く気になれません。

06

MarsEditなら、右のウィンドウで文章を書きながら、左のウィンドウでリアルタイムにプレビューができます。記事全体を把握しやすいです。

写真をアップロードする方法は、右ウインドウにドラッグアンドドロップするだけです。下のようなウィンドウが表示されるので Treat as Retina imageにチェックを入れましょう。自動的に最適化された写真がアップロードされます。

09

あらためて書きますが、Retinaに対応する写真データは、幅のピクセル数を2倍(面積比4倍)で作成しておく必要があります。

MarsEdtiはもともとMac用のWordpress用ソフトだったようですが、Blogger・はてな・ライブドアブログでも使えます。価格は4800円(為替相場による)しますが、効率を考えるとそれくらい払う価値があります。

メニューや設定ダイアログが日本語化されていませんが、一度設定すればほとんどいじる必要はないから不便ではありません。ブログ本文は問題なく日本語で書けます。

対策その2 プラグインを使う

04

ブログをWordpressで作成しているなら、 WP Retina 2X というプラグインを使えば簡単だし無料です。

画像をアップロード時に自動的にRetina対応してくれます。幅540ピクセルの写真を幅1080ピクセルにしてくれるんです。写真データ作成やアップロード作業などのワークフローがこれまでと同じようにできるのがいいところですね。

過去の記事の写真もRetina適正化できるのもナイスです。