ピクセルと画像

小学校コンピューターサイエンス1ピクセルあたり1~3ビットで、固定幅のランレングスデータ数を明示したインデックスカラーのラスター画像

ピクセルスタジオ

すべてのマスは数値です

インクの色を選び、グリッド上を塗ってください。キーボードを使う場合は、セルにフォーカスしてEnterキーを押します。

左から右へ、次に上から下へ読み取ります。ランレングス符号化では、各ランを色のインデックスと固定幅の長さで保存します。

測定ノート

設定を変更し、予測をテストして、結果を保存します。スナップショットは最大12件まで保存されます。

この実験について

最小単位の正方形がパレットインデックスとして保存される画像を描きましょう。解像度と色深度を変更し、バイナリーコードを確認して、非圧縮データのサイズと単純なランレングス表現を比較できます。ピクセルグリッドをそのままPNGとして書き出し、画像情報と実際のファイル形式の違いを見てみましょう。

学習目標

  • 画像のピクセルを数値のパレットインデックスに対応させます。
  • 画像の寸法と1ピクセルあたりのビット数から、生データの容量を計算します。
  • ランレングス符号化で圧縮しやすい配列を試します。

使い方

  1. 18×8の画像を描き、ピクセル内に表示されたパレットのバイナリーコードを読み取ります。
  2. 21ピクセルあたりのビット数を3から1に変更します。使用できる色と生データの容量を比較しましょう。
  3. 3縦縞のある画像と何も描かれていない画像を比較してください。寸法と色深度は変更せず、ラン数について説明してください。
  4. 4元に戻すを使って編集内容を比較し、測定したペイロード数を記録してPNGを書き出してください。

モデル

インデックス付きピクセルの未圧縮ビット数
固定幅のランレングスペイロード

前提条件

  • ピクセルは各行を左から右へ、次に上から下へ読み取ります。各ピクセルには、選択した固定ビット数を使用します。
  • RLEモデルでは、各ランを色インデックスと長さで格納し、それぞれに ceil(log2(ピクセル数 + 1)) ビットを使用します。ランは行の境界をまたぐことがあります。
  • パレットテーブル、寸法、ファイルヘッダー、パディングはペイロード数に含まれません。PNGは異なる圧縮方式を使うため、ダウンロードしたファイルサイズがこれらの数と一致するとは限りません。

授業で試してみましょう

  1. Q1同じ寸法の画像でも、RLEペイロードの大きさが異なることがあるのはなぜですか?
  2. Q2幅と高さを両方2倍にすると、未圧縮データの容量が4倍になるのはなぜですか?

よくある質問

RLEを使えば、画像は必ず小さくなりますか?

いいえ。色が頻繁に変わるとランの数が増え、未圧縮のラスターより多くのビットを使うことがあります。

PNGファイルのサイズが表示されたペイロードより大きい、または小さいのはなぜですか?

ファイルにはヘッダーが含まれ、PNG圧縮が使われています。一方、この実験では意図的に単純化したピクセルまたはRLEのペイロードを数えています。