Enrich Human Knowledge

人類全体の知識向上を目指して

Images

Images | HTML Dog


 テキストだけでは味気ない。画像(image)もある。


 imgタグはHTMLドキュメントの中に画像を置くために用いられる。属性scrはブラウザに画像をどこで探せばよいかを教える。アンカータグの時のように場所の指定は絶対記法でも相対記法でも良い。

 例えば"alienpie.jpg"という画像が"images"ディレクトリに保存されている場合、

<img scr="images/alienpie.jpg"...

のようにすれば良い。


 widthとheight属性は必要である。なぜなら、これらが無いと、ブラウザはページをロードしている時ではなく、画像をロードしている時にサイズを計算するので、ページがロードされている間にページのレイアウトがぐるぐると変わってしまうことになる。

 alt属性は代用記述(alternative description)である。画像が見ることが出来ないユーザーにとって意味のある情報を提供する。(例えばalt="HTML Dog"としてあると、画像が表示されなくても代わりにHTML Dogの文字が表示される。)


 改行タグbrのように、このタグは何のコンテンツも含まないので終了タグを必要としない。



 補足:最も一般的に使われている画像形式はJPEG, GIF, PNGである。これらは圧縮形式の名前であって、ぜんぜん違う用途を持つ。

 JPEG ("jay-peg"):数学的アルゴリズムを用いて画像を圧縮する。その結果、元の画像より少し劣化する。JPEGは写真などの画像に典型的に用いられる。

 GIG ("jif"): 256種類しか色を使えないけれども、元の画像の色を保つ。色の数を少なくすればするほど、サイズが小さくなる。GIFはアイコンやロゴなどの特色(solid color)が用いられている画像に典型的に用いられる。

 PNG ("ping"): 複雑なデザインが用いられているversatileな画像に典型的に用いられるが、古いブラウザにはサポートされていないことがある。


 ウェブは日々高速化しているが、自分のページはなるべく早くロードできるようにするべきである。高画質な画像はロードを遅らせる。そこで圧縮する必要が出てくる。どんな方法が一番良いか知るためには、試行錯誤しか無い。