デジタルデータは色々な加工が容易ですので，データを圧縮して容量を減らすこともよく行われます．通常，圧縮したデータを元にもどせば（解凍すれば）元のデータに戻せます．
画像データは文字データよりデータ量が多くなりますので，圧縮して保存する場合が多いです．たとえば，下記サンプル画像で示したBMP画像の大きさは，1024×768ピクセル（つまり横が1024個で縦が768個の点の集合）です．（このくらいの品質があればA4程度の大きさでもきれいに出力できます．）この絵は24ビットフルカラーなので，各ピクセルごとに24ビット（＝3バイト）必要です．したがって合計で1024×768×3バイト＝2359296バイト（＝2304KB＝2.25MB）の大きさになります.英数字1文字を記憶するのに1バイト必要なので，2.25MBは英数字236万文字（400字詰め原稿用紙3千枚）というすごい量になります．この例から，画像が文字よりデータ量が大きくなることがわかると思います．
アナログ電話でインターネットに接続するときのスピードは最大56Kbps，つまり1秒間に7KBしか転送できません．電話でこの画像をダウンロードしようと思ったらフルスピードでダウンロードできても330秒かかることになります．つまり画像が表示されるまでに6分も待たなければなりません．
つまり画像のようにデータ量が大きな物をWebで扱う場合は，全体の中で画像が占めるバランスと，ユーザがダウンロードするときの速度の両方を考慮する必要があります．
画像データを圧縮する場合非可逆圧縮という圧縮方法があります．この方法では，圧縮時に元データの情報の一部を失う代わりに圧縮率を高くすることができます．たとえばさきほどのBMP画像をJPEGで非可逆圧縮すると，600KB程度までファイルを小さくしても画面で見ている限り画質の劣化はわかりません．（これでもまだ電話回線でのダウンロードに90秒弱かかりますから，アナログ電話でダウンロードしているユーザには大きすぎます．次の課題で示すように，画像の大きさを小さくするとか圧縮率をさらに上げるとかの処置をする必要があります．）ただし非可逆圧縮したデータは元に戻すことができないことに注意してください．
今週の宿題その1は，「JPEGの圧縮率や絵の大きさがファイルサイズと画質に及ぼす影響を調べてHTMLでレポートを書く」です．
まずは圧縮率による違いを調べてみましょう．
~/compAディレクトリに置くこと．
cd compA [Enter]としてcompAディレクトリに移動しておく．
Netscapeを使って，以下に用意したサンプル画像のどれかひとつをダウンロードする．
（Netscapeの該当リンク上で右ボタンをクリックし，「リンクを名前を付けて保存．．．」を選ぶとダウンロードする場所を決めるダイアログボックスが開く．ダイアログボックス最下行「選択」のファイル名の前にディレクトリ名compA/を追加して/home/staff/nabe/compA/QSV_up.bmpのように指定してからダウンロードする．）
または，GIMPで好きな絵（ただし大きくてカラフルな絵）を作って，BMP形式で保存する．
gimp QSV_up.bmp & [Enter]）
xemacs compA2.html & [enter]）．スタイルシートを無理に使う必要はない．
ls -l [Enter]とすればわかる．（lsと-lの間にスペースが必要．これはlong形式（-l）でファイルのLiStを見る（ls）というコマンド．）サンプル画像
次に絵の大きさを変えて上記の作業を繰り返してみてください．
そして最終的に，「Webで表示するに適した絵の大きさと圧縮率（品質）」を検討してください．今回のサンプル画像は画質がかなりよいので，かなり圧縮しても画面では違いがわからないことがわかると思います．また，ある程度絵の大きさを小さくした方が見やすいこともわかると思います．今回の結果は次週スキャナーで絵をスキャンする時にも参考になると思います．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JPEG圧縮のレポート</title>
<!-- スタイルシートの使い方その１ -->
<link rel="stylesheet" type="text/css" \
href="http://www.twcu.ac.jp/~nabe/example.css">
<!-- スタイルシートの使い方その2 -->
<style type="text/css">
<!--
td {
color: blue;
}
-->
</style>
</head>
<body>
<h1>JPEG圧縮のレポート</h1>
<!--
コンピュータ中級Aの2002年6月3日の宿題
-->
<ul>
<li>日付； 2002年5月28日
<li>学生番号； XXXXXXXX
<li>名前； 渡辺隆行
</ul>
<p>GIMPでJPEG保存するときの品質（圧縮率）や絵のサイズを変えて、画質とファイルサイズの関係を調べた。</p>
<h2>JPEG保存時の品質（圧縮率）がファイルサイズと画質におよぼす影響</h2>
<table border="1" align="center">
<caption>表1 品質（圧縮率）による差</caption>
<tbody align="center">
<tr><th>品質</th><th>ファイルサイズ（Byte）</th><th>元データとのファイルサイズ比</th></tr>
<tr><th><a href="sample.jpeg">元データ</a></th><td>679000</td><td>--</td></tr>
<tr><th><a \
href="sample75.jpeg">75</a></th><td>446803</td><td>66%</td></tr>
<tr><th><a \
href="sample50.jpeg">50</a></th><td>237801</td><td>35%</td></tr>
<tr><th><a \
href="sample25.jpeg">25</a></th><td>131083</td><td>19%</td></tr>
<tr><th><a href="sample10.jpeg">10</a></th><td>60941</td><td>9%</td></tr>
</tbody>
</table>
<p>さすがに品質を10にするとブロックノイズが目立ってくるが、25までならそれほど画質の劣化が目立たない。
品質を25に落して保存するとファイルサイズは2割程度に減るので、Webで使うときにはこれでも構わないと思う。<br>
また、品質とファイルサイズの関係は単純ではないことが分かった。
</p>
<p>GIMPのJPEG保存では、スムーズさも指定できる。
これを0より大きくすれば圧縮率が高いときのギザギザ感をやわらげることができるので試してみる。</p>
<p>省略</p>
<h2>JPEGの絵の大きさがファイルサイズと画質におよぼす影響</h2>
<table border="1" align="center">
<caption>表2 キャンバスの大きさによる差</caption>
<tbody align="center">
<tr><th>キャンバスサイズ</th><th>ファイルサイズ（Byte）</th><th>元データとのファイルサイズ比</th></tr>
<tr><th><a href="sample.jpeg">元データ \
(2048x1536)</a></th><td>679000</td><td>--</td></tr>
<tr><th><a href="sample_half.jpeg">半分 \
(1024x768)</a></th><td>620263</td><td>91%</td></tr>
<tr><th><a href="sample_quater.jpeg">1/4 \
(512x384)</a></th><td>167988</td><td>25%</td></tr>
</tbody>
</table>
<p>キャンバスの1辺を半分にすればファイルサイズは4分の1になるはずなのに、
キャンバスのサイズとファイルサイズが比例していないことに驚いた。
一辺を4分の一にしても絵としては劣化していないが、絵のなかの文字は見にくくなった。
</p>
<h2>Web表示に適したファイル</h2>
<p>ここでは、Web表示にもっとも適した保存品質とキャンバスサイズの組合わせを考えてみる。
Webでは、ファイルサイズが小さくて画質が優れているのがよい。
またあまり画像が大きいと表示しにくい。</p>
<p>実際にいろいろな組合わせを試したので、主なものを表にまとめる。</p>
<p>省略；表や結論を書く</p>
<h1>備考</h1>
<p><a \
href="http://www.twcu.ac.jp/~nabe/example.css">「このWebページで使用したスタイルシート」</a>
を使わなくても良い。各自カスタマイズしても構わない。</p>
<hr>
<address><a href="mailto:nabe@twcu.ac.jp">Takayuki Watanabe</a></address>
<!-- Created: Tue May 28 18:08:46 JST 2002 -->
<!-- hhmts start -->
Last modified: Tue May 28 19:46:05 JST 2002
<!-- hhmts end -->
</body>
</html>
今回のレポートに使用しているHTMLの要素の例です．詳細は「利用の手引き」の付録を参照するか，渡辺まで質問してください．レポートの作成は，上記「レポートの例」のソースをまねすれば，表もできると思います．
時間があったら授業中に説明します.
<head> <link rel="stylesheet" type="text/css" href="example.css"> </head>
/* example.css written by T. Watanabe, 2002/05/28 */
body {
color: black ;
background: #FFFAFA;
}
h1 {
font-size:170%; /* 文字サイズ：170%囲み大見出し(１) */
color:navy; /* 文字色：青色 */
font-weight:bold; /* 文字太さ：太字 */
text-align:center; /* 中央揃え */
margin-left:2em; /* 左マージン（枠の外）*/
margin-right:2em; /* 右マージン（枠の外） */
margin-top: 1ex;
padding:4px; /* パディング（内容と枠の間）*/
background-color:white; /* 背景色：黒色 */
border-width:thin; /* 傍線太さ：細い */
border-style:solid; /* 傍線種類：枠を線 */
border-color:black /* 傍線色：黒色 */
}
p {
color:#000000; /* 文字色：黒 */
line-height:130%; /* 行間：130% */
font-weight:400; /* 文字太さ：普通 */
}
LI {
display: block
margin-top: 0.5em;
margin-bottom: 0.5em;
}
<head>
<style type="text/css">
<!--
body {
color: blue;
}
-->
</style>
</head>
「利用の手引き2002」の付録G「東女ホームページのガイドライン」にも書かれているが，Webで画像などを公開したり，スキャナでスキャンして利用する際は著作権や肖像権などの他人の権利に注意する必要がある．著作権を明らかに表示していない作品でも著作権は存在している．また著作物であっても引用することはできる．また私的利用や点字への複製などのケースでは著作権の制限は緩やかになる．
また，著作権がある作品はすべて自由に利用できないわけではありません．著作権があっても著者の意思によって自由に利用できる用に公開されている場合もあります．
基本は，「人の作品を自分勝手に利用してはいけない．作品には著作権という権利があるのだから，それを守る形で利用できる範囲で利用する．著作権が認めていない形で利用するのは泥棒と同じようなもの．」ということです．
以下，「利用の手引き2002」付録G.2.1.1「コピーと権利侵害」から引用します．
著作権などの知的所有権や肖像権を侵害すると思われるものを公開しない．市販の書籍・雑誌・絵葉書などから写真などをスキャナーで取り込んで，自分のWebページの一部として公開したり，文書を他人の著作から写して断らずにそのまま利用したり，他人の作ったWebページから一部無断でコピーして自分のページに公開したりした場合，著作権侵害となる可能性がある．また，他人のWebページ，CDあるいはVideoなどから取った音楽などの音声，映像も同様である．
許可なく他人の写真を公開すると肖像権を，タレントなどの有名人ならばパブリシティー権（肖像を経済的に利用する権利）を，侵害する可能性がある．
公表された著作物は引用することで利用できます．引用する際は，(1)自分で書いた内容がほとんど（主）でありその自作の内容のために他人の著作の一部を（従として）引用する，(2)引用であることがわかるように書く，(3)出典を明記する，(4)引用された内容を勝手に変えない，ように注意すること．