HP制作の小技

契約しているプロバイダは快適ですか?「快適だよ」と言う方もHPが軽いにこしたことはありませんよね。
それに見に来てくれるすべての人が快適なプロバイダであるとは限りませんし。
ここではHPを軽くする為の涙ぐましいまでの技を幾つか紹介します。塵も積もれば山になる・・です。




 
GIF や PNG 形式を使う


GIF 形式や PNG 形式の一部の内部にはパレットという「使われている色のデータ」を保存する部分があります。
画像を GIF 形式で書き出そうとするとすぐには書き出せませんね?
( PNG はフルカラーもサポートしているのでそのまま書き出すことも出来ますが)
書き出そうとするとカラーと言う項目が出て来て、そこで設定できる(使える色の)最大数は僅か 256 しかありません。
この様に使う色数を減らす作業を「減色」と言います。GIF 形式を扱ったことがある方にはお馴染みでしょう。
さて、この減色でパレットは 256 個あるのですが、これを使い切らずに済めばどうなるでしょう?

パレットについてはこちらを参考にして下さい。

さて、「パレット使い切らずに」とはどう言うことでしょう? 256 個のパレットには画像で使われている色のデータが格納されています。
それを使い切らないと言うことは、つまり画像は 256 色よりもさらに少ない色数、例えば 128 色 64 色と言うことです。

