■ Webサイトで上手に画像をつかう方法
クリエイティブの1歩。ついつい忘れてしまいがちな、画像サイズ、とaltについて
ホームページで画像を表示させる時のタグは、
<img src="画像ファイルのパス">これだけでOkです。
しかししかし実は、これだけでは不十分なのです。
少なくとも、手書きで、クリエイティブなWebサイトを作りたいのならば、
ここの内容は絶対に無視できません!実はそれほど重要なことなのです。
といっても、やらなければならないことはほんのわずかです。
さっそく、タネ明かしをすると、
<img>タグの中にwidth,height,altを書くだけ、たったそれだけです。
(↑と、書いてあるのをどこかで見かけたことがありませんか(笑))
簡単に理由を説明すると、width,heightは画像の大きさを指定するために、
altは表示させる画像の説明を行うために必要です。(代替テキスト)
これらを書いたらどうなるのかというと、、
width,heightを書いておくと、書かなかったときに比べて
画像ファイルの表示が速くなります。これは大きなメリットです。
また、altは画像が表示されなかったときの代替テキストとして活躍してくれます。
100%画像が表示されるという保証はどこにもありません。
例え表示されなくても訪問者が分かりやすい仕組みを作っておきましょう。
ホームページの画像に関する注意点は以上です。
より良いWebデザインを目指す人は、必ず2つとも書くように心がけてください。
テキストエディタを使って手書きでタグを書き込んでいる人は特に注意してください。
ただ忘れやすいということもありますが、何より面倒だからです(笑)
ヒント:画像の大きさを調べるには以下のようにすると簡単です。
1.width,heightを指定せずに、ブラウザを起動させる。
2.表示された画像を右クリックする。
以上で簡単に画像サイズを確認することができます。
(100×100といった感じで表示されます)
最後に具体的な書き方を紹介します。
<img src="画像ファイルのパス" width="100" height="100" alt="詳しい内容はコチラ→">
と、このように書いておけばOkです。
おまけ:画像サイズを指定する理由
ブラウザ(インターネットエクスプローラーやネットスケープなど)が表示される時、
ブラウザは1度Webページの内容をすべて読み込みます。
このときに画像ファイルの情報も一緒に読み込まれるわけですが、
サイズ指定している場合と、していない場合ではどう違うのでしょうか?
まず、画像のサイズが指定されている場合、ブラウザははじめに読み込んだ情報どおりに
画像を表示するだけでよいので、余計な心配もせずに素早く画像ファイルを表示してくれます。
しかし、サイズ指定していない場合は、画像全体のサイズが分からないため、
恐る恐る手探りで画像を表示していくことになります。まさに様子をうかがうようにゆっくりと、です。
おまけ2:alt代替テキストを書く理由
レンタルサーバー、インターネット回線、パソコンの不良、、、
などであなたが精魂込めて作った画像ファイルが表示されない場合があります。
(実は回線的な問題でも起こります)
そんなとき、altを書いていなかったら、、、
画像の代わりに、みにくい×(ばってん)だけが表示されてしまうことになります。
醜いだけ、だなんて、あなただったら、、、、嫌。。。でしょう(笑)
おまけ3:他にもこんなオマケが、、、、
・Googleのクローラーもaltの内容を読み込みます。PageRankアップの第1歩!にもなります。
・画像の上にマウスを持っていくとaltの内容が表示されます。
・うまく表示できなくてもaltに書いた代替テキストが表示されます。(上で説明した通りです)
などなど、ちょっぴり面倒な作業が増えてしまいますが、とってもお得なので必ず書くようにしてくださいね!