ブログに使用する画像と解像度の話

1 解像度には2つの意味がある
ブログに使う画像についてのお話をしようと思います。

その際に、知っておかなければならない言葉があります。
「解像度」です。

この言葉は、聞いたことがないという人はいないと思いますが、
理解の程度は様々だと思います。

①プリンターや写真など印刷で使用する「解像度」
②PCやTVやスマホなどのモニターで使用する「解像度」

①と②の2種類の解像度という言葉が一般的に使われていますが、この2つの意味は全く異なりますので、こんがらからないように注意が必要です。

今回は、主に②のPCの解像度に関しての「ブログで使う画像」の話をしたいと思います。


2 印刷上の解像度の簡単な説明

一応、1で登場した①と②の解像度の違いが気になると思いますので、簡単に説明します。
①の解像度は、1インチ当たりの画素数の意味です。「dpi」の単位で表示されます。
②の解像度は、モニターの縦横の画素数の意味です。「pixel✕pixel」で表示されます。

※なお、1インチ・1inchは(正確に)25.4mm(=2.54cm)と決まっています。
画素数はピクセル・pixelともいいます。単なる点(ドット)ではなく、3色の色情報を持つ最小単位を1セットとして捉えた場合の点です。

※しかしながら、①の印刷関係で使用するdpi(dots per inch)の「d」は本来は単なる点のドットの意味ですが、現実にはピクセルの意味で使用されているので注意してください。本来ならppi(pixels per inch)とすべきですがdpiを使っていることが多いです。なお、dpiとppiの両方が同時に使われていたら、そのときは使い分けしていると理解してください。

※一般的には、カメラ関係では画素、それ以外ではピクセルを使う傾向があるようですが、画素=ピクセルで意味は同じです。

※印刷する場合は、解像度が大きい・高い方がきれいに印刷できます。
ただし、注意が必要なのは、画素数との関係です。
例:
正方形の画像で縦横ともに1000画素数、これを解像度100と解像度300で印刷した場合を比較
解像度100の印刷は、縦横とも、1000画素÷100画素/インチ=10インチ=25.4cm
解像度300の印刷は、縦横とも、1000画素÷300画素/インチ≒3.3インチ≒8.6cm

この2枚の印刷画像を比較すると、縦横とも3倍の差がなので、面積では9倍の差になります。

解像度が高いほどキレイだけど小さく印刷されるので、縦横の画素数が大きくないと目的の大きさで印刷出来ないことがあります。

1インチ当たりに表示される画素数が多ければなめらかになり、少なければ粗くなります。

人間の目には印刷物の300dpi以上の解像度は識別が困難なので、それ以上高くしても無駄です。

これをふまえて、ハガキサイズの写真(15cm✕10cm)を解像度300dpiで印刷するには、
1770画素✕1180画素(=200万画素)の画像があれば、目的の印刷ができることになります。

※ハガキサイズが3:2の比(一眼デジタルカメラと同じ)なので、同じ200万画素のカメラの写真でも、 アスペクト比が16:9(ハイビジョン系)とか4:3(コンパクトデジカメ)とか正方形(Instagramの標準)では、 ハガキに印刷されない部分ができるか、どこかの部分をカットするかになります。


※カメラの画素数は、通常は縦✕横の全体の画素数を意味しています。数値が大きいので通常は〇〇万画素の単位で表記されています。


3 画像と解像度
ここからは、ブログで使用する画像の話になりますので、印刷の話は忘れてください。
さて、私のパソコンに、すぐ下の方にある黄色い画像があります。

その画像解像度の画面を、画像処理ソフトで見ると
ピクセル数:7.19M
 幅:1920pixel
 高さ:1440pixel
ドキュメントのサイズ:
 幅:677.33mm
 高さ:508mm
 解像度:72pixel/inch
と表示されました。
今回は、この数値の意味を徹底的に追求してみます。(どこまで追求できるか分かりませんが)

182a2b03477465d7076ab368c15587fe_m.jpg これが上のデータの写真です。
最高(低圧縮)100%の1.89MB(圧縮しない状態)の画像

さて、上の画像処理ソフトで表示された解像度などに関する数値は分かっているようで、実はよく分かっていないようなことがあります。


4 ピクセル数のすぐ右側の7.19Mは

3の画像処理ソフトで見た画面のピクセル数のすぐ横に7.19Mと書かれています。

ピクセルの総数をM(100万の意味)で表したもののようですが、どこから導き出されたのでしょうか。

