ダサいホームページ作成マニュアルの解説（画像編）
ここでは、「ダサいホームページ作成マニュアル」のダサい理由を考えてみることにします。私自身は全面的に賛成しているわけではありません。これらに当てはまってもいいページは沢山存在します。
- トップページにドでかい画像を置く（しかもアニメ GIF ）
- トップページの読み込む時間が長いと、訪問者は完全に読み込みが終わるまでの間に立ち去ってしまう可能性があります。感覚で言えば、何重にもなった扉を開けるようなものです。なるべく軽いページをトップに置くことで、初回訪問者に入りやすいページを作ることができます。アニメ GIF は一般の GIF よりもサイズが大きくなりがちなので、使い場所を考えて配置しましょう。
- サイズ指定で無理やり画像を縮めている
- 実際のファイルのサイズが大きいものを、読み込みに時間がかかるだろうと、表示サイズだけを指定して小さく表示しているのをたまに見かけます。しかし、実際表示される画像は小さくなっていても、読み込むファイルのサイズは変わっていないので、読み込み時間の短縮にはなりません。元のファイルを圧縮してサイズを小さくしましょう。
- タイトルのロゴが虹色
- ホームページビルダー全開のホームページで実例を。
- バナーがやけくそにでかい
- バナーを作成するには、貼ってくれる相手のことも考えて小さいものにしましょう。馬鹿でかいものは、そもそも貼ってくれないかも知れません。
- 画像形式（ GIF,JPEG ）の特性を全く理解していない
- GIF は、最大256色で、ファイルサイズを小さくできるメリットがあります。よって読み込み時間も短くできます。ページ内であまり色数を必要としないならば、積極的に利用しましょう。JPEG は圧縮こそされていますが、ファイルサイズは GIF に比べ大きいので、写真などでの利用にとどめましょう。またページ内には、あまり大きなサイズは使用しないほうがいいでしょう。
- 背景画像が読み込まれるまで文章がさっぱり読めない
- 背景画像が読み込まれるまでは、BODY 要素に指定した色が表示されます。これが、文字色と同じ、あるいは同系色だと読むことができません。背景画像と同系色を指定すると読みやすくなるでしょう。
- 不必要に色数が多い（ GIF ）
- GIF は圧縮率が低くなると、ファイルサイズが大きくなります。色数をあまり必要としない画像（単色に近いもの）なら思い切って圧縮してしまいましょう。
- 背景画像の彩度が高すぎてテキストが読めない
- 背景画像が、妙に明るいと文字が見えず読めない場合、あるいは読みにくい場合があります。背景画像と文字列の色を沢山の人達に読んでもらえるように設定しましょう。
- 透過 GIF なのにわざわざ画像枠を表示させている
- 透過 GIF は色の設定が無い個所を、透明処理し、背景と違和感なく溶け込ませることができるのにも関わらず、IMG 要素の border 属性 を 0 以外にしてしまって枠が出てしまう場合があります。透過 GIF は枠の指定を 0 にしましょう。
- 透過 GIF の輪郭が背景色に溶け込んでいない（ギザギザ）
- 処理が適切でなかったり、背景色との相性が悪かったりすると、せっかくの透過 GIF がギザギザに表示されることがあります。特にロゴを作った時など注意しましょう。
- 必要のない文字まですべて画像で作る、サイトマップはすべてクリッカブルマップで、alt 指定なし
- 不必要な画像で作った文字は、素直に文字で表すとすっきりしますし、ページ自体も軽くできます。alt 属性は、体の不自由な方が読み上げソフトを使用して、閲覧している場合に画像が何を表示しているかを示すのに使用したり、画像を何らかの理由で表示できない場合に代替の文字列を表示するのに使用したりします。アクセシビリティ向上につながるページを目指すならば、指定しましょう。また、HTML 4.01 では、IMG 要素の alt 属性は必須項目になっています。
- サムネイルのファイル名にみんな sam- が入ってる
- thumbnail が正しいつづりです。短縮するならば正しい単語を調べると、不必要に笑われません。