webに載せる写真の解像度について質問です。

質問

webサイトに表示させる写真の画像解像度について質問です。

プロではないのですが、会社でたまに仕事でwebサイトやカタログの仕事をしている者です。Retinaディスプレイが主流になり、写真を表示させる時の解像度の理解が混乱しています。

まず私のPCの内臓ディスプレイですが、
MacBook Air (13-inch, Mid 2013)
13.3 インチ（1440 x 900）
Intel HD Graphics 5000 1536 MB です。

私が教えてもらった従来の決まりは以下で、例えば幅1000px × 高さ500pxの画像を表示させたい時、

画像サイズはそのまま幅1000px × 高さ500pxで、
「Macは解像度72ppi」
「Winは解像度96ppi」
「プリントは350dpi」

でした。
しかしRetinaが主流になってから、解像度がなのか？画像サイズがなのか？2倍か3倍必要だというネット上の記事がいくつもあり、しかしどの記事を読んでもなかなか理解がおよびません。。
私にはこれを教えてくれる先生や上司がおらず、解決出来ずに困っている為今回ここに質問してみました。
答えとしては、

今の私のPCでRetinaに対応する画像を作る為には、幅1000px × 高さ500pxの画像を表示させたい場合、

「Macは解像度144ppi」で「幅2000px × 高さ1000px」
「Winは解像度192ppi」で「幅2000px × 高さ1000px」
「プリントは変わらず350dpi」

が正解なのでしょうか？
そして仮に私かRetina対応PCを使っていた場合は、幅1000px × 高さ500pxの画像を表示させたい場合、

「Macは解像度144ppi」で「幅1000px × 高さ500px」？
「Winは解像度192ppi」で「幅1000px × 高さ500px」？
「プリントは？？？」

という具合に、理解が出来ていません。。
どなたかこういった仕事をされている詳しい方いらっしゃいましたら、是非教えて頂けないでしょうか？

宜しくお願い致します。

回答No.5

okok456

追伸
　今朝のNHKのニュースで
　インスタ映えする画像を撮るために高画質・高解像度の
ミラーレス一眼や一眼レフを利用する女性が増えているそうです。
https://www3.nhk.or.jp/news/html/20180301/k10011347841000.html
　過去の常識に捕らわれることはなさそうですが
ホームページ契約の制限内で必要に応じての対応が必要ですね。

回答No.4

okok456

「Macは解像度72ppi」「Winは解像度96ppi」はVGA 640×480時代の話でしょう。
現在、一般的デスクトップPCは1920ｘ1080pxで多くは２０インチぐらいでしょう。

一眼レフメーカー　ニコン、キャノンのホームページを見ると
ニコン
http://www.nikon-image.com/products/slr/lineup/d850/features03.html
936px × 844px (297px × 268px で表示)
画像のみ表示
http://imgsv.nikon-image.com/products/slr/lineup/d850/img/features03/pic_01.jpg
キャノン
http://cweb.canon.jp/eos/lineup/1dxmk2/feature-operability.html
440px × 330px
http://cweb.canon.jp/eos/lineup/1dxmk2/img/feature-operability/finder.jpg
ニコンは拡大して見ることを考慮しているようですね。

両社の共通点は
映像が主のページは映像が画面幅いっぱいですが文章で説明するページでは
２０インチモニターでA4の幅２１０ｍｍより多少広い程度です。
http://www.nikon-image.com/sp/d850/
http://cweb.canon.jp/eos/special/6dmk2/index.html
他の多くのホームページも同じですね。
見慣れたA4サイズの用紙がベースなのでしょうか？

モニター解像度のシェア（2018年1月現在）がありました。
https://webseeya.com/2015/05/25/display-resolution-2015/
スマホの画面解像度のシェア（2018年1月現在）もありますね
https://webseeya.com/2015/09/04/smartphone-display-share/
iPhone　960×640
New iPad　2048×1536　
Retina Macbook　2880×1800
4Kモニター3840×2160が主流になってきたら対応ですね。

