解説
画素（ピクセル）は、コンピューターの画面を構成する色情報の最小単位です。コンピューターの画面は、縦横に並んだ四角の画素の連続で構成されています。ピクセル（pixel）は、picturesの短縮形pixとelementのelの造語です。
また、似たような言葉に、ドットがあります。こちらは、画像の出力装置が表現できる最小単位です。出力装置側の単位なので、1つのピクセルを複数のドットで表現することも可能です。ただ、より精細に画面を表現するために、1ピクセルを1ドットで表現していることが多いです。
コンピューターの画面や、プリンタの精細さの単位は、dpi（ドット・パー・インチ）が使われることが多いです。このdpiは、1インチ（2.54cm）に、どれだけのドットが並んでいるかを表します。また、コンピューターの画面の場合は、ppi（ピクセル・パー・インチ）が用いられることもあります。このような値のことを解像度と呼びます。
Windowsパソコンの画面は、96dpi～192dpiぐらいが多いです。紙に印刷する場合は、カラーでは300dpi以上、白黒では600dpi以上なら、自然に見えると言われています。
サンプル
画素を操作するコードを、JavaScriptで簡単に書いてみます。
まだ説明していない概念が多数出てくるコードですが、imgDtの値を操作することで、画素の色を書き換えています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>「画素操作」のサンプル</title>
</head>
<body>
<canvas id="cnvs" width=256 height=256></canvas>
<script type="text/javascript">
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext("2d");
var img = ctx.getImageData(0, 0, cnvs.width, cnvs.height);
var w = img.width, h = img.height;
var imgDt = img.data;
// 色を設定
for (var y = 0; y < h; y ++) {
for (var x = 0; x < w; x ++) {
// 基本位置
var pos = (y * w + x) * 4;
// 順に赤色、緑色、青色を0～255で指定
imgDt[pos + 0] = Math.floor(255 / h * y);
imgDt[pos + 1] = Math.floor(255 / w * x);
imgDt[pos + 2] = Math.floor(255 / h * y);
// 透明の設定（255で表示～0で非表示）
imgDt[pos + 3] = 255;
}
}
ctx.putImageData(img, 0, 0);
</script>
<input type="button" value="To Image" onClick="
var imgUrl = cnvs.toDataURL();
window.open(imgUrl, '_blank');
">
</body>
</html>
出力結果
