- 締切済み
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」？ 「プリントは？？？」 という具合に、理解が出来ていません。。 どなたかこういった仕事をされている詳しい方いらっしゃいましたら、是非教えて頂けないでしょうか？ 宜しくお願い致します。
- teniirelo
- お礼率0% (0/5)
- 画像・動画・音楽編集
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- okok456
- ベストアンサー率43% (2553/5876)
追伸 今朝のNHKのニュースで インスタ映えする画像を撮るために高画質・高解像度の ミラーレス一眼や一眼レフを利用する女性が増えているそうです。 https://www3.nhk.or.jp/news/html/20180301/k10011347841000.html 過去の常識に捕らわれることはなさそうですが ホームページ契約の制限内で必要に応じての対応が必要ですね。
- okok456
- ベストアンサー率43% (2553/5876)
「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の画像上で右クリックし「画像の情報を表示」で 画像のピクセル数を確認しました。
- dezimac
- ベストアンサー率56% (2365/4208)
「解像度」は本来は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)は考えなくて良し！
- i-q
- ベストアンサー率28% (968/3394)
そのような仕事はしてませんが、 画面上の大きさ、 Windows 1000 × 500 = Mac 4000 × 2000 じゃないかと思いますm(._.)m 従来の１ドットの大きさに、Retinaは４ドット使うと聞いたことがありますm(._.)m ppiも倍になるのかと・・・・
- dragon-man
- ベストアンサー率19% (2700/13647)
Webに載せる写真で重要なのは解像度でなく圧縮度です。インターネットで閲覧するWebに何MBもある重い写真を載せられたら見る方はたまりません。礼儀として100ＫＢ以内に（出来れば10ＫＢ程度に）圧縮して載せるべきです。サイズにしても1000×500pxもあったら、モニタが小さいノートパソコンなどで見るには支障が出ます。サイズと圧縮度は、見てもらう相手のことを考えるべきで、あなたの言われるような基準は意味がありません。
関連するQ&A
- 解像度を理解できてませんdpiとかppiは知ってるんですが、わからない
解像度を理解できてませんdpiとかppiは知ってるんですが、わからない事がいくつかあります。 1,まず、モニターの画面解像度（1280×800とか）っていうのは何が1280×800なんでしょうか？縦横のピクセル数ですか？でも1ピクセルってものすごく小さい（画面に顔を近付けると見える編み目みたいなやつ）ですよね？どう考えても足りないんじゃないかと思うんですが… 2,jpg等の画像で大きさが800×600px、解像度は72ppiとかありますよね？それを72ppiのモニタで見るとすると、画像全体のピクセル数が800×600で480000ピクセル、モニタの解像度が72ppiということは、1インチ四方が72ピクセルで表現されているということだから480000÷72で6666インチもある、という計算になってしまい、自分の中で納得できません。 画像が表示される大きさは画像の持つ解像度とモニタの解像度によって変わる、というのはわかったんですが、ちゃんと理解できていません。 同じピクセル数の画像でも、モニタの１インチあたりのピクセル数の設定が違えば画面での大きさが違うのはわかります。ということは、ちなみにモニタ解像度が同じなら、画像のppiが変わると、表示される大きさに違いはでるんでしょうか？ここも頭がグチャグチャになってよくわかりません。 3,また、イラレやフォトショでの表示はまた違う、と聞いたんですがどういう事でしょうか？ 以上をどこが合っていてどこが間違ってるのか誰かわかりやすく教えてもらえないでしょうか？ 具体的に数字を示して説明していただけるとありがたいです。
- ベストアンサー
- デザイナー・クリエイティブ職
- 解像度
解像度を上げると画像サイズが小さくなると聞いたのですが、大きくなりました。何故でしょうか？ また、PPIとDPIと印刷サイズと画面表示サイズがごちゃごちゃして上手く理解できません。上手く解説しているサイトはないですか？
- ベストアンサー
- その他(ソフトウェア)
- WEB用の画像解像度について
少し前から自分でWEBサイトを運営しています。 画像もけっこう加工したりして載せているのですが、解像度のことがいまひとつ釈然としないので教えてください。 ディスプレイの解像度はWindowsでは96dpiで、Macでは72dpiです。 利用者の割合でいくとWindowsのほうが圧倒的に多いので、今はそれに合わせて画像解像度は96dpiで作っています。 もっとも、サイズ（縦横のピクセル数）が同じならどちらでも画面での表示は同じだと思うのですが、Photoshopの解像度の設定ウインドウには、ピクセル数の設定と、ドキュメントのサイズ（寸法/解像度）の設定があります。 WEB用の画像ということで画面でしか見ないのなら、dpiの数値は特に気にしなくていいのでしょうか。そのあたりがどうもよく分かりません。 画像は基本的に原寸で載せるとして、96dpiがいいのか、72dpiがいいのか、またはそれ以外の数値がいいのか、 詳しい方がいらっしゃいましたら教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像解像度 プリンタとディスプレイの違い
私の知識と過去ログをざっと調べてある程度こうかな？と思うのですが、今一自信がないので私の結論を書きます。 合っているかどうか回答をお願いします。 Macのディスプレイの標準解像度が75dpi これに合わせてＷＥＢ画像の解像度は75dpi（pixel/inch）になっている。 同じ画像をPhotoShopなどで10dpi(pixel/inch)にしても見た目が劣化しないのは、 ドキュメントサイズ（印刷されるサイズ）が、解像度に合わせて自動に変化しているため。 そもそもディスプレイでの75dpiと印刷機の標準300～350dpiの違いは 表示可能な色の違い、ppiとdpiの違い（色の階調が作れるかどうか）が主な原因。 バイキュービックなどの画像の補完処理をしない限り、解像度をいじってもディスプレイに表示される画像は変わらない。 lpiは色の集合体で色を見せるため、倍のdpiが必要。
- 締切済み
- CAD・DTP
- 【WEB制作】画像ファイルの解像度は72？96？
WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。 できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか？ 初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。
- ベストアンサー
- グラフィックソフト
- PNGの解像度
PNGを出力しました 画像サイズ（10.24int×7.68int） 解像度（100dpi） 完成したPNGの「プロパティ-概要」を見ると 幅 1024ピクセル 高 768ピクセル 水平方向の解像度 99dpi 垂直方向の解像度 99dpi と表示されています。 「幅/高」はこれで良いのですが、解像度は「100dpi」であって欲しいのです。 これは少数桁等の表示上の問題なのでしょうか？ その理由を説明できれば「99dpi」で問題はありません。 どなたか教えていただけないでしょうか。宜しくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- プリンター解像度の設定はどこで？
デジカメで、写真印刷する時の事を調べていて、プリンター解像度を変更すれば、きれいな写真に印刷できるという文言をみたんですが、どこにも設定箇所がないようなんですが・・・。 デジカメの記録画素数の意味と、 パソコン自体の解像度が、Windowsの場合、 96dpi(1024＊768)ということと、 Photshop Elmenets（画像加工ソフト）での、72dpiの意味が違う（72dpiは、画像解像度が不明な場合にも使われる） 位までは調べました。 （1ピクセルは、1/72インチで、 解像度によって、違ってくるということも。） プリンターは、EPSON PM－850PTなんですが、 写真用の印刷設定はあるようなんですが、 dpi (プリンターの場合は、ppiだということも、 理解してます。） の設定箇所がないようなんですが・・・。 これは、設定ができるプリンターがある、ということなんでしょうか？ それとも、パソコン側で、プリンター用の解像度に設定しなおしてから、印刷する、ということなんでしょうか？ よろしくお願いいたします。
- ベストアンサー
- デジタルカメラ・フィルムカメラ
- MacとWinの画面解像度の違いの影響を教えてください
Macのディスプレイの画面解像度は72dpiで固定、Winのディスプレイの画面解像度は96dpiが標準。（でも、今は、120～150dpi程度の環境を使っている人はざらとか。。） てことは、720pixel四方のオブジェクトをMacで作ると、Winではもっと小さく表示されるってことですか？Macで作ったHPは、Winでは全体的に小さく見えるものってことですか？150dpiの画面解像度の人は、半分以下の小ささに見えてしまうということですか？ それと、Photoshopで解像度72dpiの画像を100%表示で確認したときの大きさが実際にwebで表示される大きさになるんですよね？ こういう認識でいいですか？
- 締切済み
- Mac
- 元々解像度が低い画像を大きくできない説明は？
タイトルが意味不明ですいません・・・。 もともと、解像度が低い（もしくはサイズが小さい）ものを拡大して解像度をあげても きれいになるわけではないということを説明するにはどうやって理解してもらえばいいですか？ うまく説明ができずに困っています・・・。 たとえば、100px×100px（72dpi）くらいの画像を 1200pxくらいにphotoshopなどで拡大しても、元の画像がより荒くなるだけなのですが これをうまく説明して理解してもらうにはどうすればいいか悩んでいます・・・。
- ベストアンサー
- グラフィックソフト