単純に、1920✕1440pixelだと7.19Mにはなりません。
1920✕1440=2,764,800pixelになります。(2.76M)

1pixelは3色の色の情報を持ち、
1色につき8bit(0~255)=1byteを色情報として使っています。
1pixelは、赤・緑・青の3色で構成されているので、合計3byte/pixel使っています。


つまり、
(1920✕1440)pixel✕3byte/pixel = 8,294,400byteとなります。(8.29M)
かなり7.19Mに近くなりましたが、でもまだ微妙に異なっていますね。

ところで、
1K = 1000、1M = 1000Kと考えがちですが、2進法においては正確には違います。
1K = 1024、1M = 1024K(1G = 1024M、1T = 1024G)です。
この端数が煩わしいので、一般的には省略しているだけです。

※国際単位系(SI)の接頭辞単位では(10進法の103の)「k」は小文字(km、kgなど)を使うことが決められていますが、SI接頭辞単位ではない2進法の210は「K」に大文字を使う慣わしのようです。


したがって、2進法の8,294,400をMに換算すると、
8,294,400 / (1024/K) / (1024K/M) = 7.19Mとなりましたね。
やっと、7.19Mの数値だ出てきました。

この7.19Mが、3の最初に登場したピクセル数のすぐ横に7.19Mと書かれていた数値だったんです。

この画像は、7.19Mの色情報を持っているとの意味になります。
この数値は、画像のファイル容量ではないので、注意が必要です。

実際には、JPEG画像で保存するときには、圧縮して保存しているので容量は小さくなります。
どのくらい小さくなるかは、カメラや画像処理ソフトなどの設定で異なります。



5 ピクセル数の幅と高さ
さて、3のピクセル数のすぐ横に7.19Mと書かれていた数値の続きの話です。
画像処理ソフトで見た画面のピクセル数:のすぐ下に
 幅:1920pixel
 高さ:1440pixel
の数値が表示されていますが、この数値は?

これは、デジカメが設定した画像の横・縦のピクセル数です。
幅は、1920pixelの色を表現できる点が横に並んでいる、高さは、1440pixelの色を表現できる点が縦に並んでいることを意味しています。

これは、パソコンのモニターやテレビの解像度に相当し、
この数値は、画像をモニターに表示する際に重要な数値です。

この2つの数値がパソコンなどのモニターに表示する画像の大きさを表しています。
実は、この2つの数値がパソコンモニターなどでいう解像度と同じものなのです。

ここには、解像度の数値は必要ありません。なぜなら印刷時には重要な解像度は、パソコンモニターに表示する画像の大きさには関係ないのです。

また、画像の保存容量が表示されていませんが、どのように圧縮して保存してその容量がどの程度は、パソコンモニターに表示する画像の大きさには関係ないのです。


6 印刷時のサイズ

3の画像処理ソフトで見た画面の下半分の
ドキュメントのサイズ:
 幅:677.33mm
 高さ:508mm
 解像度:72pixel/inch
ですが
この数値は、印刷した際の大きさを表しています。
したがって、ブログに使う画像の大きさには無関係の部分です。


7 Web画像の適正サイズとは
さて、以上見てきたとおり、3で表示された各種の数値のうち、ブログの画像として関係のある数値は、

 幅:1920pixel
 高さ:1440pixel
の2つの数値だということが分かりました。


ウェブリブログでは、画像設定の初期値は次のようになっています。

サムネイルサイズ:640px(最大1024pxまで)
※「150~300pxぐらいが目安です。」とのヘルプ内容が表示されます。

アップロード時リサイズ:1920px(変更可)
※「ここで指定した値よりも大きな画像のファイルはリサイズ時にこの値まで縮小し、アップロードされます。」とのヘルプ内容が表示されます。


※「アップロード時リサイズ:1920px」は、縦向きの写真・横向きの写真かを区別していませんが、長い方のピクセル数を指していると考えられます。

さてここで、ブログに掲載された画像を見る上で重要なのが、パソコンやスマホのモニターの解像度です。
上でお話したように、モニターの解像度とは、モニターの縦横のピクセル数のことです。
※以下は、PCモニター(ディスプレイ)を前提にした話です。


