画像表示

Tweet

ホームページにとって文章とともに欠かせない要素画像。
ここでは、ホームページに画像を載せるやり方を紹介します。

画像について

ホームページで使用する画像には大きく分けて3種類あります。

JPEG画像

拡張子がjpeg又はjpgの画像。デジカメで撮った写真やゲームのスクリーンショット(画面画像を撮ったもの)等に良く使われるタイプ。ファイルサイズも比較的小さいのも特徴。

画質を下げることでファイルサイズはさらに小さくなるが、画像が汚くなってしまい元の綺麗な画像には戻せなくなってしまう。
その為、画質調整する際には変更前のものをバックアップ(コピー)しておくのが鉄則です。

PNG画像

拡張子がpngの画像。かなり綺麗な画像の代わりに、JPEG画像と比べてファイルサイズが大きくなりがち。
透過画像といわれる指定した一色を透き通らせて表示する画像も作ることが出来る。画質を下げることでファイルサイズは小さくなり、画質の劣化も少ない。

GIF画像

拡張子がgifの画像。使われる色の数が少ない代わりに、相当ファイルサイズは小さい。色数が少ないホームページロゴやアイコン等の素材に良く使われる。
透過画像といわれる指定した一色を透き通らせて見せることも出来る。また、アニメーションGIFというものもあり、これは文字通りアニメーションの様に動く画像。複数枚のGIF画像を組み合わせて作られているので、ファイルサイズがかなり大きくなってしまう。バナー画像としてよく使われる。

大雑把に分けると

JPEG画像

⇒色が多い写真のような画像向き

GIF画像

⇒色が少ないボタンやロゴのような素材画像向き

PNG画像

⇒他2つの利点を兼ね備えているがファイルサイズが大きい

と言った感じになります。
画像に合わせて、使う画像のタイプを使い分けるの良いでしょう。

画像表示[<img/>]

ホームページに画像を表示する時はimgタグを使用します。また、表示させる画像はペイントソフト等で作ってあらかじめ用意しておく必要があります。

以下灰色背景がサンプルソース薄緑背景が実際の見た目

青い背景に黒く縁取りされた白抜き文字で「画像サンプル」と書かれた画像(gazo1.png)が表示されました。
ここから、imgタグの中に色々書かれている部分を1つずつ説明していきます。

src属性

src=”～”のこと。この“と”の間に表示させたい画像へのパスを書きます。
上の例では、imgフォルダ内にあるgazo1.png画像を表示させるという意味になります。パスについての説明は絶対パスと相対パスのページをご覧ください。

alt属性

alt=”～”のこと。この“と”の間に、何かしらの理由で画像が表示されなかった場合に画像の代わりに表示させる文字を書きます。
ブラウザは画像表示しないという設定が出来ますし、目の不自由な方向けのホームページ読み上げソフトではこのalt属性に書かれた文字を読むので、書いておくと親切です。

title属性

title=”～”のこと。この“と”の間に、画像の上にマウスカーソルを合わせた時に表示させる文字を書きます。
画像の補助説明的な言葉を書いたりすると良いでしょう。(例：花の写真のtitle属性に花の名前を書く。)

他にも色々指定できる項目はあるんですが、上の3つを押さえておけば普通はOK。画像表示に関してはばっちりです。