写真を大きくしたらぼやけたのに、花のマークはくっきり。同じ「画像」なのに、何が違うのでしょう。
写真などの画像データは、絵を小さな画素（ピクセル）に分け、画素ごとの色を数字で記録したものです。 花のマークのように、線や形を数字で記録する画像もあります。大きくしたときの違いは、この記録の中身の差から生まれます。
漫画でわかる画像データ｜写真を大きくするとぼやけるのはなぜ？
大きくしたら、どうして違う？ 全8ページ
イトはラボに飾る花のポスターを制作中。写真を拡大して困ったところから、ポスター完成、Web用の画像づくりまでの8ページです。
画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。
1 / 8同じ花なのに、拡大すると違う？
イトは花の写真と自分で描いた花のマークを使って、ラボに飾るポスターを作る。
1ページ目のセリフ
- イトは花の写真と自分で描いた花のマークを使って、ラボに飾るポスターを作る。
- イト「この写真と花のマークで、ポスターを作ろう！」
- イト「あれ？ 写真を大きくしたら、ぼやけた。」
- イト「こっちのマークは、くっきりしてる！」
- イト「同じ画像なのに、どうして？」
- ピコ「画像の中に、何を記録しているかが違うんだ。」
- 画面の比較。写真（ラスター画像）：たくさんの小さな点の色を記録している。花のマーク（ベクター画像）：線や図形の形を数値で記録している。
2 / 8写真は、色のついた画素の集まり
ピコとイトが写真の一部分を、画素の見える模式図で確かめる。
2ページ目のセリフ
- ピコとイトが写真の一部分を、画素の見える模式図で確かめる。
- イト「写真の中に、小さなマス？」
- ピコ「これがピクセル。画素とも呼ぶよ。」
- ピコ「場所ごとの色を並べて、一枚の絵を表すんだ。」
- ピコ「赤・緑・青の強さを数字で表す方法がRGB。」
- イト「色も数字なんだ！」
- ピコ「画素で表す画像を、ラスター画像と呼ぶよ。」
- イト「大きく見せても、写ってない細部は増えないんだね。」
- RGBの例。Rは255、Gは0、Bは0。赤い色を表示する。
3 / 8マークは、線と形を記録する
イトが描いた花のマークでは、曲線と色の指定を見て、大きさを変えてみる。
3ページ目のセリフ
- イトが描いた花のマークでは、曲線と色の指定を見て、大きさを変えてみる。
- イト「じゃあ、このマークの中は？」
- ピコ「線や曲線、色を記録しているよ。」
- ピコ「こうした線や形で表すのが、ベクター画像。」
- ピコ「大きさに合わせて、線や形を描き直せるんだ。」
- イト「だから、大きくしても輪郭がきれい！」
- イト「写真とマークで、持っている情報が違うんだね。」
4 / 8PNGやSVGは、保存の形式
保存形式を変えれば写真の細部も戻るのかと考えたイトが、画像の表し方と保存のルールを分ける。
4ページ目のセリフ
- 保存形式を変えれば写真の細部も戻るのかと考えたイトが、画像の表し方と保存のルールを分ける。
- イト「写真もSVGにすれば、くっきり？」
- ピコ「名前を変えるだけじゃ、細部は増えないよ。」
- ピコ「JPEGやPNGは、画素を保存する形式だよ。」
- イト「PNGも、ラスター画像なんだね。」
- ピコ「SVGは線や形を保存できる。中に入れた写真は、画素のままだよ。」
- イト「じゃあ、写真は元の大きなデータを探そう！」
- 元写真 DSC_1234.jpg は4000×6000 px。小さなコピー DSC_1234_small.jpg は640×960 px。物語上の数値例。
5 / 8写真とマークを選んで、ポスター完成
元の写真を使い、マークの大きさを調整して、イトがポスターを仕上げる。
5ページ目のセリフ
- 元の写真を使い、マークの大きさを調整して、イトがポスターを仕上げる。
- イト「元の写真なら、花びらの形も見える！」
- イト「マークはSVGで、大きさを調整しよう。」
- イト「同じ大きさでも、容量は違うんだ。」
- ピコ「容量は形式や圧縮でも変わるからね。」
- イト「写真は画素、マークは線と形。使い分ければいいんだ！」
- 同じサイズのJPEGとPNGの写真を比較する画面。ファイル容量を示す棒の長さが異なる。
6 / 8小さく見せれば、軽くなる？
ポスターを飾ったイトは、花の写真をラボのWebページでも見せたくなる。
6ページ目のセリフ
- ポスターを飾ったイトは、花の写真をラボのWebページでも見せたくなる。
- イト「この花、ラボのページにも載せたい！」
- イト「写真を小さく見せれば、軽くなるかな？」
- イト「あれ、容量は変わってない。」
- ピコ「変えたのは、画面で見せる大きさだけだよ。」
- イト「じゃあ、画像の保存を見直そう。」
- ピコ「ファイルの中身は、そのままなんだ。」
- 大きい表示と小さい表示が同じ画像ファイルにつながり、容量の棒は同じ長さ。続いて「コピーを保存」の画面を開く。
7 / 8軽くしすぎると、花びらが……
イトはJPEGの画質設定を下げて書き出し、容量と花びらの見え方を比べる。
7ページ目のセリフ
- イトはJPEGの画質設定を下げて書き出し、容量と花びらの見え方を比べる。
- イト「JPEGの画質、もっと下げたら？」
- イト「おっ、容量が小さくなった！」
- イト「でも、花びらがつぶれてる……。」
- イト「軽いだけじゃ、だめなんだね。」
- ピコ「JPEGは、画質を下げると細部が変わるんだ。」
- 画面の「コピーとして書き出す」で元のファイルを変えずにJPEGを保存。画質が高い花びらと低い花びらを、同じ大きさで比較する。
8 / 8元を残して、Web用を仕上げる
イトは元写真を残し、画素数と圧縮を調整したコピーを、実際に表示する大きさで見比べる。
8ページ目のセリフ
- イトは元写真を残し、画素数と圧縮を調整したコピーを、実際に表示する大きさで見比べる。
- イト「元の写真は残して、コピーで試そう。」
- ピコ「使う大きさに合わせて、画素数と圧縮を調整しよう。」
- イト「この大きさなら、花びらもきれい。容量も減った！」
- イト「飾る画像と、Webで見せる画像。使う場所に合わせればいいんだ！」
- 画面に「元の写真」と「Web用」の別フォルダ。「画素数」と「画質」を調整し、ファイル容量と見え方を比較する。
物語は創作です。漫画の画素や曲線の図は仕組みを示す模式図で、実際の画像処理をそのまま再現したものではありません。
ラスター画像とベクター画像の違い｜写真は画素、マークは線と形
ラスター画像は画素ごとの色で、ベクター画像は線や曲線、塗りの情報で絵を表します。 色が細かく変わる写真は画素、形がはっきりしたロゴやマークは線と形、と分けて考えると見分けやすくなります。
| 表し方 | 記録するもの | 大きくするとき |
|---|---|---|
| ラスター画像 | 画素の並びと、その色 | 元の画素をもとに大きく表示する。撮れていなかった細部は戻らない |
| ベクター画像 | 線・曲線の位置や形、塗りの色など | 表示する大きさに合わせて形を描き直すので、輪郭を滑らかに保てる |
「ラスター／ベクター」は絵の表し方の違いで、「PNG／JPEG／SVG」は保存する形式の名前です。PNGとJPEGはラスター画像の形式、SVGは線や形を記録できる形式。PNGで保存したマークは、見た目が単純でも画素でできています。
SVGの中へPNGやJPEGの写真を埋め込むこともできますが、その写真の部分は画素のままです。拡張子を変えても、画像の中身は変わりません。SVGでの画像の埋め込みについて（W3C）
画像データの仕組み｜写真は画素の位置と色の数字でできている
写真を小さな色のマスに分けると、一枚の絵は「どの位置に、どの色を置くか」の一覧になります。このマス一つが画素（ピクセル）です。第75話「画像データは何でできている？」では、ラボの写真カードを拡大して、この点の集まりを見に行きます。
横4個・縦4個の方眼紙なら、色を塗る場所は16マス。横8個・縦8個にすると64マスです。横も縦も2倍にしただけで、マスの数は4倍になります。マスが増えるほど細かな形を表せますが、記録する数字も同じだけ増えます。
色も数字にすれば、コンピューターは画像を「位置と色の数字の並び」として扱えます。文字や音をデータで表すときと同じ考え方です。
ユイ
写真を拡大すると、小さな四角が見えてきますね
イト
じゃあ、マスをもっと増やせば、ぼやけた写真も戻る？
ピコ
増やせるのは枠だけ。撮れていなかった色は、どこにも記録されていないんだ
RGBとは？画素の色を赤・緑・青の数字で表す
画面の色は、赤・緑・青の光の強さを組み合わせて作ります。この三色を英語で言ったときの頭文字が、RGBです。赤だけを強くすれば赤に近い色、赤と緑を混ぜると黄色に近い色。絵の具と違い、光は重ねるほど明るくなります。
画素一つの色は、赤・緑・青それぞれの強さの数字で決まります。たとえば各成分を8ビットで表すなら、一つの画素の色は24ビット＝3バイト。64画素なら、色の部分だけで192バイトです。※透明度・管理情報・圧縮を含めない計算例で、実際のファイルの容量とは別の数字です。
RGBは色の表し方なので、ラスター画像だけでなく、ベクター画像の線や塗りの色にも使えます。
マコト
位置も色も全部数字なら、写真が重いのは、その数字が多いからなんだね
ユイ
ということは、画素の数が同じ写真なら、容量も同じになりますか？
画素数が多いと容量も大きい？解像度とファイルサイズを分ける
画素数と容量は別の数字です。画素数が増えれば容量も増えやすく、画素数が同じでも形式と圧縮で容量は変わります。 「解像度」という言葉は、写真や画面の話では横×縦の画素数を、印刷などでは一定の長さに並ぶ点の密度を指します。
同じ写真でも、横4000ピクセルと横800ピクセルでは持っている点の数が違い、4000のほうが細部まで表せるかわりに、データの量も増えます。
先ほどの計算をあてはめると、1200×800（96万画素）の写真は、色の数字だけで1画素3バイト×96万画素＝288万バイト、およそ3MBです。手元のJPEG写真がそれより小さければ、その差を作っているのが圧縮です。
| 比べる条件 | 何が変わる？ |
|---|---|
| 同じ条件で、横と縦の画素数を増やす | 記録する点が増え、細部を表す場所が増える。データの量も増えやすい |
| 画素数を変えずに、圧縮や画質設定を変える | ファイルの容量が変わる。方式によっては細部も変わる |
| ファイルはそのままで、画面上の表示だけ小さくする | 見える大きさが変わるだけで、元ファイルの容量は減らない |
JPEGとPNGで画像の容量が違うのはなぜ？圧縮と形式の違い
画像形式は、画素と色の数字をどんなルールで保存するかの決まりです。圧縮は、その数字をもっと少ない量で書き直して容量を減らす工夫で、形式ごとにやり方が違います。
- JPEG：写真向き。容量を小さくしやすい代わりに、画質設定を下げるほど細かな部分が変わります。漫画で花びらがつぶれたのは、この設定を下げすぎたからです。
- PNG：画素の情報をそのまま保つ圧縮で、透明な部分も扱えます。文字の入った図やロゴに向きます。
- WebP・AVIF：Webで画像を軽く表示するための形式です。
もし写真ならJPEG、文字の入った図やロゴ、透明な部分が要る画像ならPNG。迷ったら元の画像は残したまま、コピーを書き出して、使う大きさで見比べます。画像がぼやける、色が少し変わる、透明な部分が消える、容量が大きくて送れない。どれも、形式・圧縮の設定・表示サイズのどれが原因かを分けると、直す場所が絞れます。
手元の写真で画像データを確かめる｜画素数・容量・形式の3つ
写真を一枚選び、ファイルや写真アプリの情報画面を開きます。見るだけなので、写真は変わりません。見る項目は三つです。
- 横×縦のピクセル数。1200×800なら、横1200個・縦800個で96万画素です。
- KB・MBなどのファイルサイズ。保存したり送ったりするときのデータの量です。
- JPEG・PNGなどの形式。画素と色の数字を、どのルールで記録したかです。
三つを見たら、「大きい写真」と言うときに、画素数のことかMBのことかを言い添えてみてください。画面に映すときは、ブラウザやアプリが形式のルールに沿って数字を読み、画素と色を並べ直しています。保存のルールの話はファイル形式とは、静止画が時間とともに変わる仕組みは動画データの仕組みへ続きます。
画像データの仕組みを自分の言葉で言ってみる
写真などのラスター画像は、絵を小さな＿＿＿＿＿＿に分け、画素ごとの色を＿＿＿＿＿＿として記録したデータです。
画素数が多いほど細かく表せる一方で、＿＿＿＿＿＿も増えやすくなります。
ファイルサイズは画素数だけでなく、＿＿＿＿＿＿でも変わります。
答えの例：
- 絵を小さな画素（ピクセル）に分け、画素ごとの色を数字として記録したデータです。
- 画素数が多いほど細かく表せる一方で、データの量（容量や通信量）も増えやすくなります。
- ファイルサイズは画素数だけでなく、形式と圧縮の設定でも変わります。
画像データでよくある質問｜画素と容量の疑問
Q1. 拡張子を.jpgから.pngに変えたら、画質はよくなりますか？
変わりません。拡張子は名前の最後に付く目印で、中の画素と色の数字はそのままです。
Q2. メッセージアプリで送った写真が、元より粗く見えるのはなぜですか？
送るときにサービスが画像を自動で縮小したり、別の形式に変換したりするためです。手元の元の写真は変わっていません。画質を保って渡したいときは、アプリの送信設定に画質や縮小の選択がないかを見ます。
Q3. 文字の入った図やスクリーンショットは、JPEGとPNGのどちらで保存しますか？
PNGが向いています。画素の情報をそのまま保つので、細い線や文字の形が変わりません。写真は色の変化がなだらかなので、JPEGで容量を抑えるのが一般的です。
写真はそのまま、マークは描き直す｜画像データの仕組みをひとことで
写真がぼやけたのは、撮れていた画素の数より大きく見せたから。マークがくっきりなのは、線と形をその大きさで描き直せるから。冒頭の違いをこう言えたら、画像データの中身はもう見えています。次にぼやけた写真に出会ったら、拡大を重ねる前に、撮ったときの元の写真を探してみてください。
この記事の情報・用語を確認する
読了目安 10分 ／ 更新日
TERM PRIMER
画像データの仕組み｜この記事で使った言葉
LAB WHITEBOARD
画像データの仕組みを一文で説明してみよう
「写真が画素と色の数字になる流れを説明し、画素数と容量、JPEG・PNGなどの保存形式を分けて考えられるようになる。」を、いまの自分の言葉で一文にしてみてください。途中の説明でも大丈夫です。