縦長で見るスマートフォンも考慮が必要ですね
最近はスマートフォン対応に自動変換するHP作成ソフトが主流のようですね。
パケット料金を気にする人はwifi接続を利用すると割り切れば
スマートフォンで見る場合は拡大が簡単ですから解像度は高めが良いかもしれません。
全体と細部を拡大した画像を掲載しているサイトもありますね。

最適な解像度は悩みだしたらきりがないですね。
3年後は？？？？
しばらくは２０インチ1920ｘ1080pxを念頭に制作で良いと思います。
同業他社や色々なサイトを見て確認されれば安心できるでしょう。

印刷業界では350dpiのようです。
A４でもA3でも３５０dpiです。
２０インチモニターの大きさは約44x25cm
350dpiだと6063x3445ピクセルですね。
印刷は悩まないですみますね。

余談
コンピューターの能力が低かった頃、駅貼りの線路越しに見るような大きなポスターは７２dpiでしたので近くで見ると粗が見えました。

ついでに
写真プリントは３００dpiが主流です。

尚
WindowsPCでwebの画像上で右クリックし「画像の情報を表示」で
画像のピクセル数を確認しました。

回答No.3

dezimac

「解像度」は本来は1inch（もしくはcm）あたりの点の数なんですけどね。
画面上の表示は画素数といった方が正しいのだけど、なぜかこれも昔から解像度というから混乱が生じている。

> Macは解像度72ppi、Winは解像度96ppi
これはもう迷信みたいなものですから一切無視してください。
とりあえず、Webとかで何かで作業するなら72dpi(ppi)でいいです。
dpiは印刷の際は重要になるけど。

CSSで画像サイズをあえてinchとかで指定しない限り全く関係ありません。
そういう指定は、解像度の解説サイト以外で見たこともないけど。
自分は一部ページに印刷用のCSSも設定していてそちらではinch指定もしているけど。これは特殊な例。
画面用はあくまでピクセル指定で特別な設定はしていない。

↓Retinaディスプレイが登場する以前の古いマニアックなサイトですが、非常に参考になります。
http://rinrin.saiin.net/~aor/hms/reso

> 幅1000px × 高さ500pxの画像を表示させたい
単純に1000 × 500pxの画像を用意してください。
ppi(dpi)は特に気にする必要なし。

Macであれば、Retinaでもそうでなくても、自動で処理して適切な大きさで表示されます。
何が何でも綺麗に見せたいというなら、2000×1000の画像を用意して、CSSで1000×500で表示するようにしておけばいいけど、
無駄にデータ量が増えて、読み込みに時間がかかるだけなので、推奨はしません。
昔なら回線速度が遅くて読み込みに時間が掛かる、今なら通信量を無駄に消費して規制が掛かる（パケ死）と言えばいいでしょうかね。

結論、1000×500で表示させたいなら、1000×500の画像を用意すればいいです！
dpi(ppi)は考えなくて良し！

参考URL：

http://rinrin.saiin.net/~aor/hms/reso

回答No.2

i-q

そのような仕事はしてませんが、
画面上の大きさ、
Windows 1000 × 500
= Mac 4000 × 2000
じゃないかと思いますm(._.)m

従来の１ドットの大きさに、Retinaは４ドット使うと聞いたことがありますm(._.)m
ppiも倍になるのかと・・・・

回答No.1

dragon-man

Webに載せる写真で重要なのは解像度でなく圧縮度です。インターネットで閲覧するWebに何MBもある重い写真を載せられたら見る方はたまりません。礼儀として100ＫＢ以内に（出来れば10ＫＢ程度に）圧縮して載せるべきです。サイズにしても1000×500pxもあったら、モニタが小さいノートパソコンなどで見るには支障が出ます。サイズと圧縮度は、見てもらう相手のことを考えるべきで、あなたの言われるような基準は意味がありません。