「ホームページ作成の部屋」メニュー 「技巧編」メニュー


　1． 画像のあるページを軽くするテクニック
　インターネットの通信速度は向上していますが，それでも日本の一般家庭においては半数以上が電話回線とモデムという遅い速度で接続しています。それに夜間，特にテレホーダイ・タイム（23時〜8時）が始まる頃は通信量が飛躍的に多くなるために，たとえ ADSL や CATV などの高速接続を使用していても，通信速度はいらいらさせられるほどに遅くなってしまいます。

　Webページを快適に閲覧するためには通信速度を上げるのもひとつの手ですが，視点を変えてWebページを軽くするというのも大切な手段です。しかも内容を減らさずに軽くできれば最も良いわけです。
　ここでは文書に比べてはるかに大きな通信量となってしまう画像のファイルサイズを小さくするこころみを紹介します。

(1)ファイルサイズのことを考えないで作ったページ
　名工大の風景−1は，ファイルサイズのことはあまり考えずに作ったページの例です。それでも画像は1024×768ピクセルあった元の大きさから640×480ピクセル (VGA) に縮小してあります。一般のページにそのまま載せる画像としては VGA でも少し大きすぎるくらいです。

　ファイルサイズは HTML ファイルが 1.7 kB，画像ファイル 4 つの合計が 303.6 kB ですので，合わせて 305.3 kB となっています。

(2)画像を圧縮する
　写真などの画像は JPEG 形式のファイルで保存するのが普通です。JPEG 形式で保存するときには圧縮率を変えることができますので，圧縮率を大きくすればファイルサイズを減らすことができます。ただしあまり圧縮率を大きくしますと画質が劣化します。
　「名工大の風景−1」では圧縮率 12% で保存した画像を用いましたが，圧縮率を 36% に高めた画像を用いて，名工大の風景−2を作ってみました。

　画像 4 つのファイルサイズの合計が 163.2 kB に半減しました。HTML ファイルと合わせて 164.9 kB になりました。

　ところで，名工大の風景−1 と 名工大の風景−2に使われている写真の画質の違いに気が付きましたか。

(3)画像の圧縮と画質の劣化
　JPEG 画像を高圧縮率で保存した場合に，どの程度画質が劣化するかを圧縮と画質の劣化というページで実際に見てみましょう。
　左側にある原寸の写真を見ただけでは画質の劣化はそれほど気にならないと思います。ところが拡大してみますと，圧縮率を上げるに従って劣化が激しくなっていることが良く分かります。この劣化は少し大き目にプリントしみると，もっとはっきりと目立ちます。

　Webページを訪れた人がパソコンのディスプレイで見るだけでしたら，かなり高圧縮率にしてもかまわないのですが，印刷して楽しむ可能性があるなら，なるべく画質が劣化しない程度の圧縮率で保存した方がよいのです。


(4)サムネイル方式の採用
　ページの中に直接大きな画像を載せずに，サムネイルとよばれる小さめの見本だけを置けば，ページをかなり軽くすることができます。ページを訪れた人は，見本を見て，必要なものだけをクリックすれば大きな画像を楽しめるというものです。
　それではサムネイルを採用した名工大の風景−3を見てみましょう。

　HTML ファイルのサイズはテーブルの採用などで少し増えて 2.0 kB となりましたが，画像 4 つのファイルサイズの合計が 26.1 kB と大幅に減少しましたので，HTML ファイルとを合わせて 28.1 kB と非常に小さくなりました。

　名工大の風景−3には，ひとつ欠点があります。それは見たい写真をクリックしたとたんに，写真についての説明が見えなくなってしまうことです。その欠点を解消したのが名工大の風景−4です。ついでに罫線を入れたり，行間スペースをすこし空けたりして，見やすくしました。

　HTML ファイルのサイズは少し増えて 2.8 kB となりましたが，全体からみればほんの少しの増加です。

　名工大の風景−4のページにはスタイルシートとJavaScriptという機能が使われています。これらを使うことによって HTML だけでは出来ない表現やアクションが可能となります。

ブラウザのJavaScript機能をoffにしている場合は，正しく表示されません。

　ソースを見ますと，最初の方に <style type="text/css"> というタグがありますが，その部分でスタイルシートを設定しています。そこでは <td class="p1"> というタグに改行幅を標準の 130% で表示するという機能を与えています。

　もうひとつはサムネイルをクリックしたときに別のウィンドウを開いてその中に大きな画像を表示させるために，<a> タグの中の onclick 属性として次のような JavaScript が使用されています。
<a href="nit01_12.jpg" target="new2"
onclick="window.open('nit01_12.jpg','new2',
'scrollbars=1,resizable=1,status=1,width=660,height=500');
 return false">
　スタイルシートやJavaScriptについては，いずれまた説明したいと思います。


　　だいぶ使いやすくなった 名工大の風景−4 ですが，大きな写真が表示されたウィンドウを閉じてから別のサムネイルをクリックすれば問題ないけれども，ウィンドウを閉じずに別のサムネイルをクリックすると，写真が表示されたウィンドウが隠れてしまう場合があります。

　その問題を解消したのが名工大の風景−5です。サムネイルをクリックしたときに写真そのものを表示させるのではなくて，写真を表示させるための HTMLファイルを表示させるようにしたのですが，それだけではなく，写真を表示させるための HTML ファイルには，新しいウィンドウを手前に表示させるための JavaScript が組み込まれているのです。

　「名工大の風景−5」の HTML ファイルのサイズは，「名工大の風景−4」のときと全く同じ 2.8 kB です。

(5)サムネイルの作り方と大きさ
　サムネイルは画像処理ソフトを用い作ります。作り方は簡単で，目的の画像のサイズを縮小して別名で保存するだけです。このとき圧縮率は 50〜70% 程度とかなり高目に設定しましょう。

　サムネイルは小さくした方がファイルサイズも小さくなりますが，あまり小さいと見にくくなります。どの程度に小さくすると見にくくなるかは画像の内容等によっても変わってきますし，大きさはページのデザインにも影響しますので，適切な大きさは作ってみて決めるのが一番ということになります。


このページのトップへ