正解は「ファイルサイズが小さくなる」です。GIF や PNG では使用色数(カラーパレットの使用数)を抑えると
非常にファイルサイズを抑えることが出来ます。
ただ、Photoshop4.0 はその減色性能は余り高くありません。
Photoshop5.5 になって Web 関係の機能が向上しているようですが、4.0 では満足出る物ではありません。
それは
ですから私は今のところ、 GIF や PNG 形式への保存はPhotoshopは使っていません(^^;
まがりなりにもPhotoshopのコーナーなのにPhotoshopを使わないって言い切るのもおかしいんですが(笑)
画像を作るのはPhotoshop、それをいったんBMPで保存して別のツールでGIFに変換しています。
この方法が私なりに見つけた「CGを綺麗に、かつファイルサイズを小さく」する方法の一つです。

私が使っているのは公開が中止になってしまったフリーソフトなので紹介はしません。
ただ、オンラインソフトにはまだまだGIFなどの256色以下のフォーマットを扱うことに特化したソフトが
まだまだありますし、CGビュアー(表示ツール)の中にも綺麗に変換してくれるものがあります。
いろいろなツールを使ってみて、あなたのお気に入りのツールを探してみて下さい。



 
CGの無駄を無くす

見た目がちょっと寂しいからと、特に意味のない大きな画像を置いたりするのは論外としても
画像のファイルサイズを小さくする事は軽いHPにする為の大きな要因です。
CGのちょっとの無駄が大きな差になってきます。その無駄をギリギリまで削るもう一つの方法とは?

さて、ここにこう言う画像があります。画面サイズは 100 * 100 です。
この画像を「見た目はまったく変わらないのにファイルサイズを小さく」してしまう方法があります。
それは A の文字の周りは単色であることを利用します。

Aと言う文字の天地左右にはまだ余裕がありますよね?これを削ってしまいます。
範囲選択ツールを使い、文字をギリギリのサイズで切り出してしまいましょう。
拡大表示させるととてもやり易くなります。
Photoshopで文字と背景が別レイヤーになっていれば
[選択範囲] - [選択範囲の読み込み] (レイヤーxx/透明部分、選択範囲は新規選択範囲で)文字のみを選択して、
[編集]-[コピー] で、文字をクリップボードに取り込み、 [ファイル]-[新規] (サイズはそのまま)で新規ファイルを作り、
[編集]-[ペースト] で文字のレイヤーをぎりぎりの大きさの画像に作り直す事もできます。


切り出してみました。それでは早速貼り付けてみましょう。

・・・・・・周りに余裕が無くて
格好が悪いと言うより
なんかマヌケですね(笑)
 こちらはごく普通に見えます。
 ちゃんと周りに余裕があると
 普通に見えますよね。


何がやりたいんだ?とお思いの方もいるでしょう。上の2つの画像を単独で表示してみて下さい。
ネットスケープですとカーソルを画像の上に置いてマウスを右クリック。そして [ 画像を表示 ] を選択します。
どうですか?どちらも同じ画像ではありませんでしたか?

これは表を枠線の太さを 0 で組み、表の背景色と画像の背景色を合わせて HTML 側で背景色を作り出しています。
普通に縦100x横100であるこの画像を貼り込むだけでしたら

<IMG SRC="画像名" HEIGHT=100 WIDTH=100>

と言うタグだけで良いのですが、ここでは無駄な背景をぎりぎりまで切り落として
縦89x横75まで小さくし、HTMLタグで100*100の画像のように見せます。

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100" HEIGHT="100" BGCOLOR="#8C8EFC">

テーブルタグで外枠を本来の画像のサイズ(ここでは100ドット四方)でサイズを指定、
罫線の太さ、罫線とテキストの間隔はすべてを 0 に指定して、表の背景色と画像の背景色を合わせます。

<TR>
<TD ALIGN="CENTER">
<IMG SRC="削った画像名" HEIGHT=89 WIDTH=75>

ぎりぎりまで削った画像をそのままのサイズ(この例では89x75)で配置して

</TD></TR></TABLE>

で、テーブルタグを閉じます。
こうするとHTMLのサイズはやや大きくなりますが、CG のファイルサイズが小さくなる分、画像と HTML を合わせた
ページ全体のファイルサイズは小さくなると思います。
レイアウトでピクセル単位でのズレが気になる場合は表の大きさと CELLPADDING (セル内の空白)オプションを
調整する事で解決します。

この方法は TABEL タグの標準的なオプションを使うため、殆どのブラウザで対応しているはずです。
背景を透明にする場合や単一の色を使う場合はこの様に HTML で表現出来る部分を
HTML を積極的に使う事でギリギリまで削ってしまう事ができます。
この方法の弱点は、小さい画像の場合は苦労の割に効果が出にくいことですね。それと、
WIDTH HEIGHT のオプションで画像の大きさを指示するのは忘れない様にしましょう。
これを忘れると画像の読み込みが完了するまで何も表示されなくなると言う逆効果になってしまいます。

まあ、この例では画面サイズが小さくて1つだけなので大して省サイズ化は出来ていないのですけど(^^;
ページのタイトルなど、ある程度大きい物や複数の画像をこの方法で表示させると変わってくると思います。
また、HPが発展してきてプロバイダから割り当てられたサイズに近くなってきてしまったなんて言う方にも
お勧めできるかと思います。かなり手間は掛かりますけどインターネットのトラフィック軽減にも
なりますので自分の為、見てくれる人の為、インターネット全体の為にお試しあれ(^^)


 
色の合わせ方

HTML と連携させるためには色の数値を出してみましょう。
最近は画像の色を拾って16進数で表示するツールなんてモノがあるらしいですけど、
ココを見れば算数のできる方でしたら誰でもできると思います(笑)

CGの背景色と表の背景色のどちらを基準にして色を合わせるかの違いはありますが、
Photoshop での色のデータ値が判れば後はさほど難しくありません。
スポイトツールで背景色をクリックしてCGの背景色を取り出しましょう。
するとツールパレットの描画色にCGの背景に使っている色が拾い出されます。
ツールパレットの描画色(スポイトで拾い出された色)の部分をクリックします。


そうするとカラーピッカーが表示されます。
ここには現在のその色のデータが数値になって表示されます。
この中のR、G、Bのそれぞれの数値をメモして下さい。
この数値はそれぞれ0〜255の間に収まっていると思います。
なぜならモニタで表示する色は光の三原色であるR(赤)、G(緑)、B(青)を
それぞれ256段階で混ぜて表示させています。それぞれが256段階ですから
組み合わせ数は 256 * 256 * 256 で16,777,216。
これがCGのフルカラーの色数が1677万色であると言う理由です。

さて、一般にブラウザの色指定は #CC1F5D などの16進数で表記する事が多い様です。
10進数で表記する事もできますが(^^;
Photoshopで得られた数値は10進数ですから、これを16進数に変換すればOKです。

変換と言っても暗算でも出来る簡単な計算です。
10進16進対応表です。

10進数 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16進数 0 1 2 3 4 5 6 7 8 9 A B C D E F


この表を使って変換してみましょう。
一例として 245 を 16 進数に変換してみましょう。割り算をして、その答えが 10 の位、余りは 1 の位になります。
245 を 16 で割ります。答えは・・・15 余り 5 ですね?
表を見てみましょう。15 は 16 進数で F です。これで 10 の位は F。余りの 5 はそのまま 5 ですから、
245 を 16 進数に直すと F5 と言うことになります。

逆に 16 進数から 10 進数へは( 10 の位* 16 + 1 の位)で出すことが出来ます。
例えば CF でしたら C は 12、F は 15 ですから( 12 * 16 + 15 )= 207。
これで 16 進数で CF は 10 進数に直すと 207 だと言うことが判ります。


暗算が苦手な方、いちいちこのHPまで表を見に来る(笑) のが面倒だと言う方。そんなあなたでも大丈夫(笑)

Windows には電卓が装備されてるのをご存じですか?スタートメニューの中のアクセサリの中にあるでしょう。
無かったら追加インストールしてくださいね。では、電卓を起動してみましょう。
[電卓の種類] - [関数電卓]を選択します。電卓で使うキーはこれだけ
なにやらたくさんボタンが出てきましたけど、焦らなくて大丈夫。
使うのは [16進] [10進] のラジオボタンと 0 〜 9 までの数字、
A 〜 F までのアルファベット、それとクリアのボタンだけです。

・10進から16進へ

まずはラジオボックスが 10 進にチェックが入っていることを
確認して 10 進数の数値を入力します。
入力したら 16 進のラジオボタンをクリックしましょう。
16 進にチェックが移ったらそれで終わり。
255 を入力したなら FF と表示されているでしょう?

・16進から10進へ

先ほどと逆の手順を踏むだけです。ラジオボタンが 16 進になっていることを確認したら、
16 進数の数値を入力して 10 進のラジオボタンをクリックするだけ。
3C と入力したら 60 と表示されましたね?



どちらの方法でもこの変換をそれぞれR(赤)G(緑)B(青)ごとに変換してやれば良いわけです。
これで HTML とCGの色を合わせる事が出来るようになりました(^^)

実は色を aqua, black, blue, gray,lightgrey など色名で指定したり、
RGB の数値を RGB (50%,0%,100%) の様に%で表記しても大概のブラウザでは表示されます。
ただし、過去に一部のブラウザでは%表記には対応していないものがありました。
まあ、16 進表記に対応していないブラウザは無いでしょうから、何か意図があるならば別ですが、
敢えて色名で指定したり%での表記は避けた方が良いでしょう。
特に「灰色」は gray ですが、「明るい灰色」は lightgrey と、おかしな違いとかもあってミスしやすいですしね。



 
HTMLの小技

今度はブラウザのタグを利用した方法です。

同じHTMLファイルを読み込んでもブラウザはその種類によって動作が微妙に違います。
HTML文法に準拠していない独自のタグを採用していたり、表示されるフォントの大きさや余白なども
ブラウザによって違っているのでHPを作る側としてはそれが悩みの種ですね(^^;
さて、前フリはこれくらいにして・・・。例えば画像を表示させるには
<IMG SRC="画像名.拡張子"> と言うタグを使いますね。
このタグが有る場合、ネットスケープナビゲーター ( 以下 NN ) とインターネットエクスプローラー ( 以下 IE )では
動作が若干違います。ローカル(HD)上ではその違いはわかりにくいのですが、
この様な HTML ファイルを読み込む場合に、NNは表示サイズが不明のイメージ(画像)がある場合は
画像の読み込み完了を優先させ、IE は HTML ファイルの読み込みを優先させます。
具体的に言えば、NN は、画像を読み込み終わって、サイズが確定するまではレイアウトが決まらないため、
例えその画像以降の HTML を読み込み終わっていたとしても表示しません。
NN がこの様な動作をするのはレイアウトが崩れるのを避けたいと言う意図からなのだと思います。
実用性重視の IE、制作者の意図を重視する NN と言ったところでしょうか。
ただし問題なのは HTML の先頭に画像が使われている場合や表( TABLE タグ )の場合です。
NN では画像サイズが不明であると画像が読み完了まで、もしくは表の中の画像が全て読み込み終わるまで
その他の部分までもが表示待ちになってしまう事です。

インデックス(トップページ)の HTML で画像のサイズが記入されていないとどうなるでしょう?
毎回毎回読み込む度に HP のタイトル画像や内容へのリンクの為の画像、アクセスカウンターなどが
全てが読み終わるまで HP 内のコンテンツには飛べないなんて見に来てくれた人は非常にイライラしてしまいます。
よほどの理由がない限りは読み込みをやめてしまうでしょう。
これではいくら画像のファイルサイズを気にしても全く意味がありません(^^;
この問題を解消するには
<IMG> タグでは<IMG SRC="title.gif" HEIGHT=75 WIDTH=420 ALT="- Drifting Web -"> の様に
画像の縦(HEIGHT)と横(WIDTH)のサイズを必ず記入しましょう。
こうすることでNNでもHTMLを読み込んだ時点でレイアウトを決定でき、画像以降のテキスト部分も表示されます。
ローカル( HD )では転送速度が速いので気にならないのですが、オンラインでは転送速度が桁違いに遅いので
サイズ指定があるのとないのでは体感上の速度はまるで違ってしまいます。

ちなみに ALT とは画像のコメント。これは HTML 文法では必須のオプションではないのですが、
画像の説明として使えるので画像が表示できないブラウザや読み込み中、読み込みを中止したときなどに
画像が読み込まれていない時にはここで指定した文字が画像に代わって表示されますので、
重要な画像やリンクの為の画像には付けておいた方がよいでしょう。
特に画像だけでリンクさせている場合( 文字でのリンクが無い場合)は必須でしょう。
IEでは画像のサイズが不明でも先にHTML部分を表示してしまうため、
自分のHPの動作確認に IE をお使いの方は特に注意してください。


 
小さい画像を大きく見せる

HTML では画像の表示サイズを指定することが出来ますよね。
実際の画像の表示サイズは 100*100 なのに、 HTML で200*200 で表示させることも出来ます。
つまり、ブラウザ側で拡大(縮小)表示させてしまう方法です。
単純に考えれば画像のファイルは1/4のサイズで収まってしまうのですから軽くはなります。
しかし、ドット絵の場合を除いてこの方法は絶対にやってはいけません。それは何故か?
汚いんです。表示される画像が滅茶苦茶汚い(;_;)/ イラストと違って「見せるための画像」ではなくとも
ちょっと酷すぎます。
なにより、いくら軽くなるとは言え、これじゃ高価な Photoshop を使う意味がまったくありません。
大きい画像を縮小表示させるのも同様です。
とは言え縮小表示は読み込みが遅くなるだけですからやる人はあまり居ないでしょうけど(^^;
ブラウザは画像の拡大、縮小表示には向いていないようです。
これはアンチエイリアス部分やグラデーションの部分がそのまま拡大されてしまう事が原因です。
やはり画像は等倍で表示させるのが良いしょう。HPはやっぱり綺麗で軽くないとね(^^)


 
インターレース、プログレッシブを使う

GIF形式やJPG形式にはインターレース、プログレッシブなどのサブフォーマットがあります。
詳しくは画像フォーマットの特徴を見ていただくとして・・・。
例えばGIFにはインターレース形式がありますが、普通の形式(ノンインターレース)に比べて、
ファイルサイズ自体はやや大きく、転送されるデータ量は増えてしまうのですが、徐々に表示されるという特徴から、
見ている人は「待たされて居る」と感じにくい様です。サイズより体感で早く感じさせる方法です。

(大体2KB以下の)小さい画像では読み込みがすぐ終わるので、意味がないのですが
HPのタイトルや大きめのイメージには早いタイミングから全体像がわかりやすい
インターレース、プログレッシブ形式がおすすめです。



戻る