ロゴをpngで書き出す際の画像解像度・書き出し方について

[ミラミラ]

初めまして。

とても基本的なことを質問させてください。申し訳ありません。

ホームページ用にと初めてロゴ制作をし、pngファイルで書き出しました。

ディスプレイ上で見るので書き出しは72ppiにしました。

それはディスプレイ上では72ppi以上にしても意味がないと調べた先にあったからです。

（ディスプレイは72ppi,印刷物は300ppiと認識しています。）

ところがいざ、ディスプレイ上で72ppiで書き出したロゴを確認してみると

滲んで見えました。

そこで次は「web用に保存」でPNG24でも書き出してみましたが同じ結果でした。

もしかして、と思い、今度は300ppiで書き出してみたところ、

くっきりときれいなロゴが書き出されました。

「ディスプレイでは72、印刷物は300」で

「ディスプレイ上で見るものは72ppi以上にしても意味がない」というふうに認識していたのですが実際、目で確認するとロゴは明らかに300ppiで書き出した方がくっきりできれいです。

ロゴをpngで書き出す際は、72ppi以上（150ppiでもきれいに書き出されました）で書き出すのが主流なのでしょうか。

調べたり、いろいろ書き出し方を変えたり様々なことを試してみましたが

悩んでおります。

お忙しいところ恐縮ですがご教示いただけますと幸いです。

・Illustrater2022

・MacBook Air 12.2.1

[bizarre_n]

昔はディスプレイはだいたい72ppi程度の解像度だったのですが、最近はそうとは限りません。

もっと高い解像度が表示できるディスプレイが増えています。

例えば、iPhoneの解像度だけでもこんな感じです。

https://www.apollomaniacs.com/ipod/ifamily_screensize.htm

また、ディスプレイも常に同じ解像度とは限らず、解像度を変更できるものが普通ですので、今自分が見ている解像度がどう設定されているのかによってピクセル密度は変わります。

ppiというのは、1インチの長さにどれだけのピクセルを詰め込むかという、ピクセルの密度の設定なので、自分が見ているディスプレイがどのくらいの細かさで見えているのか、そこにどのくらいの大きさで表示したいのかを把握しないと、書き出したピクセル数が必要かということがはっきり言えません。

どんなディスプレイをターゲットとしているのかを把握されることから始めてみてはいかがでしょうか。

[ミラミラ]

bizarre_n様

ご回答いただきありがとうございます。

iPhoneの解像度の参考サイトまでご紹介くださり大変勉強になりました。

「どんなディスプレイをターゲットとしているのか」は考えたことがなかったので

また調べてみようと思います。

お忙しいところ、ありがとうございました。

[kingtosh · Accepted solution]

72ppiはCRTモニタの時ので、液晶モニタが主流になってからはPC用でも96ppiからだったりしますね。

まず、これは解像度であって、実際のピクセル数じゃないです。

サイトで表示する際の実際の大きさとあってないと、ブラウザの方で拡大か縮小して表示することになります。

上記の解像度は、画像がこの実際の大きさの時に72ppiにするようにという意味です。

画像配置用の枠が、例えば100 ×100pxだったとして、その画像が72ppiで作られていても大きさが100 ×100pxに満たない場合は拡大表示されることになります。滲んだりガタガタになって見えたりすることでしょう。

あとどうしてもという場合はSVGファイルを使うことも検討された方がいいと思います。ベクトルデータなので、極端な縮小でもしない限りは綺麗に表示されます。

[ミラミラ]

kingtosh様

ご回答ありがとうございます。

ご丁寧なご説明とてもわかりやすいです。

実際の画面上で見たい大きさに合わせて作らないと滲んでしまう原因になる

というふうに理解しました。

SVGファイルでも書き出してみました。

きれいに表示されますね。

お忙しい中、ありがとうございました。

[assause]

ピクセル数の少ないものを拡大すれば、結果としてにじむことはあります。

また、ディスプレイ表示であれば、大事なのは書き出した画像のピクセル数です。

原寸でどのようなピクセル数で利用するかを考えながら作成しないと、作成自体が無駄になりかねない場合があります。

[ミラミラ]

assause様

ご回答ありがとうございます。

「原寸でどのようなピクセル数で利用するかを考えながら作成しないと」

→予めどのくらいの大きさで表示させるか。ここがまず大切だと認識しました。

次回は大きさを考えてから作成してみます。

お忙しいところ、ありがとうございました。