画像を表示する側のモニター画面の解像度は固定されていて、自由に変えることは出来ません。
ハードのモニターにびっしり敷き詰められた解像度(縦横のピクセル数)は、作られた時点で固定され決まっているので、それはどのようにしても変更することが出来ないということですね。
2018年の世界のPCモニターの解像度の利用率のデータです。
1位 27% 1366✕768px  ※私が使用しているPCモニターです
2位 19% 1920✕1080px (1~2位で46%を占める)
3位 7% 1400✕900px (1~3位で53%を占める)
4位 5% 1600✕900px (1~4位で58%を占める)
5位~10位はそれぞれ5~3%です。

※なお、例えば「1366✕768px」モニターの実サイズが何センチかは、1ピクセルのサイズによります。大きければ大きなモニター画面になり、逆に小さければ小さい画面になります。画面の大きさが変わっても解像度は同じです。
つまり、モニターの大きさだけを見ても解像度が高いか低いかは判断できないということです。
2018年の日本のPCモニターの解像度の利用率のデータです。
1位 26% 1920✕1080px
2位 15% 1366✕768px (1~2位で41%を占める)
3位 8% 2560✕1440px (1~3位で49%を占める)
4位 6% 1440✕900px (1~4位で55%を占める)
5位~10位はそれぞれ5~3%です。


初期値の「アップロード時リサイズ:1920px」は、世界や日本で使用されているモニターの上位と比較すると十分すぎる値だと思います。
特別な目的がない限りは、この初期値を更に大きく変更する必要はないと思います。

そして、ネット上の画像をダウンロードするとその画像の解像度は72dpiか96dpiになっていると思います。しかし、この数値はPC画面表示には関係のないものです。


8 3の写真を圧縮して保存すると
3の写真の容量は、プロパティで確認すると、1.89MBです。 これを100%として、最高(低圧縮)と位置付て、順次圧縮度合いを大きくして保存してみます。
最高(低圧縮)100%だと、1.89MB(圧縮しない状態)
最高(低圧縮)11だと、1.22MB
最高(低圧縮)10だと、838KB
高 9だと、590KB
高 8だと、456KB
中 7だと、345KB
中 6だと、302KB
中 5だと、228KB
(低圧縮)低 4だと、198KB
(低圧縮)低 3だと、164KB
(低圧縮)低 2だと、147KB
(低圧縮)低 1だと、104KB
(低圧縮)低 0だと、91KB
となりました。
なお、圧縮率を高めても、解像度の1920✕1440pixelに変化はありません。
つまり、モニターには同じ大きさで表示されます。
私のブログの「アップロード時リサイズ」は初期設定の1920pxなので、ちょうどこのサイズをクリアしてアップロードされていることになっています。
ただし、実際にブログ上に表示されるときは、ブログのデザインの幅に合うように縮小して表示されているはずです。
この縮小されている画像を、全画面で見る場合は、画像をクリックすると大きいサイズで見れるはずですが、どのくらいの大きさで見れるかは、モニターの解像度の環境によって異なると思います。


また、圧縮度が中ぐらいまではかなり容量の減少効果がありますが、それ以上圧縮しても容量の減少効果が少なく画質も低下するので、中程度までに抑えたほうが良さそうに思います。
以下に、「中6の302KBに圧縮した画像を掲載しますが、3の写真「最高(低圧縮)100%の1.89MB(圧縮しない状態)との違いは分かるでしょうか?
182a2b03477465d7076ab368c15587fe_m_6.jpg 中6の302KBに圧縮した画像


私がよく使う画像処理ソフトには、上記の一般的な保存方法(ここでJPEG以外にもいろいろな形式を選択できる)の他に、
Web専用の保存方法があり、私自身どのように変化するのか知らなかったので、試しに同じ画像をWeb用で圧縮率を変化させて保存してみます。
最高画質 100%だと、2.21MB
高画質 90%だと、1.42MB
高画質 80%だと、945KB
やや高画質 70%だと、678KB
やや高画質 60%だと、508KB
中画質 50%だと、337KB
中画質 40%だと、256KB
中画質 30%だと、203KB
低画質 20%だと、164KB
低画質 10%だと、125KB
でした。

この場合もWeb用に圧縮割合を変えても、やはり解像度の1920✕1440pixelに変化はありません。

以下に、「中画質50%の337KBに圧縮した画像を掲載しますが、3の写真「最高(低圧縮)100%の1.89MB(圧縮しない状態)との違いは分かるでしょうか?
182a2b03477465d7076ab368c15587fe_m_w50.jpg 中画質50%の337KBに圧縮した画像


