retinaディスプレイ

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

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

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

これはretinaで無い用。

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

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

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

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

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

コメント 6

自分は貴ブログをWindows機/WSXGAモニター(1680×1050)で拝見していますが、画面ズームを100%にするとretina対応の画面との違いは感じませんが、150%くらいまで上げると明らかに解像度の違いが表現されます。
この場合、当然ながら文字も大きくなってしまいます。
retinaのiPadでも試してみましたが、特にズームアップしなくても解像度の違いは良くわかりました。
やはりretinaは良いですね^^
by Mitch (2017-07-18 18:26) 

私はWindows使用ですが、若干retina用の方が良いかなと思います。
Mitchさんがコメントされているように、
画面の倍率を150％とか200%に上げると違いがはっきりと判ります。
画像の表示サイズの設定は管理画面の「設定」でできたような気がします。
私は600（長辺が）で設定しているので、
より高解像度（例えば1280×800）の画像をアップロードしても、
長辺が600で表示されます。
設定より低解像度の場合は等倍までだと思います。
by Hiro (2017-07-18 20:19) 

▶Mitch さん
iPadは解像度が高いですよね。　以前はカラープロファイルに対応していなかったので、AdobeRGBでアップロードすると濃淡がおかしくなってましたが、今は直っている様です。

▶Hiro さん
私の画面のデザインではサムネイルを600ピクセルで指定した場合、縮小画像が生成されてしまうため高解像度にはならないんですよね。
まだ設定が足りないのかもしれませんが。
by まっちゃん (2017-07-19 08:57) 

私もWindows使用ですが、拡大するとハッキリ違いが判りますね。
私もソースコードの編集画面で編集してみましたが出来ました。
画像編集画面では、長辺最大1024ピクセルとなってますが、
1280ピクセルでも出来ました。
by takapy77 (2017-07-19 22:34) 

▶takapy77 さん
最大1024ピクセルというのはサムネールのサイズですね。
画像は1MBまでがアップロード可能ですので、2500ピクセルくらいでも大丈夫じゃないでしょうか。

by まっちゃん (2017-07-20 07:43) 

追伸
画像は6000×4000をアップロードした事があるので1MBまでなら
大きくても可能です。
長辺1024ピクセルは、サムネイル表示の最大値ですが、それが
1280ピクセルに出来たのです。
by takapy77 (2017-07-20 21:28)