Retina(擬似解像度)における画像の引き伸ばしについて

以前macOSのRetina(擬似解像度)についての記事を書いたが、ここではRetina(擬似解像度)における画像・動画の引き伸ばしとその対策について書こう。

Macで4Kモニターを使用した際のRetina解像度

Retinaによる画像・動画の引き伸ばし

以前の記事では「Retina(擬似解像度)はインターフェースを拡大表示し、ピクセル密度の高さを活かして文字やインターフェースの視認性を上げている」と書いたが、インターフェースが拡大されているからには当然のことながらmacOS上の画像(動画)も影響を受ける。

下記はMacBook Pro 13インチ(ネイティブ解像度2560x1600)における各擬似解像度のスクリーンショットだが、いずれの擬似解像度においても「512x512」ピクセルの正方形の画像をクイックルックで表示している。

擬似解像度1280x800
擬似解像度1440x900
擬似解像度1680x1050

一目瞭然であるが、同じ「512x512」というピクセルの画像を表示しているにも関わらず擬似解像度によって見かけ上の画像のサイズが変化していることがわかる。

Retina表示において画像の大きさは擬似解像度が基準であり、上記の例では「512x512」ピクセルの画像はネイティブ解像度の「2560x1600」ではなく擬似解像度を基準にして大きさが変わるため引き伸ばされてしまい、画像は若干ボケてしまうことになる。

ちなみに「プレビュー」アプリの環境設定では「100%スケールの定義」という項目で「1イメージピクセル=1スクリーンピクセル」に設定するとRetina表示における画像の引き伸ばしを軽減することができる(実験してみた限り完全にRetinaの影響がなくなるわけではない)。

なお、「画面上のサイズ=プリント出力上のサイズ」に設定するとRetina表示における影響をもろに受けてしまい、プレビューアプリでの画像が著しくボケる。

また、動画についても動画プレイヤーによって若干の違いはあるものの擬似解像度によって再生解像度は変化する。

これらRetina表示における画像・動画の引き伸ばしを完全に廃するには4Kモニターなどであればディスプレイの設定でネイティブ解像度に変更すればいいが、MacBookシリーズなどでは通常の方法ではそもそもネイティブ解像度を選択できないため、Retinaによる影響を完全に無くすことは現実的ではない。

アプリアイコンや画像・動画編集ソフトはほぼ影響を受けない

前述のように擬似解像度の変更で画像は引き伸ばされてしまうが、PhotoshopやAffinityなどの画像編集ソフトではあらかじめRetinaによる影響を考慮しているため、画像編集ソフトで擬似解像度による画像の引き伸ばしが問題になることはほぼない。

下記は各擬似解像度で同様に「512x512」ピクセルの画像を100%表示でAffinity Photoで開いた画面だ。

擬似解像度1280x800
擬似解像度1440x900
擬似解像度1680x1050

擬似解像度によるインターフェースの変化に伴い、Affinity Photoでは多少正方形の画像の大きさが各擬似解像度で変わってしまっているが、それでも先ほどのクイックルックの画像ほどの引き伸ばしはない。

更にAffinity DesignerではRetina表示に特化した「Retinaピクセルモード」という専用のモードも用意されており、擬似解像度による画像の引き伸ばしがPhotoshopやAffinityなどの画像編集ソフトウェアで問題になることは少ない。

もちろん、これは動画編集ソフトでも同様であり、Final Cut Pro XやAdobe Premiereなども同様にRetina表示を考慮して設計されているため動画の解像度が影響を受けることはほぼない。

iMac 5Kが初めて登場した時、Appleは「iMac 5Kでは4K解像度の動画を100%表示で余裕を持って編集することが可能」と謳っていたが、これも「動画編集ソフトウェア上の動画はRetina表示による影響を受けない」という前提があってこそである。

また、macOSのシステムアイコンやアプリケーションのアイコンはあらかじめアイコンファイル(ICNSファイル)のサイズが最大「1024x1024」ピクセルに達するため、macOS上のアイコンもよほど古いアプリケーションでない限りRetina表示による影響を受けることはない。

Webサイト運営者はRetinaによる画像の引き伸ばしに注意を払う必要がある

前述のように画像・動画編集ソフトやアイコンはRetina表示による影響はほぼないか無視できるレベルであるが、Webサイト運営者はWebサイト上の画像の大きさに注意を払う必要がある。

SafariにしろGoogle Chromeなどのサードパーティーのブラウザにしろ、ブラウザはWebサイトのレイアウトを維持する上でRetina表示における画像の引き伸ばしの影響を許容せざるを得ないため、Webサイト上の画像はサイズに余裕がないと著しくボケてしまう。

下記はこのブログのプロフィール画像において「100x100」ピクセルの画像をCSS(スタイルシート)で「Width 100 Height 100」の大きさに指定して表示したものだ。

本来であれば「100x100」ピクセルの画像を「100x100」の大きさで表示したのなら画像が引き伸ばされることはないが、Retina表示上のブラウザにおいては画像がRetina表示の影響を受けて引き伸ばされ、上記画像のように画像がボケてしまう。

そのためWebサイト運営者はあらかじめWebサイト上に用いる画像を余裕を持ったサイズで作り、Retina表示における引き伸ばしの影響を考慮しなければならない。

下記画像では「400x400」ピクセルの画像を同様に「100x100」の大きさに指定して表示したものだ。

この場合は元となる画像が「400x400」という余裕のあるサイズのため、Retina表示によって画像が引き伸ばされても精細な表示になる。

ただ、さすがに「100x100」の大きさで表示するのであれば元となる画像の大きさはせいぜい「200x200」や「300x300」でも構わないだろう。

なお、当ブログではほぼ全ての画像やスクリーンショットはRetina表示を考慮してあらかじめ画像の大きさに余裕を持たせてあるため、Retina環境においても画像がボケることはほぼないはずだ。

まとめ

本来、Retina表示における画像・動画の引き伸ばしをユーザーが意識する必要はなく、画像・動画編集ソフトウェアもRetina表示を考慮しているため、Retina表示における画像・動画の引き伸ばしが問題になることもほとんどない。

ただ、ブラウザに限っては前述のように「レイアウトを維持する」という前提があるため、Retina表示上では画像サイズに余裕がないと画像がボケてしまうためWebサイト運営者はRetina表示による影響を考慮する必要がある。