画像貼り付け

 画像の種類

現在、コンピュータで扱える画像ファイルの形式に多岐にわたりますが、 ホームページ上で扱える(ブラウザ単体で表示できる)画像ファイルの形式はGIF、JPEG、PNGの三種類です。 これらの形式はファイルの大きさを小さくするために圧縮と呼ばれる手法を用いています。

GIF、JPEG、PNGの概要を示します。

GIF
Graphics Interchange Formatの略で、ジフと読みます。アメリカのパソコン通信CompuServeで開発された画像ファイルの形式で、256色までを扱えます。イラストのような画像はこの形式を使うのが普通です。また、簡単なアニメーションを作ることもできます。この形式で利用している圧縮の手法には特許の問題があります。
JPEG
Joint Photographic Expert Groupの略で、ジェイペグと読みます。24ビットカラー(約1670万色)を扱えるので写真などの自然な画像を扱うときに使います。 デジタルカメラの画像形式として使用されています(デジタル一眼レフは別形式)。 JPEGの圧縮方式では圧縮後の画像は圧縮前の原画像に比べて品質が劣化します(これを非可逆性圧縮という)。
PNG
Portable Network Graphicsの略で、ピンと読みます。 GIFが抱えている色数や特許の問題を解決するために考案された新しいファイル形式で、48ビットまでの色数を扱扱え、圧縮後の画像劣化はありません。ただし、ファイルサイズが大きくなってしまうのが欠点です。

これらの形式以外のファイルを扱うにはプラグインという他のソフトが必要になります。

 IMG要素

GIF、JPEG、PNGの画像ファイルをホームページに表示させるにはIMG要素を使います。 BRやHR要素と同様に終了タグは不要です。 この要素では最低限、画像ファイルを指定するsrc属性を指定します。

src属性 表示する画像の指定

src属性で表示する画像のファイル名やURLを指定します。

書式

<IMG src="ファイル名またはURL">

例1:sample.jpgを表示する

<IMG src="sample.jpg">

sample.jpg

例2:http://blog.k-sakabe.com/resources/DSC09897.jpgを表示する

HTMLファイルと異なるサイトのファイルを表示できます。

<IMG src="http://blog.k-sakabe.com/resources/DSC09897.jpg">

http://k-sakabe.com/resources/DSC09897.jpg

例3:存在しないファイルを指定した場合

ファイル名やURLの指定を間違った場合、画像は表示されません。代わりにファイルが存在しない事を示す表示になります。

ファイルはありません。

alt属性

この属性は画像を表示できないブラウザで画像の代わり説明の文を指定します。

記述と表示例

<IMG src="sample.jpg" alt="霞に埋もれる研究所棟">

使用しているブラウザで画像の表示を抑制できる場合、表示を抑制し、この属性に指定した文が表示されるかを確認してください。

霞に埋もれる研究所棟

title属性

この属性は画像にマウスポインターを合わせたときにツールチップとして表示させたい文を指定します。

例えば、「霞に埋もれる研究所棟」と表示させる場合、次のように記述します。 

<IMG src="sample.jpg" title="霞に埋もれる研究所棟">

画像にポインターを合わせ、ツールチップが表示される事を確認してください。

霞に埋もれる研究所棟

hspaceとvspace属性:画像周辺の余白

画像の周囲にある他の画像や文字との間に余白は、hspaceおよびvspace属性を使い、指定します。 前者は画像の左右に、後者は画像の上下に指定したピクセルだけ余白を作ります。

記述例と表示例

たとえば、画像の周囲に20ピクセル分の余白が必要であれば次のように属性を指定します。

<IMG src="sample.jpg" hspace="20" vspace="20">

余白の指定の有無で表示は次のように変わります。

余白無し 余白あり
sample.jpg sample.jpg

border属性 : 画像に枠線をつける

画像の周囲に枠線を付けたいときは、border属性を使います。たとえば、周囲に幅2ピクセルの枠線を表示させるには次のように属性を指定します。

<IMG src="sample.jpg" border="2">

この記述を使うと次のように表示されます。

枠線を付けたsample.jpg

widthとheight属性 : 表示サイズを変える

表示される画像の大きさを変えることができます。幅と高さの両方を指定するwidthとheight属性を使います。両方を同時に使うこともできますが、一方だけを使うこともできます。

例1:画像の幅と高さを100ピクセルにする

<IMG SRC="sample.jpg" width="100" height="100">

画像の縦横比は無視され、指定した幅と高さで表示されます。

sample.jpg

例2:画像の幅のみを100ピクセルにする

<IMG SRC="sample.jpg" width="200">

縦横比に基づいて高さを自動的に調節してくれます。

sample.jpg

文字の表示位置の調整

画像の周囲に文章がある場合、表示はどうなるのでしょう。文章と同じ段落の中に画像を張り込むと次のような表示になります。

文章と同じ段落内の画像を表示した例です。sample.jpgどんな風に表示されるかを確認してください。おかしな感じで表示されているはずです。

align属性

画像の周囲の文を画像のどの位置に揃えるかはalign属性で指定します。この属性には次の値を指定できます。デザインに関わる属性なので将来的に廃止される可能性があります。

値 動　作
left 画像を文章の左側に配置します。
right 画像を文章の右側に配置します。
top 画像の上端に文字を揃えます。
middle 画像の中央に文字を揃えます。
bottom 画像の下端に文字を揃えます。

属性値leftとrightを指定した例を示します。

align属性の値 表示例
指定無し 文章と同じ段落sample.jpg内の画像です。
align="left" 文章と同じ段落sample.jpg内の画像です。
align="right" 文章と同じ段落sample.jpg内の画像です。
align="top" 文章と同じ段落sample.jpg内の画像です。
align="middle" 文章と同じ段落sample.jpg内の画像です。
align="bottom" 文章と同じ段落sample.jpg内の画像です。