■ 「画像」に関して注意すべきこと

画像(イメージ)をWebで使うときに注意すべきことはいろいろ書いてきた
ここに書いてあることは「当たり前」のこと。しなければならない、画像使用に関しての絶対条件
もし守れていないようなら、あなたにWebを人に見せる資格はありません


1.IMGタグに「WIDTH」と「HEIGHT」はあるか
画像を使用するとき、つまり「IMG」タグにサイズ指定の属性を書いていますか
要するに、「WIDTH」と「HEIGHT」を必ず書いていますか

<IMG width="" height="" src="">
「WIDTH」と「HEIGHT」は指定しなければならない。必須であると覚えておいてください
もし指定がなければ、ブラウザはまず文字のレイアウトを決めて、後で画像の入る位置を再び計算することになる
もし指定があれば、画像の大きさの分をはじめから空けて、文字のレイアウトを決めることができる

つまり指定しておかないと、画像を全て読みこんで画像の大きさがわかるまで表示されないことになります
簡単にいうと、同じ容量のWebでも画像サイズの指定があるかないかで表示される速度が変わるのです
苦労して1バイトでも軽い画像を作る努力をしても、サイズ指定がないと水の泡になります
たとえどんなに小さい画像でも必ずサイズ指定するように。


2.1バイトでも軽い画像を作る努力はしているか
画像の容量が大きいと当然読み込むのに時間がかかる。同じ画像でも工夫次第でいくらでも軽くすることはできます
誰もが画像作成ソフトで苦労してクールな画像を作ります。しかしできあがった画像のまま保存してはならない
必ず1キロバイトでも軽くする努力をするように心がけること。

「JPEG」ならできる限り圧縮すること。
JPEGは1600万色まで扱えます。それなのに軽い理由は簡単にいうと圧縮しているからです
JPEG画像の場合は、見た目が変わるまでとにかく圧縮することです
プレビューを見ながら、色がおかしくなるまで圧縮率を変えていきます。ギリギリの所まで圧縮すること
作り終えたときの半分くらいまで画像サイズを下げることもできます

「GIF」ならできる限り減色すること。
GIFは256色までと決まっています。しかし大抵の場合は256色も必要ありません
128色でも見た目は変わらないことが多いし、その方が画像サイズは小さくなります
GIF画像の場合は、128色で見た目が変わらなければ、次は32色まで落とす、まだいけるなら16色まで、、
順番に見た目がくずれるまで、できる限り減色すること

「できる限りの縮小」を心がける。
大きい方が目立ちますし、見栄えもいいでしょう
しかし本当にその大きさが必要でしょうか?
画像そのものを縮小すれば、それだけ画像サイズは小さくなります

また初心者にはGIFの方がJPEGより軽いと思っている人がいるようですが、
例えば128色のGIFよりも、圧縮したJPEGの方が軽いことだってあります
一概にそのようには言えないことも覚えておいてください