Webにおける解像度のお話 Publish Date: 2017.08.10 Webにおいてはピクセルが絶対です。 紙のデザインをやっている人にとっては画像の解像度というのは気をつけるものですが、Webにおける解像度というのはちょっと複雑です。 解像度を表す単位には、「dot per inch(1インチあたりのドット数)」という英語を略した「dpi」という単位が使われています。 72dpiとは1インチあたり72ドットの画像解像度ということになります。 72dpi=1インチあたり72ドットの画像解像度

物ギリギリ(離れて見るポスター程度まで). 印刷(DTP)における解像度は、1インチ(2.54cm)の中にどれだけドット(ピクセル)があるかの密度を表すものです。単位はdpi(dot per inch / ドット・パー・インチ)もしくはppi(pixel per inch / ピクセル・パー・インチ)。当然のことながら密度が小さいと粗く、大きいと滑らかに表現されます。 単位の前の数字は正方形の面積ではなく、一辺の1インチあたりのピクセル数で表します。たとえば、10dpiなら横10ピクセル×縦10ピクセルで合計100ピクセルとなり、350dpiなら横350ピクセル×縦35… 趣味はホラー作品鑑賞と怪談話を聞く事。激辛グルメが好き。. 画像の解像度とは画像サイズ1インチあたりのドット数で決まり、dpi単位で表します。WEB上で使う画像は72dpiです。印刷物はフルカラー印刷で350dpi位の解像度が必要です。高解像度モニターには画像サイズで対応するのでWEB画像の作成に解像度を考慮する必要はありません。 紙のデザインをやっている人にとっては画像の解像度というのは気をつけるものですが、Webにおける解像度というのはちょっと複雑です。, 解像度とは単位あたりの画素の数、つまり密度を表します。単位にはよくインチを使うので、平たく言えば、1インチあたりどれくらい点々があるか、ということになります。これがたくさんあるほど高解像度になるというわけです。, 解像度を示す単位にdpi (dot per inch) があります。1インチあたり何ドットで表わすか、を示しますが、このドットというのは多くの場合、印刷のインクの点になります。印刷はCMYKの細かい点々の集合により作られますので、点々が多いほど、つまり高解像度なほど高精細に印刷されます。また、高解像度なほど、1つの点の大きさは小さくなります100dpiは1インチあたり100ドットですから、1ドットは0.01インチのサイズになります。, 100dpiの画像と300dpiの画像を同じサイズで印刷した場合、300dpiの方がより滑らかに細かい所まできちんと印刷されます。ただ、印刷機にも限界がありますので、例えば印刷機の限界が600dpiだとします。印刷機は600dpi以上の細かいドットを出力することができないので、1000dpiで設定しても600dpiと変わりません。, 似たようなのにppiという単位があります。これはpixel per inchの略で1インチあたり何ピクセルか、という単位です。考え方は同じですが、コンピュータはピクセル単位で画像を扱うのでppiという単位になります。少し注意したいのが、デジタルな画像の場合1ピクセル以下の情報は持っていないということです。, dpiもppiも似たような感じですが必ずしも等しいわけではありません。印刷の場合は、72ppiの画像を300dpiで印刷することも可能ですし、300ppiの画像を72dpiで印刷することも可能です。では、この場合どのように違うのでしょうか。, 前者の場合は1インチ72個の四角を300個のインクの粒で印刷することになります。300dpiで印刷したからと言って、300ppiの画像になるわけではありません。先述した通り1ピクセルの四角はそれ以上細かい情報は持ちあわせていません。つまり1ピクセルの四角を細かい点々できれいに印刷するということです。, 後者の場合、1インチあたり300ピクセルの情報量があっても、印刷機の性能が72ドットしかないので、印刷の時点で情報が落ちます。72ドット分の情報しか再現されないということです。, より厳密にはスクリーン線数などの指標も印刷の高精細さに関わってきますが、大まかな考えとしてはこんなところです。, 上では印刷の場合の話でしたが、ディスプレイにおいては少しまた話が変わってきます。ここが混乱の元かもしれません。ディスプレイもまた細かい発光する点によって表示しています。その発行する1点を1ドットとすると、ディスプレイにおけるdpiを考えることができます。, 例えば、15インチ、フルHD(1920×1080)のディスプレイがあるとします。注意したいのが、ディスプレイの「インチ」はディスプレイの横の長さではなく、対角線の長さで測るので、そのまま使えません。対角線で15インチ、縦横比は1920×1080なので16:9なのでそれをピタゴラスの定理を使って解くと横幅は約13インチです。そこで、1920÷13を計算すると約147dpiが求まります。これをディスプレイの解像度として用いています。, また、ディスプレイの1ドットが1ピクセル分発光できるので、ディスプレイにおいてはdpi = ppi という図式が成り立ちます*。, Webの画像においてはppiやdpiは大した意味を持ちません。必要なのは横と縦が何ピクセルの大きさなのか、ということです。, Webではコンピュータに対して横○px、縦○pxの画像を表示してください、という指示になります。密度であるppiはここでは関係ないのです。, なので、横幅600pxで表示してください、という指示に対して横幅1000pxの画像も100pxの画像も同じ600pxで表示されます。前者の場合、600pxの枠にはオーバースペック*ですし、後者の場合は6倍に引き延ばされ、モザイク状の低解像度な画像で表示されます。, Webの解像度は72ppi、というのを目にしたり耳にしたりすることもあります(自分も以前はそうだと思っていました)が、あくまで目安にしかなりません。, そもそも72ppiというのは歴史的経緯によるものでAppleのディスプレイの解像度が72dpi (=72ppi)だったからです。ちなみにWindowsは96dpiの設計でした。, もちろん、先の通り最近のディスプレイ解像度は必ずしも72dpiではありません。ノートパソコンも100dpiくらいはありますが、32型フルHDのテレビだと69dpiくらいになります。それでもAdobe PhotoshopやIllustratorは(実際のディスプレイのdpiや表示サイズに関わらず)72ppiをディスプレイの解像度の基準として扱っているようです。, つまりどういうことかと言うと、配置した写真などの画像を変形させるとppiが変わります。これはピクセル数が同じならば、大きさが小さい方がピクセル密度は高くなります。逆に拡大した場合はppiが小さくなります。この時72ppiというのが、画像の持っているピクセル数と表示されるピクセル数が一致する、ということです。, より具体的には、横幅600pxの画像を600pxで配置している時ソフト上の解像度は72ppiと表示される、というわけです。同じ画像を300pxで配置したならば144ppi、1200pxで配置したならば36ppiになります。, ここで問題なのが、ソフトの表示が72ppi未満になった時です。上記の例で言うと情報量が600px分しかないのに1200pxで表示しようとすると2ドットで1ピクセル分を表示するので画像が粗くなります。, なので、Webにおいて大事なのはppiよりもピクセル数です。少なくとも、表示サイズ以上のピクセル数が必要になります。3000×4000px@300ppiも3000×4000px@72ppiもどちらも変わりありません。, またdpiがディスプレイにより違うので横幅600pxの画像が表示されるディスプレイ上での実際の長さも違います。, ここまでは一般的なディスプレイを前提としていました。しかしRetinaディスプレイを始めとした高精細なディスプレイになると話は少し変わってきます。, 先ほど、ディスプレイのdpi = ppiという式がありましたがこれが違います。例えば、iPhone7のディスプレイは横750pxでdpiは326にもなります。仮に1px = 1dpi だとするとフォントサイズ16pxの文字は実寸で約1.2mm程度になり、小さすぎて読めません。, そこで高精細ディスプレイでは1pxを2ドット×2ドットで表示しています。1px = 2dpi ということです。文字などのベクターデータ(数式によって表現する図形。ピクセルで表現しない)などは、通常の倍の解像度で表示するので線が非常に滑らかで綺麗に表示されます。これが高精細たる所以です。, iPhone7は横750pxですが、実際の表示サイズは半分の375px分の横幅です。どちらもピクセルですが、違いを明確にするために前者を「デバイスピクセル」と呼び、後者は「論理ピクセル」(WebにおいてはCSSピクセルとも)と呼び区別します。, では、ピクセルの集まりである画像はどうなるのでしょうか。もちろん、先述の通り、300pxの画像を300pxで表示させることには理論上問題はありません。ただ、ここでの表示300pxは論理ピクセル上の話で、iPhone7のような倍の解像度を持つ場合は600px分の表示能力があります。そのため、300pxの画像を300pxで表示しようとすると、解像度が足りてないような状態になります。(ただし、通常ディスプレイの時ほど粗くは見えません。), 画像は倍の大きさが必要になるため、デザインする時も倍の大きさでデザインこともあります。この時も大事なのはピクセル数がきちんと足りているか注意しましょう。, 余談にはなりますが、倍で作る際、奇数サイズで作ると実際の表示サイズにしようとした時に小数が発生してしまいます。すると論理ピクセルと微妙なずれが生じるので偶数で作った方が無難です。, Webにおける解像度を理解すれば適切な画像サイズを作ることできます。無駄に高画質だと読み込みの遅延に繋がりますし、変に低解像度だと汚く見えます。, 【単位超入門】ピクセル、ドット、PPI、DPI、解像度、メートル、インチ、ポイント, Nuxt × Contentful × Netlifyを使って無料でブログを構築した話. 解像度とは画像の密度、1インチ(2.54cm)あたりのピクセル数の事です。 dots per inchの略でdpiと表記されます。 印刷、webそれぞれの推奨解像度と理由を徹底解説!用途に見合った解像度を選びましょう。 GWに激辛グルメを食べに行くのが楽しみでそわそわしている黒い巨匠です。今回は画像解像度についてまとめてみました、印刷物でもwebでも解像度は大切!皆さんのヒントになれば嬉しいです!おまけでPhotoshopのちょっとした小技もご紹介します。, 解像度とは画像の密度、1インチ(2.54cm)あたりのピクセル数の事です。dots per inchの略でdpiと表記されます。72dpiの場合1インチあたり72ピクセル×72ピクセル=5184ピクセルであることになります。, 実は、画像はピクセルで構成された大きなドット絵です、解像度が高ければ高いほど1インチあたりのピクセル数が増える=密度が上がり画像の再現率が高くなります。, 印刷機にはスクリーン線数という単位があり、これはインクを敷き詰める密度を表しています。当然スクリーン線数の値が大きいほど印刷の再現率が高くなります。, スクリーン線数は印刷機によって変わり、一般的なものが150線で300線を超える高精細印刷機もあります。印刷機の解像度の再現率がスクリーン線数×2程度なので150線×2=300dpiが推奨解像度となります。推奨を超える解像度にしても印刷機の限界があるので仕上がりに変化は無いですが、推奨を下回ると画像がぼやけるなどイメージ通りに印刷されない原因となります。, 印刷機のスクリーン線数の扱いの違いは紙質や用途で変わり、例えば新聞の様な薄い紙に高いスクリーン線数で印刷したらインク量が多すぎて滲んだり紙が歪んでしまうので80線程度で印刷されます。推奨解像度も80線×2=160dpiとなります。, ディスプレイの解像度に依存するので画像解像度の意味がないからです。どんなに高い解像度の画像を用意してもディスプレイ依存で表示される為、変化がないので画像のピクセル数(サイズ)だけ意識しておけば十分。あ、実は72dpiという数字もおきまりというだけで96でも100でも50でもいいです。ちなみにこの決まりを絶対解像度といい、画像やディスプレイのサイズを示す時にも使われます。, また、webでディスプレイの解像度によって画像のサイズが変わってしまうのを回避する方法としてCSSピクセルなんてのがあります。詳しくはまさるんさんの記事をご一読下さい。, ちなみにカメラの謳い文句で「5000万画素!」というのを、ざっくり説明すると撮影した写真を5000万ピクセルで撮影できますよという事です。ピクセル数が多いほど表現量が上がるのでどんなに拡大してもドット化しない、細部まで鮮明な高精細で美しい写真が撮れます、しかし画像サイズも大きくなります。, 1920×1080のディスプレイの画素数が約207万ピクセルであるとお伝えすれば、5000万ピクセルの大きさがおわかりいただけますでしょうか?5000万画素で撮影した写真をPCで見るとき、当然ディスプレイに入りきらないので写真を縮小して表示することになりますが、前述のディスプレイ依存の絶対解像度があるので画素数の違いはわかりずらいです。, 画素数の強みは高精細印刷等、大きいサイズで出力した時に真価を発揮します。また、宇宙を撮影するカメラは8億画素とかあります、細かいところまで鮮明に保存できるので宇宙をくまなくチェックできますね。, ちなみに、カメラは画素数が多けりゃいいというわけではないのでご注意!カメラや画素数についてはカメラ男さんの記事が詳しいです。, めっちゃ小さくなってしまったああ!わあああああああ!なんて大丈夫、焦らないで…「再サンプル」のチェックを外してください。元のサイズを保ったまま画像解像度だけ変更できます。, 次はwebの画像を綺麗に印刷できるようにする!かな、やっぱり…しかしこれについては私自身記事を書けるほど試行したことがあるわけではなく、どこまで解像度の再生が可能か気になっているので調べてみたいです。, 自分の中で先送りしていた情報もまとめることができてスッキリ!いい連休が過ごせそうです!激辛担々麺ファイアー!, 最近フロントエンドやwebの勉強を始めた黒い服ばかり着ているデザイナー。