So-net無料ブログ作成
検索選択

retinaディスプレイ [パソコン]

retinaディスプレイでない方には何ら関係のない話かもしれません。 また、Windowsの事情はよく知らないのでどうなるかはわかりませんが、ちょっと実験して見ました。 画面が乱れた方がおられましたら申し訳ありません。

_DSC4625.jpg

これはこのブログの通常の600x400ピクセルの画像です。

_DSC4625@2x.jpg

これはretina用の1200x800ピクセルの画像です。 retinaでないディスプレイの方には同じ様に見えていると思います。(画像をクリックすると違うサイズの画像が表示されます)

_DSC1110.jpg

これはretinaで無い用。

_DSC1110@2x.jpg

これはretina用。 カラープロファイルは通常はsRGBですが、この画像はdisplay P3(iMacのプロファイル)にしてみました。 違いが出るでしょうか。

_IMG8428.jpg

retina対応でない方には違いが出ないと思うので、どの様に見えているかを表現してみようと思い、画像を2倍に拡大して見ました。 retinaディスプレイではこんな感じの差で見えています。(実際にはこの1/2の大きさで) 

ここからはiMacの話ですが、retinaディスプレイは4ピクセルを1ピクセルとして扱い、単にアンチエイリアスをかけて表示しているだけかと思ったのですが、そうでもない様ですね。 文字はちゃんと精細に表示される様です。 画像はアンチエイリアスをかけずに拡大している様ですが、アプリケーションによってはピクセル等倍で表示されるみたいです。 古いアプリケーションのウインドウは文字やボタンなどは高精細に表示されますが、カスタムのアイコンは拡大されて表示されています。 古いアプリケーションで表示がずれたりコントロールバーなどの操作がおかしくなる様な場合は、アプリケーションのフォルダーで右クリックし「情報を見る」を選択して現れたパネルで「低解像度で開く」にチェックを入れると直ることが有ります。

このブログでどうやってretina対応の表示をしたか、と言う事ですが。 通常アップロードする2倍のサイズの画像をアップロードし編集します。 すると当然2倍のサイズで表示されてしまいます。 そこで、上の「<>」印をクリックするとソースコードの編集画面になります。 その中にアップロードした画像のwidthとhightを指定した項目がありますので、この値を半分の数値にしてやります。 こうするとブラウザが半分の大きさで表示してくれる様になります。 retina対応でない場合は半分の大きさで表示するには画素を間引くだけですが、retinaの場合はそのまま表示されます。 と言うことは、retinaの場合は普通に指定した場合は2倍に拡大して表示しているってことですね。

今気が付きましたが、このso-netの編集画面の上にあるアイコンは、アマゾン、楽天は低解像度ですがツイッターは高解像度ですね。 何故なんだろう。

コメント(5)