解像度、ピクセルって何？
スマートフォンのカメラ機能も向上し、１０００万画素～２０００万画素の高解像度の写真を簡単にしかも気軽に撮ることができます。
そして、多くの人が、スマホで撮った高解像度の写真（画像）をインスタグラムやFacebookなどにアップし、楽しんでいるでしょう。
ちなみにスマホ・ディスプレイの解像度、カメラの画素数、撮った写真画像の解像度、Facebookにアップできる画像の解像度などの関係ってわかります？
解像度 20×20px の画像解像度イメージ
画像の基本的なことがわかるとデジカメやスマホで撮る写真も、より綺麗に撮れるかも。
さらに画像編集も気軽にでき、インスタグラムやFacebookへ最適な画質で投稿できもっと楽しくなるかもしれません！
画像に関する基礎・基本
まず、画像の基礎・基本について説明します。
画素とピクセル
画素とは、デジタル画像を構成する色情報の最小単位の点です。
画素のことをピクセル（px:Pixel）とも言います。
画像は、点、すなわち画素の集まりであり、この数が画素数です。
例えばスマホのカメラ機能として２３００万画素だったら、２３００万個の色情報を持つ写真を撮ることができると言えます。でも２３００万個の色情報ってどのくらい？きれいなの？となってしまうかも。
解像度とは
解像度とは、スマホおよびパソコンのディスプレイや画像の精細さ・きめ細かさを表す尺度です。
ディスプレイや画像は、画素で構成されており四角形です。そのサイズを横の数と縦の数で表し、その積が画素数です。一般的にこの画素数が大きい程、高精細と言われます。
例えばスマホに２３００万画素のカメラ機能付きとした時、
そのカメラで撮れる画像の解像度は、横：約５５００ﾋﾟｸｾﾙ × 縦：約４２００ﾋﾟｸｾﾙ ＝ 約２３００万画素です。
画素と解像度のイメージ
画素と解像度のイメージを文字「Ａ」で表します。
＜画素のイメージサンプル＞
20×20ﾋﾟｸｾﾙの白紙画像に「Ａ」を入力し表示しています。
一見、きれいな文字「Ａ」に見えています。
白紙画像（20×20ﾋﾟｸｾﾙ）が見易いように背景を水色にしています。
２５倍に拡大表示
25倍に拡大表示するとギザギザが見えます。
このギザギザ（四角形）の一つ一つが、画素、すなわち文字「Ａ」を構成する点です。
このサンプルは、解像度20×20px = 400画素の画像です。
この解像度の上げる（数値を大きくする）と、より鮮明な文字に見え、拡大表示しても滑らかな文字に見えるでしょう。
ＪＰＥＧとは
ＪＰＥＧとは、画像データを保存するフォーマットの一つであり、圧縮するための方式・規格です。
この方式で保存された画像データをＪＰＥＧファイルなどと呼ばれています。
このＪＰＥＧのメリットは、圧縮により画像データのファイル容量を小さくでき、
さらに圧縮度合いが指定できファイル容量と画質をコントロールできることです。
デメリットとして非可逆圧縮を用いているため画像編集を繰り返す（保存）と少しづつ画質低下になってしまうことです。
ＪＰＥＧ形式ファイルは、画像の使用目的に応じ圧縮度合いにより画質とファイル容量をコントロールできるため、デジカメやスマホの画像データ記録形式として多く使用されています。
画像編集の基本：解像度の違い
スマホで簡単・気軽に写真を撮れます。それも１０００万画素～２０００万画素の高画素の写真です。
もちろんデジカメでもそれ以上の高画素の写真も撮れます。
さて、この高画素の写真画像とスマホやパソコンのディスプレイの解像度の違いはどの位あるのでしょう？
スマホとパソコンのディスプレイをサンプルとして違いを見ます。
＜スマートフォン Ｆ－０１Ｊの仕様＞
・ディスプレイサイズ 約5.5インチ
・ディスプレイ解像度 1080px × 1920px
・スマホカメラ 約2300万画素
・撮影画像解像度 5520px × 4140px（最大サイズの設定）
・画像記録形式 JPEG形式
＜パソコン用２３インチディスプレイの仕様＞
・ディスプレイ解像度 1920 × 1080px
＜2300万画素の写真画像とディスプレイの解像度の違い＞
上述の解像度（赤字）を見ると次の順に大きくなっています。
＜１位＞スマホ撮影画像解像度 5520px × 4140px ＝ 約2300万画素
＜２位＞スマホ・ディスプレイ解像度 1080px × 1920px ＝ 約200万画素
＜２位＞パソコン・ディスプレイ解像度 1920px × 1080px ＝ 約200万画素
すなわちスマホで撮った画像の解像度は、スマホやパソコンのディスプレイ解像度よりはるかに大きい事を意味しています。その解像度の比較イメージを下図に示します。
＜解像度の比較イメージ・サンプル＞
緑色部分：スマホ・カメラ撮影の画像
青色部分：スマホおよびパソコンのディスプレイ
赤色部分：Facebookの最大画像の幅
スマホで撮影したサイズの大きな画像を見る時には、スマホ本体（実際はアプリかな？）で画像サイズを縮小し見易くしています。逆に画像サイズが小さい時、そのままもしくはディスプレイ画面サイズに合わせ拡大表示するアプリ（？）があるかもしれません。そんな時、画像がぼやけて見えてしまうでしょう。
FacebookなどSNSでは、自動的に解像度が調整される（はずな）のであまり意識する必要はないのですが、最適な画質で掲載したいのであれば予め縮小などの画像編集加工をしておいた方が良いでしょう。
またSNS以外の一般的なサイト（Html作成）では、画像解像度の自動調整は無いので画像解像度を意識する必要があるでしょう。
画像の解像度とディスプレイの解像度
前述のとおりSNSなどであれば掲載画像の解像度は、自動的に調整されるため、あまり意識する必要はありませんが、一般的なサイト（HTML等使用）では、ディスプレイ解像度に合わせサイズ縮小などの画像編集加工が必要になります。
画像編集加工しない場合、表示の問題や画像容量大などの影響がでてしまいます。なおHTML記述等により縮小し表示はできるでしょうが、画像容量大の影響（転送量・転送時間）はあるはずです。
ＷＥＢ掲載の一般的な画像サイズ
ＷＥＢサイトの掲載画像の横幅サイズとしては100ﾋﾟｸｾﾙ～600ﾋﾟｸｾﾙが一般的です。
サンプルとして横幅600ﾋﾟｸｾﾙ、300ﾋﾟｸｾﾙ、100ﾋﾟｸｾﾙの画像を表示します。
パソコン用ディスプレイで見ると画像サイズとのイメージがわかると思います。
なお、スマホやタブレットで見ると縮小されて見えます。
■横幅600ﾋﾟｸｾﾙ
■横幅300ﾋﾟｸｾﾙ
■横幅100ﾋﾟｸｾﾙ
上記画像は、デジカメ撮影画像 4608ﾋﾟｸｾﾙ×3456ﾋﾟｸｾﾙの解像度を画像編集ソフトにより縮小加工し画像容量も小さくなっています。
一般的なサイトを作成・運営・管理する場合、画像の基本的な知識や、画像編集加工の知識が必要と思われます。特に画像編集加工では、画像サイズ縮小、切り抜き・トリミング操作は最低限必要でしょう。
ＪＰＥＧ形式ファイルについて
前述のとおりＪＰＥＧファイルのデメリットとして画像編集の保存を繰り返すと画質劣化の要因になります。保存の繰り返しを避けるかオリジナルファイルからの画像編集がお薦めです。
