web用画像に本当に解像度指定は不要ですか？

質問

5年ぶりにweb制作業務に復帰しました。
私がweb制作で写真や画像をページに組み込むときには、写真や画像の解像度は72に指定していました。
でも、今の会社では解像度がごちゃごちゃで、解像度の指定が変わったのかと疑問に思い、調べました。
そしたら、こんな記事が多いです。

画像サイズ「WEBにおける解像度が不要な理由」
http://www.capricious.info/log/2013/04/07/pixcel/

Web用画像の解像度は72? 96?
http://otzt.nobody.jp/html/resolution_web.htm

がグーグル先生の上位に出てきます。
彼らが言っていることは理解できるけど、web用解像度を72でも350でも何でも好きにして良いわけじゃないと思うから、「解像度が不要」というのは違う気がします。
高画質のフリー写真素材を提供しているならば、解像度は350とかそれ以上ないと加工してもジャミジャミになるから、こういう場合は解像度が高くてもOKかと。
でも、通常のwebでは、解像度は72（今のMacでも、まだ72？）または96を指定するものじゃないかと思います。

実際、今のweb制作では、写真や画像の解像度はどう設定されておられるのでしょうか？
ご指導お願いします。

回答No.1

t_ohta · ベストアンサー

まず解像度の意味を考えましょう。
解像度の単位は「dpi」すなわちドットパーインチです。
1インチの中に何個のドットがあるかという意味です。

もし画像を1インチ幅で表示したい場合、72dpiの画面であれば72ドット必要なので72ピクセル用意する必要があります。
350dpiの画面で表示するのであれば350ピクセルあって初めて1インチの大きさで表示される事になります。

しかし、ブラウザは解像度なんて見ていません。
単純に何ピクセルの画像かという事を元に、画面にピクセル等倍で描画します。
72dpiで100pxの画像も350dpiで100pxの画像も同じ100pxなので、ブラウザは画面に100pxで描画するだけです。
表示の単位が何センチとか何インチなどと言う単位では無く、全てピクセル数なので解像度をいくつにしても100pxで作ってしまえば同じです。

なので、Web用の画像は解像度（dpi）を気にせずピクセル数を指定して作るのです。
印刷物の場合などは、5cmの大きさで350dpiの印刷に使用する画像を用意すると行った指定で写真を加工し、350dpiの密度でピクセルを並べた結果5cmに印刷されるのです。
ようは扱う単位の違いなのです。

ただ、注意しなければいけないのは、スマホなどは非常に高精細なディスプレイを使用していながら基本のビューポートは320pxになっているため、ブラウザが1pxだと思っている点を2～4ピクセルを使って表示しているので、エッジがぼやけたような画像に見えてしまう可能性が有ります。
その場合、HTML上ではimgタグでwidth 300pxとしておきながら、実際の画像データは900pxの幅で作ると行った工夫が必要になります。
この場合でも、ブラウザに対してはピクセル数で指定する事になるので、dpiがどうこうでは無く何ピクセルに加工するかと言う事だけ気にすればいいと言う事になります。

お礼

返事が遅くなってごめんなさい。
t_ohtaさんの教えをもとに、さらに調べて納得いきました。
ありがとうございました。