9 まとめと普段使いのカメラ
以上のことから、1.89MBの画像を圧縮して「中6の302KB」や「中画質50%の337KB」ぐらいまでならブログ上で見る限りは、支障はないといえると思います。私には違いがまったく分かりませんでした。

さらに、圧縮しても支障はないと思いますが、それ以上圧縮しても容量の減少効果が少なかったので、今回はこの程度に留めておきます。 なお、最初の1.89MBの画像もJGEGなので圧縮された状態です。生のサイズは少なくても8MB以上はあったと推測されます。

※ちなみに、私の一眼デジカメで全く圧縮しない(RAW形式)で保存すると、1枚の写真が20.2MBですが、Lラージファイン(JPEG形式)では5.0MB、Lラージノーマルだと2.5MBになります。いずれも画素数は1510万画素(4752✕3168px)で、保存容量だけが変わります。
ブログではこんなに大きなサイズは不要なので、Mミドルファイン・ノーマルを飛ばして、Sスモールファイン1.7MBかSスモールノーマル0.9MB、いずれも画素数370万画素(2352✕1568px)で撮影しています。これ以上小さいサイズがないので、画像処理ソフトでさらに小さいサイズにします。これが面倒なのであまり使いません。

※コンパクトデジカメも、一眼より小さめの最大1000万画素(3648✕2736px)ですが、やはり一眼同様に面倒くさいのでめったに使いません。
このカメラは、小さなものを1cmまで接近して撮る際には役に立ちます。

※一番手っ取り早いのは、スマホで、1200万画素(4032✕3024px)あり、撮った瞬間にPCに連動していますので、すぐにブログに使うことが出来ます。
また、加工アプリを入れてあるので、非常に暗く写った使い物にならないほどの画像でも明るく出来ますし、トリミング、色々なフィルムで撮った感じ、色々なカメラで撮った感じ、様々なシチュエーションなど豊富なフィルター処理ができるのでべんりです。

この記事へのコメント

  • winga

    おはようございます。
    すごーーーい!!
    プロですか?
    尊敬しかないです。
    しかもとってもわかりやすく説明されています。
    私は「お気に入り」に入れさせて頂いてます
    前回の私の質問にも丁寧に答えてくださって有難うございました
    でもなんだか。。。。
    なんとか更新も出来ているのでこのままで行ってみます。
    通常エディタになってます(-_-;)
    わけいさん、来てくださーーーい!が本音ですけど(泣)
    2019年08月18日 07:43
  • ゆの

    わけい様
    おはようございます♪
    解像度、ピクセル、dpi と全部苦手なキーワードです~(ノД`)・゜・。
    サイズもインチじゃイメージがわかず
    表示ができるものはセンチを使っています
    わけい様のこの記事
    何度かじっくり読んで少しでも理解しようと思います
    2019年08月18日 08:14
  • 小枝


    こんにちは。

    リニューアル後、多くの方々がブログの変貌に困惑するという事態になりなってしまいました。

    わけいさんの情報集約力のすばらしさをいつも敬服しております。私も参考にさせていただきます。
    2019年08月18日 11:08
  • 偽ストラト

    なるほど、参考になりました!(^^)!
    2019年08月18日 12:38
  • ポジティブオーラ

    いつも丁寧な解説、説明有難うございます!
    感謝しています。
    2019年08月18日 12:40
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    お褒めの言葉をいただき恐縮です、ありがとうございます。
    さて、wingaさんの名前にはリンクが付いていないので、私の方で付けさせていただきました。(wingaさんのコメントの最初の部分を見てください、リンクが付いてますよね。)
    方法は、コメントする際に開く画面の「ホームページアドレス」にwingaさんのブログのurlアドレスを入力するだけです。
    わざとリンクがつかないようにしているなら別ですが、そうでなければ、他の方にもコメントする際はそのようにされたほうが良いと思います。1度、wingaさんのブログのトップページの上欄に表示されているurlのアドレスをコピーして、「ホームページアドレス」欄に貼り付けをすると自動的に記憶されるので、2度目からは、「ホームページアドレス」欄をクリックするだけで自動的にwingaさんのurlが表示され、それを選択するだけでOKです。
    いま、wingaさんのブログ見てきましたが、同様にwingaさんの返信コメントにもリンクが付いていません。上に書いた方法で、是非試してください。(前にも、同じようなこと書いた気がしますが)
    なお、wingaさんのurlは「https://8022.at.webry.info/」ですので、この部分をコピーしてもOKです。くれぐれも「 」の中の部分だけですよ。
    2019年08月18日 14:32
  • わけい

    ゆのさんへ
    コメントどうもありがとうございます。
    解像度、ピクセル、dpiなど苦手ですよね。
    私も苦手です。なので、自分が理解するようにここにまとめて見たわけです。
    ジーパンを買うときに日本製なのにインチで表示されているのがありますが、いやですね。
    テレビの大きさは、堂々とインチで表示されてますね。
    世界共通の単位の推進は歴史的にフランス主導で進められてきたので、アメリカはそれが嫌なようですね。
    2019年08月18日 14:49
  • わけい

    小枝さんへ
    コメントどうもありがとうございます。
    まるで、夏のような暑さが続いています。
    そのせいか、まるで夏のように朝から昼間はもちろん夜中もエアコンのお世話になっています。
    まるで、な つ ・・・あっ、今は夏ですか?
    夏なら、当たり前ですね。
    すると、最初の文は、「夏らしい爽やかな暑さが続いておりますので、お陰様でエアコンの点検が念入りに出来てありがたい毎日を過ごしております。」のように訂正させていただきます。
    ところで小枝さん、やっとブログの試運転がありましたね。
    徐々に馴らして、従来のような運転の再開を待ち望んでおりますので、無理のない範囲でお願いします。
    2019年08月18日 15:10
  • わけい

    偽ストラトさんへ
    コメントどうもありがとうございます。
    参考になれば、ありがたいです。
    2019年08月18日 15:12
  • わけい

    ポジティブオーラさんへ
    コメントどうもありがとうございます。
    文章が長いので、読むのも疲れると思いますが、参考になればありがたいです。
    数回に分けようかと考えましたが、密接な関係があり、最終的には自分で読むためには1つの方がいいかと判断しました。
    2019年08月18日 15:17
  • tor

    こんばんは。
    さすがわけい様ですね。
    私があまり意識することのなかった事を
    分かりやすく解説されていますね。

    ウェブリブログではサムネイルサイズや
    アップロード時について
    深く考えたことがありませんでした。

    FC2へ移ったらウエブリブログ時代に問題なく
    アップロードされていた画像が大きすぎますと拒否され
    今は画像のサイズを変更するソフトで縮小してから
    アップロードしています。
    サムネイルサイズはその都度設定できます。
    基本私の好みのサイズで固定していますが…

    感覚的には分かっているつもりでしたが
    なるほどと理解できました。
    ありがとうございました。
    2019年08月18日 20:00
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    私自身、画像に関して色々なノートにメモっていましたが、メモっただけで理解はしていませんでした。
    あまりにもあちこちにノートのメモが散見していたので、整理してアップしました。
    印刷のことを考えなければ(印刷でいう)解像度は関係がないとか、保存容量(ファイルサイズ)が小さくても、ネット上に表示する画像のサイズには関係がなく無視しても問題がない、ということなどが分かりました。
    重要なのは画像サイズの縦横のピクセル数(=解像度)だけなのですね。
    でも、解像度を変えずにどうやって保存容量を小さくしているのかということも触れたかったのですが、その圧縮技術のことに関しては、非常に専門的で、非常に複雑な過程を何段階も経て圧縮と復元を実現しているようです。
    興味と関心のある部分なのですが、今回は手に負えなかったので、宿題にしておきます。
    ありがとうございました。
    2019年08月19日 11:59
  • yasu

    わけいさん、お早うございます。

    眼には見ている数字ですが、あまり考えたことはないので凄すぎます。
    ブログを始めたころは、圧縮しないまま載せていましたが、重くて動きが鈍くなるのを知りました。
    今は縮小して写真を保存するようにしてますが。
    プリントすると大きさが多少違うのが分かります。
    その程度しか認識できなかったですね。
    難しいけど、分かりやすい説明でした。
    ありがとうございます。
    2019年08月23日 10:18
  • わけい

    yasuさんへ
    コメントどうもありがとうございます。
    プリントする場合とWeb上で使う場合は、画像を別物として考えたほうがいいのかも知れませんね。
    スマホやPC上で見る画像もWeb上と同じ分類ですが、プリンタやL版やさらには写真展に出品するような方はWebの話は忘れて切り替えて考えないとならないようですね。
    少しでも参考になる所があれば嬉しいです。
    2019年08月23日 19:51